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

偏执的太偏执、 2022-12-25 15:54 1阅读 0赞

在前端开发的项目当中，与后端进行数据交互，请求后端数据是一个必不可少的工作。当前前端开发工作中，通常使用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` 提供的默认 [请求配置][Link 1], `vue-axios-plugin` 也提供了 `request/response` 拦截器配置，如下:

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html#" rel="nofollow"><code>reqHandleFunc</code></a></strong></td> 
   <td><code>{Function}</code></td> 
   <td><code>config =&gt; config</code></td> 
   <td>请求发起前的拦截处理函数</td> 
  </tr> 
  <tr> 
   <td><strong><a href="http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html#" rel="nofollow"><code>reqErrorFunc</code></a></strong></td> 
   <td><code>{Function}</code></td> 
   <td><code>error =&gt; Promise.reject(error)</code></td> 
   <td>处理请求错误的函数</td> 
  </tr> 
  <tr> 
   <td><strong><a href="http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html#" rel="nofollow"><code>resHandleFunc</code></a></strong></td> 
   <td><code>{Function}</code></td> 
   <td><code>response =&gt; response</code></td> 
   <td>响应数据处理函数</td> 
  </tr> 
  <tr> 
   <td><strong><a href="http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html#" rel="nofollow"><code>resErrorFunc</code></a></strong></td> 
   <td><code>{Function}</code></td> 
   <td><code>error =&gt; Promise.reject(error)</code></td> 
   <td>响应错误处理函数</td> 
  </tr> 
 </tbody> 
</table>

## 示例 ##

在 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`插件的话，会很方便的解决这个问题，这个时候就需要用到请求方法的第三个参数。

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

例如：

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

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

// 请求拦截处理
      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;
      },

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

解决方法:

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

具体包做法是：

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

[Link 1]: https://github.com/axios/axios#request-config