对axios进行二次封装,统筹管理api, 项目中配合async await使用。
1、在src/api下创建request.js文件,对axios进行封装。
// request.js代码
import axios from 'axios'
import {throwErr} from '@/utils/throwErr.js' //utils 捕捉服务端http状态码的方法
import store from '@/js/Store.js' //引入vuex的相关操作
import {Message} from 'element-ui' //element Toast的提示
import {showLoading,hideLoading} from '@/utils/loading'; //显示、关闭loading
let showLoding = true;
axios.interceptors.request.use((config) => {
// 请求拦截
if (showLoding) {
//showLoading();//显示loading
}
return config
}, error => {
return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(
response => {
//hideLoading();//关闭loading
if (response.data.status == true || response.status == 200) { //服务端定义的响应status码为true时请求成功
return Promise.resolve(response.data) //使用Promise.resolve 正常响应
} else {
return Promise.reject(response.data)
}
},
error => {
//hideLoading();//关闭loading
if (error && error.response) {
let res = {}
res.code = error.response.status;
res.msg = throwErr(error.response.status, error.response) //throwErr 捕捉服务端的http状态码 定义在utils工具类的方法
return Promise.reject(res)
}
return Promise.reject(error)
}
)
export default function request(method, url, data,loding ) { //暴露 request
//封装RESTful API的各种请求方式 以 post get delete为例
method = method.toLocaleLowerCase() //将method转换为小写
if (loding == undefined) {
//判断是否需要loading
showLoding = true;
} else {
showLoding = loding;
}
if (method === 'post') {
return axios.post(url, data)
.then((res) => {
return successState(res);
})
.catch((response) => {
return errorState(response);
})
} else if (method === 'get') {
return axios.get(url, {
params: data
})
.then((res) => {
return successState(res);
})
.catch((response) => {
return errorState(response);
})
} else if (method === 'delete') {
return axios.delete(url, {
params: data
})
.then((res) => {
return successState(res);
})
.catch((response) => {
return errorState(response);
})
}
}
// 封装数据返回成功提示函数---------------------------------------------
function successState(response) {
if (response.status == true) {
Message({
duration: 1500,
message: response.msg,
type: 'success'
});
} else {
Message({
showClose: true,
message: response.msg,
type: 'error'
});
}
return response;
}
// 封装数据返回失败提示函数--------------------------------------------------
function errorState(res) {
// 统一判断后端返回的错误码(错误码与后台协商而定)
if (res.code == 401) {
//判断是否已登录,未登录做出相应的操作
//store.commit('CHANGE_LOGIN_DIALOG_STATUS', true);
} else {
Message({
duration: 5000,
showClose: true,
message: res.msg,
type: 'error'
});
};
return res;
}
2、创建src/api/axiosApi.js文件,统筹管理api
// axiosApi.js代码
import request from './request' //引入axios的封装方法
export default {
install: function(Vue) {
Vue.prototype.getAxios = (url, params, loding) => request('GET', url, params,loding)
Vue.prototype.postAxios = (url, params, loding) => request('POST', url, params,loding)
Vue.prototype.delectAxios = (url, params, loding) => request('DELECT', url, params,loding)
// Vue.prototype.activityList = (params,loding) => request('post', 'activity/activityList', params,loding) //也可以写具体的请求路径,在使用时直接通过this.activityList使用
}
}
3、在main.js中引入
// main.js代码片段
import axiosApi from './api/axiosApi.js'
Vue.use(axiosApi)
4、在项目中结合async/await使用
// axios请求代码片段
async getData(){
// await 必须配合async 使用
let params={
"pageIndex":1,
"pageSize":10
};
let res=await this.postAxios('/activity/activityList',params,true);
//await 等请求成功后才会执行下面的代码
console.log(res)
}
5、utils/throwErr.js捕捉服务端http状态码的方法,根据情况决定是否需要,如果不需要记得修改request.js文件中用到throwErr的地方,避免报错。
//axios捕错,错误码与后台协商而定
export const throwErr = (code, response) => {
let msg=response.data.msg;
let message = '请求错误';
switch (code) {
case 400:
message = '请求错误'
break
case 401:
message = '未授权,请登录'
break
case 403:
message = '拒绝访问'
break
case 404:
message = `请求地址出错: ${response.config.url}`
break
case 408:
message = '请求超时'
break
case 500:
message = '服务器内部错误'
break
case 501:
message = '服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务不可用'
break
case 504:
message = '网关超时'
break
default:
}
let curMsg = msg?msg:message;
return curMsg
}