Axios Instructions for 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

I have written two examples:

Using Vue2.0+mintui+axios+vue-router:https://github.com/stevenzwzhai/vue-mobile-application

Using Vue2.0+elementui+axios+vue-router:https://github.com/stevenzwzhai/vue2.0-elementui-axios-vuerouter, Before because the backend interface is not done, so run no data, now add MOCKJS to return some data, for reference.

In this example, the PWA file is simply configured with some things that can be used for PWA application Development Reference, article reference http://www.cnblogs.com/Upton/p/6894589.html

Article turned from: https://www.cnblogs.com/Upton/p/6180512.html

Axios Instructions for use