Axios Instructions for use

Source: Internet
Author: User

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
Bower Install Axios

Of course, you can also use script to introduce

<script src= "Https://" ></script>

Axios provides several ways of requesting

Axios.request (config) axios.get (url[, config]) axios.delete (url[, config) axios.head (url[, config]) (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

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: '',
     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 (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 (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 = ' '; axios.defaults.headers.common[' Authorization '] = Auth_token;[' content-type '] = ' application/x-www-form-urlencoded ';

Of course, it can be configured like this
Axios. Create ({  BaseURL''});  

This article is just about basic usage, see the Official document Https://

I have written two examples:

Using Vue2.0+mintui+axios+vue-router:

Using Vue2.0+elementui+axios+vue-router:, 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

Article turned from:

Axios Instructions for use

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.