Understanding and use of Axios

Keywords: Javascript Front-end

(for your later review. If there is something wrong, I hope the boss will correct it)

1. What is Axios

Axios is a promise based HTTP library that can be used in browsers and node.js.

2.Axios features

  1. Create XMLHttpRequests from the browser
  2. Create http request from node.js
  3. Promise API supported
  4. Intercept requests and responses
  5. Convert request data and response data
  6. Cancel request
  7. Automatically convert JSON data
  8. Client support defense XSRF

3. Installation (cdn and npm can be installed, and npm is used here)

npm install axios

4. Some API s commonly used by Axios

Default configuration (two are listed, and others can be viewed on the official website)

axios.defaults.timeout = 1000 / / set the global timeout
axios.defaults.baseUrl = 'localhost:8080' / / set global baseUrl

instantiation

 axios.create([config])
You can create a new axios. The advantage is that when you request two servers with different ports and domain names, you can create two instantiated objects, and then write their own relevant information in their respective configurations (such as configuring their respective base addresses) to facilitate the later access to data.

const a = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
}) 

Methods (only some common methods are listed)

Both axios and axios instances can be called (get and post are used here as examples, and others are similar)
1.axios(config)
  general / most essential way to send any type of request

axios({
  method: 'post',  //It can be modified as get request
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
  1. axios.request(config)
       equivalent to axios(config)
  2. axios.get(url[, config])
    Send a get request to read data from the server
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  1. axios.delete(url[, config])
      send a delete request to delete the server-side data
  2. axios.post(url[, data[, config]])
      send a post request to add new data to the server
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  1. axios.put(url[, data[, config]])
      send a put request to update the data on the server

Note: config is an object with the following parameters:
  url
  method
  baseURL
  headers
  params
  data
  timeout
  responseType
  responseEncoding
  withCredentials
  paramsSerializer
  transformRequest
  transformResponse

5.Axios interceptor

(1) . request Interceptor: a function that can check the request or configure specific processing before actually sending the request,
      including success / failure functions, the passed must be config

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

(2) . response Interceptor: a function that can perform specific processing on response data after the request is returned,
      includes success / failure functions. The default passed is response

// Add response interceptor
axios.interceptors.response.use(function (response) {
    // Do something about the response data
    return response;
  }, function (error) {
    // Do something about response errors
    return Promise.reject(error);
  });

Posted by chamade76 on Sat, 30 Oct 2021 09:32:28 -0700