yarn 如何安装依赖 yarn安装axios

在前端开发的项目当中，与后端进行数据交互，请求后端数据是一个必不可少的工作。当前前端开发工作中，通常使用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 拦截器配置，如下:

参数名

类型

默认值

描述

{Function}
config => config

请求发起前的拦截处理函数

{Function}
error => Promise.reject(error)

处理请求错误的函数

{Function}
response => response

响应数据处理函数

{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'
};
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);
});

这里我分别使用了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;
},