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 {
            // 請求錯誤的情況，一般不需要特殊處理，因為已經在全局設置了錯誤提示
          }
        });
    }