Access to external resources in Vue

1.fetch
fetch known as AJAX alternatives are appearing in ES6, ES6 use the promise of an object. Fetch is based on the promise of design. Fetch code much simpler structure than ajax, parameters a bit like jQuery ajax. However, we must remember that more is not ajax fetch package, but the native js, do not use the XMLHttpRequest object .

fetch the advantages of:
1. Meet the separation of concerns, no input, output, and status events to track objects in the mix in a
2 better and more convenient wording

Specific usage is:

fetch('http://localhost:8181/messageBoard/messages', {method: 'GET', headers: {'content-type': 'application/json'}})

.then(response => response.json())

.then(json => {

  console.log(json);

})

 

1.axios

After Vue2.0, especially the rain the river is recommended that you replace JQuery ajax with axios, presumably so that axios into many people's eyes.
axios HTTP client is a browser-based Promise for nodejs and, in essence, is the packaging of the native XHR, but it is implemented version of Promise, in line with the latest ES specification, which itself has the following characteristics:
1. From the browser create XMLHttpRequest vessel
2. support the API Promise
3. client support prevent CSRF
4. concurrent requests provides some interface (important, a lot of convenience operation)
5. Create an http request from Node.js
6. the request and response intercept
7 the conversion request and response data
8. cancellation request
9. automatically convert JSON data
PS: prevent CSRF: is to make your every request with a get from the cookie key, depending on the browser same-origin policy, the website is fake you have to get the cookie key, so that you can easily identify the background to this request is misleading user input on the fake website in order to take the right strategy.

Specific usage is:
First, Vue project, enter vue add axios
Then you can use:
axios.get('http://localhost:8181/messageBoard/messages)
.then(response => {
  console.log(response.data)
})
 
 
References:

Guess you like

Origin www.cnblogs.com/ABKing/p/12444073.html