axios blocking settings and error handling

Best currently contemplated processing interface requests the global error, axios overall configuration as follows

1. Based on axiso.interceptors respond interception: an error is mainly responsible for global

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. Package axios methods (such as get)

Responsible for all the results (including errors) are handled by reslove, so the next stage is directly then you can get all the results, and the use await the grammar, no 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. Package an interface:

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

4. main.js registration:

import service from '@/service'
Vue.prototype.$service = service

5. Call Interface

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