"Turn" Vue updated to 2.0 Vue-resource not updated, Axios use

After Vue has been updated to 2.0, the author declares that it is no longer a vue-resource update, but rather the recommended Axios, which has been used for a while, and now for its basic usage.

The first is to introduce Axios, if you use ES6, just install the Axios module

Import Axios from ' Axios ';
Installation method
NPM Install Axios
Or
Bower Install Axios

Of course, you can also use script to introduce

<script src= "Https://unpkg.com/axios/dist/axios.min.js" ></script>

Axios provides several ways of requesting

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])

Config here is the configuration of some basic information, such as the request header, BaseURL, of course, here are some of the more convenient configuration items

Config
Import qs from ' QS '
{  //The requested interface, when requested, such as Axios.get (Url,config), where the URL will overwrite the URL url in config  : '/user ',  //Request method as above  : ' Get ',//default  //base URL prefix  baseURL: ' https://some-domain.com/api/',
　　
　　　　  Transformrequest: [function (data) {    //) The request data can be processed before sending the request, such as form-data formatting, etc. Here you can use the Qs introduced at the beginning (this module is installed when the Axios is installed, do not need to install separately) data = Qs.stringify ({});    Return data  ,}],  transformresponse: [function (data) {    //This is the time to process the returned information in advance    ;  }],  //Request header information  headers: {' x-requested-with ': ' XMLHttpRequest '},  //parameter parameter  params: {    ID: 12345  },  //post parameter, using Axios.post (url,{},config), if there is no additional and must use an empty object, otherwise it will error  data: {    firstName: ' Fred '  },  //Set timeout time  timeout:1000,  //Return data type  responsetype: ' json ',//default}

With the configuration file, we can reduce a lot of extra processing code and be more graceful, directly using

Axios.post (Url,{},config)    . Then (function (res) {        console.log (res);    })    . catch (function (err) {        console.log (err);    })
Axios request returned is also a promise, tracking error only need to add a catch on the last.
Here's how to handle multiple requests at the same time

Axios. All ([Get2 ()])  .  Then (Axios.  Spread (function (//Only two requests are completed to succeed, otherwise caught by Catch}));      

Finally, the configuration item, above is the additional configuration, if you do not want to write another can directly configure the global

Axios.defaults.baseURL = ' https://api.example.com '; axios.defaults.headers.common[' Authorization '] = Auth_token; axios.defaults.headers.post[' content-type '] = ' application/x-www-form-urlencoded ';

Of course, it can be configured like this

Axios. Create ({  BaseURL' https://api.example.com'});  

This article is just about basic usage, see the Official document Https://github.com/axios

"Turn" Vue updated to 2.0 Vue-resource not updated, Axios use