vue-axios-plugin的用法，以及快速的为项目配置多个接口

在前端开发的项目当中，与后端进行数据交互，请求后端数据是一个必不可少的工作。当前前端开发工作中，通常使用axios插件向后端拿数据。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios有很多的有点，这里就不一一一一熬述，有兴趣的读者可以自行搜索。如果直接使用axios，比如：

npm install axios

or

yarn add axios

需要对axios的请求、响应进行二次封装，会多一道工作。作为一名程序员，切记不要重复造轮子。

在vue项目当中，可以使用vue-axios-plugin插件。

npm 模块引入

首先通过 npm 安装


npm install --save vue-axios-plugin

or

yarn add vue-axios-plugin

然后在入口文件配置如下:


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

Vue.use(VueAxiosPlugin, {
  // 请求拦截处理
  reqHandleFunc: config => config,
  reqErrorFunc: error => Promise.reject(error),
  // 响应拦截处理
  resHandleFunc: response => response,
  resErrorFunc: error => Promise.reject(error)
})

配置参数

除了 axios 提供的默认请求配置, vue-axios-plugin 也提供了 request/response 拦截器配置，如下:

参数名	类型	默认值	描述
`reqHandleFunc`	`{Function}`	`config => config`	请求发起前的拦截处理函数
`reqErrorFunc`	`{Function}`	`error => Promise.reject(error)`	处理请求错误的函数
`resHandleFunc`	`{Function}`	`response => response`	响应数据处理函数
`resErrorFunc`	`{Function}`	`error => Promise.reject(error)`	响应错误处理函数

示例

在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法，使用如下:


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

你也可以通过 this.$axios 来使用 axios 所有的 api 方法，如下：


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

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

每个请求方法可以传入三个参数，第一个参数url多接口地址，第二参数是接口请求参数。那么，第三个参数是干什么用的呢？

如果一个项目当中，需要配置多个请求接口的话，该如何做呢？

如果使用vue-axios-plugin插件的话，会很方便的解决这个问题，这个时候就需要用到请求方法的第三个参数。

首先要明白，第三个参数的类型是对象或者数组（有疑问，自行研究）；

例如：

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

      this.$http.post('/login', data, {
        interfaceType: 'second'
      }).then(response => {
        console.log(response);
      });

这里我分别使用了get和post请求，并且都给其传入了第三个参数。这个第三个参数都是对象，对象里面只有一个键值对，键interfaceType相同，但是值不同。

然后在配置vue-axios-plugin的文件当中使用传入的第三个参数，例如：

 // 请求拦截处理
  reqHandleFunc: config => {
    console.log(config.interfaceType === 'first');
    /* config.baseURL =
        process.env.NODE_ENV === 'production'
          ? 'https://www.520mg'
          : 'http://rap2api.taobao/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;
  },

如果出现了一种需求是post像get一样使用params传参，那么该如何去做呢？

解决方法:

发表的axios签名是axios.post(url[, data[, config]])。所以你想在第三个参数中发送params对象：

具体包做法是：

 const data = {
        phone: 'renlei',
        code: '12'
      };
 this.$http.post('/login', null,
 {
  params：data
 }).then(response => {
   console.log(response);
 });

如果需要配置多接口的话，同样的道理将区别接口的地址的参数放入第三个参数当中即可：

 const data = {
        phone: 'renlei',
        code: '12'
      };
 this.$http.post('/login', null,
 {
  params：data,
  interfaceType: 'first'
 }).then(response => {
   console.log(response);
 });

更多推荐

vue-axios-plugin的用法,以及快速的为项目配置多个接口