axios请求和API的封装与使用
程序员文章站
2022-07-02 12:16:57
...
新建一个request.js文件
import axios from "axios";
import qs from 'qs'
// 创建axios实例
const service = axios.create({
baseURL: "http://192.168.5.34:8081", // api 的 base_url
timeout: 5000, // 请求超时时间
});
// request请求拦截器
service.interceptors.request.use(
config => {
if(config.method!='get'){
config.data=qs.stringify(config.data);
}
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config;
},
error => {
const res = error.response.data;
message.error('请求结果:' + res.message);
return Promise.reject(error);
}
);
// response响应拦截器
service.interceptors.response.use(function (response) {
// 全局捕获 code等于255 然后强行跳转到登录页
if (response.data.code == 255){
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
}
return response
}, function (error) {
return Promise.reject(error)
})
export default service;
新建一个api.js文件,存放接口
在里面引入request.js文件
import request from '../request/request'
// 获取账号列表
export function queryAllPerson(data) {
return request({
url: "web/person/queryAllPerson",
method: "post",
data
});
}
// 删除账号
export function deletePerson(data) {
return request({
url: "web/person/deletePerson",
method: "post",
data
});
}
// 添加账号
export function createPerson(data) {
return request({
url: "web/person/createPerson",
method: "post",
data
});
}
在组件中的script标签里引入函数名
import { queryAllPerson, deletePerson, createPerson } from '../../request/accountApi'
methods: {
// 获取账号列表
getQueryAllPerson() {
queryAllPerson(this.queryInfo).then(res=> {
if (res.data.code !== 1) return
this.membersList = res.data.resultData
})
},
}