I. Preface

In vue1.x, the official recommended HTTP request tool is Vue resource, but vue2.0 changed the recommended tool to axios
 After Vue 2.0 is added, Vue resource will not be updated any more, so HTTP request is introduced to axios

axios and Vue resource are used in a similar way,
Note: res returned by axios interface is not the data returned directly, but the json object processed by axios.
The real data is in res.data
axios.get(url).then((res)=>{
      this.data = res.data
})

Let's start with axios

2, About axios

Axios is a promise based HTTP library for browsers and node.js

Functions:

Create XMLHttpRequests from the browser
 Create http request from node.js
 Support Promise API
 Intercept requests and responses
 Transform request data and response data
 Cancellation request
 Automatically convert JSON data
 Client supports XSRF defense

Three, installation

$ npm install axios

4, Easy to use

GET request:

// Create request for user with given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Alternatively, the above request can do this
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST request:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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) {
    // Enter after both requests are executed
  }));

5, Response structure

The requested response contains the following information

{
  // data:Data the server responds to
  data: {},

  // status:Server responseHTTPStatus code
  status: 200,

  // statusText:Server responseHTTPstatus information
  statusText: 'OK',

  // headers:Header of server response
  headers: {},

  // :config:Configuration information provided for the request
  config: {}
}

Received response:

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

6, Error handling

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // Request issued, but server response status code is not in 2xx range
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

// Use the validateStatus configuration option to customize the error range of the HTTP status code.
axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Status code will reject when it is greater than or equal to 500
  }
})