axios拦截设置和错误处理

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

转载于:https://www.cnblogs.com/XHappyness/p/11429526.html