Vue.js 2.0 recommends using axios for ajax requests.
Axios is a Promise-based HTTP library that can be used in browsers and node.js.
GithubOpen Source Address: [https://github.com/axios/axios](https://github.com/axios/axios)
### Installation
**Using cdn:**
or
**Using npm:**
$ npm install axios
**Using bower:**
$ bower install axios
**Using yarn:**
$ yarn add axios
### Browser Support
!(#)
* * *
## GET Method
We can simply read JSON data:
## GET Example
new Vue({el: '#app', data(){return{info: null}}, mounted(){axios .get('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }})
[Try it Β»](#)
Use response.data to read JSON data:
## GET Example
Website List
{{ site.name }}
new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('') .then(response => (this.info = response.data.sites)) .catch(function (error) { // Request failed handling console.log(error); }); } })
[Try it Β»](#)
GET method parameter passing format is as follows:
## Parameter Passing Description
axios.get('/user?ID=12345') .then(function(response){console.log(response); }) .catch(function(error){console.log(error); }); axios.get('/user', {params: {ID: 12345}}) .then(function(response){console.log(response); }) .catch(function(error){console.log(error); });
* * *
## POST Method
## POST Example
new Vue({el: '#app', data(){return{info: null}}, mounted(){axios .post('') .then(response =>(this.info = response)) .catch(function(error){console.log(error); }); }})
[Try it Β»](#)
POST method parameter passing format is as follows:
## Parameter Passing Description
axios.post('/user', {firstName: 'Fred', lastName: 'Flintstone'}) .then(function(response){console.log(response); }) .catch(function(error){console.log(error); });
* * *
## Executing Multiple Concurrent Requests
## Example
function getUserAccount(){return axios.get('/user/12345'); }function getUserPermissions(){return axios.get('/user/12345/permissions'); }axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function(acct, perms){}));
* * *
## axios API
Requests can be created by passing relevant configuration to axios.
## Example
axios(config)axios({method: 'post', url: '/user/12345', data: {firstName: 'Fred', lastName: 'Flintstone'}}); axios({method:'get', url:' responseType:'stream'}) .then(function(response){response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))}); axios(url[, config])axios('/user/12345');
### Request Method Aliases
For ease of use, aliases are provided for all supported request methods. You can use the alias directly to make requests:
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
**Note:** When using alias methods, properties such as url, method, and data do not need to be specified in the configuration.
### Concurrency
Helper functions for handling concurrent requests:
axios.all(iterable) axios.spread(callback)
### Creating an Instance
You can create a new axios instance with custom configuration:
axios.create()const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}});
### Instance Methods
The following instance methods are available. The specified configuration will be merged with the instance's configuration:
axios#request(config) axios#get(url[, config]) axios#delete(url[, config]) axios#head(url[, config]) axios#post(url[, data[, config]]) axios#put(url[, data[, config]]) axios#patch(url[, data[, config]])
### Request Configuration Options
The following configuration options are available when creating a request. Note that only url is required. If method is not specified, the request will default to get method.
{ // `url` is the server URL to use for the request url: "/user", // `method` is the method used to create the request method: "get", // default is get // `baseURL` will be prepended to url unless url is an absolute URL. // It can be convenient to set a `baseURL` for passing relative URLs to methods of an axios instance baseURL: "https://some-domain.com/api/", // `transformRequest` allows changing the request data before it is sent to the server // This only applies to request methods "PUT", "POST", and "PATCH" // The functions in the array must return a string, ArrayBuffer, or Stream transformRequest: [function (data) { // Do some transformation to the data return data; }], // `transformResponse` allows changing the response data before it is passed to then/catch transformResponse: [function (data) { // Do some transformation to the data return data; }], // `headers` is the custom request headers to be sent headers: {"X-Requested-With": "XMLHttpRequest"}, // `params` is the URL parameters to be sent with the request // Must be a plain object or URLSearchParams object params: { ID: 12345