In front-end development projects, data interaction with the back-end and requesting back-end data is an essential task. In the current front-end development work, the axios plug-in is usually used to get data from the back-end. Axios is a promise-based HTTP library that can be used in browsers and node.js. There are many advantages of axios, which will not be described here. Interested readers can search for them by themselves. If you use axios directly, for example:

npm install axios

or

yarn add axios

It is necessary to encapsulate the request and response of axios twice, and there will be more work. As a programmer, remember not to reinvent the wheel.

In the vue project, you can use the vue-axios-plugin plugin.

npm module import

First install via npm

npm install --save vue-axios-plugin

or

yarn add vue-axios-plugin

Then configure the entry file as follows:

import Vue from 'Vue'
import VueAxiosPlugin from 'vue-axios-plugin'

Vue.use(VueAxiosPlugin, {
  // Request interception processing
  reqHandleFunc: config => config,
  reqErrorFunc: error => Promise.reject(error),
  // Response interception processing
  resHandleFunc: response => response,
  resErrorFunc: error => Promise.reject(error)
})

Configuration parameters

In addition to the default provided by axios request configuration , vue-axios-plugin also provides request/response interceptor configuration, as follows:

Example

Added the $http property to the Vue component, which provides get and post methods by default, which are used as follows:

this.$http.get(url, data, options).then((response) => {
  console.log(response)
})
this.$http.post(url, data, options).then((response) => {
  console.log(response)
})

You can also use all axios api methods through this.$axios, as follows:

this.$axios.get(url, data, options).then((response) => {
  console.log(response)
})

this.$axios.post(url, data, options).then((response) => {
  console.log(response)
})

Each request method can pass in three parameters, the first parameter is the url multi-interface address, and the second parameter is the interface request parameter. So, what is the third parameter for?

If a project needs to configure multiple request interfaces, how to do it?

If you use the vue-axios-plugin plugin, it will be very convenient to solve this problem. At this time, you need to use the third parameter of the request method.

First of all, you must understand that the type of the third parameter is an object or an array (in doubt, research it yourself);

E.g:

  const data = {
        phone: 'renlei',
        code: '12'
      };
      const option = {
        interfaceType: 'first'
      };
      this.$http.get('/cardLists', data, option).then(response => {
        console.log(response);
      });
      const option1 = {
        interfaceType: 'second'
      };
      this.$http.post('/login', data, option1).then(response => {
        console.log(response);
      });

Here I use get and post requests respectively, and both pass in the third parameter. The third parameter is an object. There is only one key-value pair in the object. The key interfaceType is the same, but the value is different.

Then use the third parameter passed in in the file that configures vue-axios-plugin, for example:

 // Request interception processing
  reqHandleFunc: config => {
    console.log(config.interfaceType === 'first');
    /* config.baseURL =
        process.env.NODE_ENV === 'production'
          ? 'https://www.520mg.com'
          : 'http://rap2api.taobao.org/app/mock/254896/'; */
    let url = 'http://129.168.1.87/first';
    if (config.interfaceType === 'first') {
      url = 'http://129.168.1.87/first';
    } else if (config.interfaceType === 'second') {
      url = 'http://129.168.30.85/second';
    }
    config.baseURL = url;
    config.headers['Content-Type'] = 'application/json';
    config.headers.Accept = 'application/json';
    config.retry = 4;
    config.retryDelay = 1000;
    config.timeout = 60000;
    return config;
  },