如何编写Vue接口请求错误处理

在Vue.js开发过程中，与后端进行数据交互是不可或缺的环节。通常我们会使用诸如axios这样的HTTP客户端来进行接口请求。然而，请求过程中难免会遇到各种错误，如网络问题、权限问题、接口返回错误等。为了给用户更好的体验，我们需要对这些错误进行适当的处理。

以下是Vue中处理接口请求错误的一种专业实践。

设置请求拦截器

首先，我们可以在axios实例中设置请求拦截器，以便在发送请求前做一些预处理，如添加Token等。

// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL, // API base url
timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
error => {
// 对请求错误做些什么
console.error('Request Error:', error)
return Promise.reject(error)
}
)

设置响应拦截器

接着，我们设置响应拦截器来统一处理接口返回的错误。

// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data
// 你可以根据自己项目的需要来定制当响应规范
if (res.code !== 200) {
// 如果返回的状态不是200，则认为是错误
console.error('Error Response:', res.message)
// 可以根据实际情况定制不同的提示信息或者错误处理逻辑
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.error('Response Error:', error)
// 对响应错误做点什么
// 这里可以针对不同的HTTP状态码给出不同的处理逻辑
if (error.response) {
// 请求已发出，但服务器响应的状态码不在2xx的范围
console.error('Error Response Data:', error.response.data)
console.error('Error Response Status:', error.response.status)
console.error('Error Response Headers:', error.response.headers)
} else if (error.request) {
// 请求已经发出了，但是没有收到响应
console.error('Error Request:', error.request)
} else {
// 在设置请求时触发了某些问题
console.error('Error Message:', error.message)
}
// 可以返回一个带有错误信息的Promise，这样在组件中可以捕获到
return Promise.reject(error)
}
)

在组件中使用

在组件中，我们使用封装好的axios实例来发起请求，并捕获可能出现的错误。

export default {
methods: {
fetchData() {
this.service.get('/some-endpoint')
.then(response => {
// 处理数据
})
.catch(error => {
// 错误处理逻辑
this.$message.error('数据获取失败：' + error.message)
})
}
}
}