在前端开发的项目当中,与后端进行数据交互,请求后端数据是一个必不可少的工作。当前前端开发工作中,通常使用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.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对象:
具体包做法是:
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);
});