axios拦截设置和错误处理

目前想出的处理接口请求进行全局错误提示的最佳方案，axios整体配置如下

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)     } )

主要负责将所有的结果（包括错误）都通过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()                     })             })         }     }

封装一个接口：

export default {     getList: (config) => getService(`/api/getList`, config) }

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 {             // 请求错误的情况，一般不需要特殊处理，因为已经在全局设置了错误提示           }         });     }

来源：博客园

作者：Happy222~

链接：https://www.cnblogs.com/XHappyness/p/11429526.html

标签

response

config

return

error