500拦截报错 axios_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