目前想出的处理接口请求进行全局错误提示 的最佳方案,axios整体配置如下
1.基于axiso.interceptors进行响应拦截: 主要负责全局提示错误
axios.interceptors.request.use(
config => {
config.timeout = 30000;
return config;
},
err => {
return Promise.reject(err);
}
)
axios.interceptors.response.use(
response => {
// 根据后端约定,response.data形式为{success:boolean, message:string, content:any}
if (response.data.success) {
return response.data
} else {
iView.Notice.error({
title: '错误',
desc: response.data.message
})
Promise.reject(response.data.message)
}
},
error => {
if (error.response) {
if (error.response.status === 401) {
// 这种情况一般调到登录页
} else if (error.response.status === 403) {
// 提示无权限等
} else {
// 其他错误处理
}
}
return Promise.reject(error.response.data)
}
)
2. 封装axios方法(比如get)
主要负责将所有的结果(包括错误)都通过reslove来处理,这样下一级直接then就可以得到所有的结果,而且使用await语法使,不需要try..catch...
axiosGet: (url, config, showLoading = true) => {
if (showLoading) {
return new Promise((resolve, reject) => {
iView.LoadingBar.start()
axios.get(url, config)
.then(data => {
resolve(data)
iView.LoadingBar.finish()
}).catch((error) => {
resolve()
iView.LoadingBar.error()
})
})
} else {
return new Promise((resolve, reject) => {
axios.get(url, config)
.then(data => {
resolve(data)
}).catch((error) => {
resolve()
})
})
}
}
3. 封装一个接口:
export default {
getList: (config) => getService(`/api/getList`, config)
}
4. main.js注册:
import service from '@/service'
Vue.prototype.$service = service
5.调用接口
async getList() {
// 1.使用await
// 第2步封装axios方法时,对于错误情况,即catch内:resolve();
// 所以这里不需要try···catch···来使用await;这里如果res不为空,说明是正确接收数据的情况
this.loading = true;
let res = await this.$service.getList({
pageNum: this.page.current,
pageSize: this.page.size
});
this.loading = false;
if (res) {
// 此种情况说明请求成功
} else {
// 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示
}
},
getList2() {
// 2.使用then
// 第2步封装axios方法时,对于错误情况,即catch内:resolve();
// 所以这里then可以接收到正确和错误的结果,不需要再使用catch接受错误情况;这里如果res不为空,说明是正确接收数据的情况
this.loading = true;
this.$service
.getList({
pageNum: this.page.current,
pageSize: this.page.size
})
.then(res => {
this.loading = false;
if (res) {
// 此种情况说明请求成功
} else {
// 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示
}
});
}