目前想出的处理接口请求进行全局错误提示 的最佳方案,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 { // 请求错误的情况,一般不需要特殊处理,因为已经在全局设置了错误提示 } }); }