要解决Axios捕获错误返回的是JavaScript错误而不是服务器响应的问题,可以使用Axios的拦截器来处理错误响应。以下是一个示例代码:
import axios from 'axios';
// 创建一个 Axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com',
});
// 添加响应拦截器
instance.interceptors.response.use(
// 请求成功时的处理
response => {
return response;
},
// 请求错误时的处理
error => {
// 判断是否为服务器响应错误
if (error.response) {
// 在此处可以根据服务器返回的错误状态码进行相应处理
console.log('服务器响应错误:', error.response.data);
} else {
// 在此处可以处理其他类型的错误,比如网络错误
console.log('其他类型错误:', error.message);
}
// 返回一个 Promise.reject(),以便在调用处可以继续捕获错误
return Promise.reject(error);
}
);
// 发送请求
instance.get('/api/users')
.then(response => {
// 处理成功响应
console.log('成功响应:', response.data);
})
.catch(error => {
// 处理错误响应
console.log('捕获错误:', error);
});
在上面的代码中,我们创建了一个Axios实例并添加了一个响应拦截器。在拦截器的请求错误处理逻辑中,我们通过判断error.response是否存在来确定是否为服务器响应错误。如果是服务器响应错误,可以根据需要进行相应的处理。如果不是服务器响应错误,那么可能是其他类型的错误,比如网络错误,我们也可以在此处进行处理。
最后,我们通过返回一个Promise.reject(error)来让调用处继续捕获错误。这样,在调用处使用.catch()方法时,将能够捕获到服务器响应错误或其他类型的错误。
请注意,上述代码仅为示例,实际应用中可能需要根据具体需求进行相应的修改和优化。