[axios] not commonly used ways to organize axios

Reference documents: https://www.npmjs.com/package/axios
Preliminary preparation: you can use npm to install Axios. npm install Axios / bower install Axios

When we often make requests with axios, we usually use the following format

1.post request
//I. direct request
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//---------------------------------I'm the divider-----------------------------------------
//II. Request with parameters
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
2.get request
//I. direct request
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//---------------------------------I'm the divider-----------------------------------------
//II. Request with parameters
axios({
  method:'get',
  url:'/user',
})
  .then(function(res) {
  console.log(res)
});
 .catch(function (error) {
    console.log(error);
  });
The above are some common format requests, but in business requirements, there are often some requirements that are not satisfied with the above. Here are some uncommon requests
1.axios.all[{}].then(axios.spread) executes multiple requests at the same time, which is applicable to all enterprise websites with multiple filtering conditions
//The above is that all requests are executed before returning, 
axios.all([
    axios.get('https://api.github.com/xxx/1'),
    axios.get('https://api.github.com/xxx/2')
  ])
  .then(axios.spread(function (userResp, reposResp) {
    // After the above two requests are completed, the callback method is executed
    console.log('User', userResp.data);
    console.log('Repositories', reposResp.data);
  }));
2. Some parameters passed to the background by executing post request in a specific format need to be removed {}, that is, the x-www-form-urlencoded format
//Method 1:
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

//---------------------------------I'm the divider-----------------------------------------
//II. Request with parameters
var qs = require('qs');  //Or install npm to install qs
axios.post('/xxxxx/xx', qs.stringify({ 'bar': 123 }));
3. Interceptor intercepts before request or receiving
 //-------------------------------Official website example-------------------------------
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });


//--------------------------------------------Code in project----------------------------------------------
axios.interceptors.request.use(function (config) {
          config.withCredentials = true   //Configuration of request header, default is false
          config.headers = {
              token :xxxx     //Some requests need token, which needs to be configured here
          }
          return config;
          }, function (error) {
          return Promise.reject(error);
      })

Tags: axios npm github

Posted on Fri, 29 Nov 2019 11:29:25 -0800 by MoMoMajor