This is the 15th day of my participation in Gwen Challenge

introduce

  • What is Axios?

  • Axios is a Promise-based HTTP library that can be used in browsers and Node.js.

  • Reference: Axios Chinese

features

  • Create XMLHttpRequests from the browser
  • Create HTTP requests from Node.js
  • Support PromiseAPI
  • Intercept requests and responses
  • Transform request data and response data
  • Cancel the request
  • Automatically convert JSON data
  • The client supports XSRF defense

The installation

Use NPM: $NPM install axiosCopy the code
Using bower: $bower install axiosCopy the code
Use the CDN: < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script >Copy the code

case

Performing a GET request

// Create a request for the user with the given ID

axios.get('/user? ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});



// The above request can also do the same

axios.get('/user', {

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});
Copy the code

Performing a POST request

axios.post('/user', {

firstName: 'Fred'.lastName: 'Flintstone'

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});
Copy the code

Execute multiple concurrent requests

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

// Both requests are now completed

}));

/ / or

axios.all([
    axios.post(url),
    axios.get(url, params)
]).then(axios.spread((res1, res2) = > {
    console.log(res1);
    console.log(res2)
}))
Copy the code

The interceptor

Application Scenarios:

1: Parameters to be taken with each request, such as token, timestamp, etc.

2: Checks the returned status, for example, whether the token has expired.

Intercepts requests or responses before they are processed by THEN or catch.

// Add request interceptor
axios.interceptors.request.use(function (config) {
    // What to do before sending the request
    return config;
  }, function (error) {
    // What to do about the request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // What to do with the response data
    return response;
  }, function (error) {
    // Do something about the response error
    return Promise.reject(error);
  });
Copy the code

If you want to remove interceptors later, you can do this:

const myInterceptor = axios.interceptors.request.use(function () {/ *... * /});
axios.interceptors.request.eject(myInterceptor);
Copy the code

You can add interceptors for custom AXIOS instances

const instance = axios.create();
instance.interceptors.request.use(function () {/ *... * /});
Copy the code

Go to my personal Github for examples of interceptors and AXIos encapsulation management, located in the following folder, as shown: github.com/zchaoGe/Ele…

Request data format

1. Request data format is Application/X-www-form-urlencoded

Axios Settings: headers and transformRequest

axios({
    url: 'xxx'.method: 'GET'.headers: {
        "Content-Type": 'application/x-www-form-urlencoded'
    },
    transformRequest: [function (data) {
        let ret = ' ';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        }
        return ret
    }],
    params: data
}).then(res= > {
    // something code
}).catch(() = > {
   // something code
})
Copy the code