前言:鄙人前端开发三年,做了不少项目了,我发现我参与的大部分项目没有对请求接口参数这块进行配置,每次请求接口都得引入文件,挨个配置参数等,感觉太繁琐了,后面我就自己配置了下,在这做个记录,也给大伙分享一下。
1.我们在src文件夹下,创建一个名为“commom”文件夹,再在该文件夹下创建三个js文件,分别为api.js(该文件写我们的接口),http.js(该文件配置请求方式post,get,put等),common.js(该文件写添加全局属性或方法)。
2.在http.js文件中,我们可以这样配置:
//http.js文件
import axios from 'axios'
import api from "./api";
import Message from 'element-ui';
// 数据引入
let instance = axios.create({
timeout: 20000
// withCredentials: true,//跨域请求时是否携带凭证信息(如cookies和HTTP认证信息)。这个选项的默认值是false。
})
//配置请求时的拦截器
instance.interceptors.request.use(
config=> {
//该处写我们的逻辑代码...
}
)
//配置响应时的拦截器
instance.interceptors.response.use(
response => {
//比如约定code === 1417时, token 过期,code为1001时,登录失效。
if (response.data.code === 1417) {
//此处写我们的逻辑代码....
} else if (response.data.code === 1001) {
Message.error('登录信息已过期,请重新登录')
window.sessionStorage.clear();
//重新登录
window.location.href = "http://xxxx.xx.login";
}
return response && response
}
)
//下面为配置我们的请求方式,post,get,put,等
export default {
post(url, data, params) {
return instance({
headers: {
'token': sessionStorage.getItem('token'),
'Content-Type': 'application/json'
},
method: 'post', // 请求协议
url: url, // 请求的地址
data: JSON.stringify(data), // post请求的数据
params,
timeout: 30000 // 超时时间,单位毫秒
}).then(
(res) => {
return res.data
}
)
},
get(url, params) {
return instance({
headers: {
'token': sessionStorage.getItem('token')
},
method: 'get',
url: url,
params, // get请求时带的参数
timeout: 30000
}).then(
(res) => {
return res.data
}
)
},
put(url, data, params) {
return instance({
headers: {
'token': sessionStorage.getItem('token'),
'Content-Type': 'application/json'
},
method: 'put', // 请求协议
url: url, // 请求的地址
data: JSON.stringify(data), // post请求的数据
params,
timeout: 30000 // 超时时间,单位毫秒
}).then(
(res) => {
return res.data
}
)
},
//删除
del(url, params) {
return instance({
// headers: {
// 'token': sessionStorage.getItem('token')
// },
method: 'delete', // 请求协议
url: url, // 请求的地址
params,
timeout: 30000 // 超时时间,单位毫秒
}).then(
(res) => {
return res.data
}
)
},
//下载
download(url, params) {
return axios.get(url, {
params,
headers: {
token: sessionStorage.getItem("token")
},
responseType: 'blob'
}
//请求头配置
);
},
//自定义请求方式,该处为获取token,不带header参数的get请求,可自行配置。
getToken(url, params) {
return instance({
method: 'get',
url: url,
params, // get请求时带的参数
timeout: 30000
}).then(
(res) => {
return res.data
}
)
},
}
3.在api.js文件中,我们可以这样写:
//api.js文件
//当我们切换地址时,则需要在正式、测试环境地址切换即可,打包发布也一样在此处切换接口环境。
//如下面登录接口中“/login”即为后端给的接口字段,安装此格式依次添加即可。
//post,get,del等,则为我们刚刚配置的请求方式,
import $http from './http';
//测试环境地址:
let BASE_URL = 'http://xxx.test.xx';
//正式环境地址:
//let BASE_URL = "https://xxxx.xx"
//下面接口配置举例
export default {
BASE_URL: BASE_URL,
// 登录
login: (params) => $http.post(`${BASE_URL}/login`, params),
//获取表格接口数据
tabledata:(params) => $http.get(`${BASE_URL}/user/all`, params),
//编辑用户信息
editperson:(params) => $http.put(`${BASE_URL}/user/editperson`, params),
//删除用户
delperson:(params) => $http.del(`${BASE_URL}/user/delperson`, params),
//添加用户
addperson:(params) => $http.post(`${BASE_URL}/user/addperson`, params),
//查询职位
getRoleList:(params) => $http.get(`${BASE_URL}/role/all`, params),
};
3.在common.js文件中,我们可以这样配置:
//common.js文件
import axios from 'axios';
import urlApi from './api';
import httpAxios from './http';
//现在我们目标是要全局调用接口,就在Vue原型上添加属性:
export default {
install(Vue) {
Vue.prototype.$axios = axios;
Vue.prototype.$urlApi = urlApi;
Vue.prototype.$http = httpAxios;
}
}
4.在入口文件main.js中,我们可以这样配置:
(1)引入common文件夹(对应你的文件路径)
(2)使用Vue.use()即可。
5.全局调用接口:
现在,我们在该项目的任何.vue文件里,都可以使用“ this.$urlApi.接口名 ”调用接口。
举个例子,我们在login.vue里面,直接调用登录接口,如下图:
这样配置好后,我们再也不用每次调接口的时候,都得import一下,而且每个接口都写一坨配置信息啦!