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