标签：拦截响应

在基于Promise的HTTP客户端中，axios是一个广泛使用的库，它提供了一种简洁明了的方式来发送异步HTTP请求到REST端点，在使用axios时，我们经常需要对请求和响应进行拦截，以便于统一处理一些逻辑，例如认证失效、接口报错、请求重定向等，以下将详细讨论如何使用axios的响应拦截器来处理报错。,我们需要设置axios的响应拦截器，响应拦截器允许我们在请求得到响应后，对响应数据进行处理或修改，这非常实用，因为我们可以在这里检查HTTP状态码，并根据需要处理业务逻辑错误。,在上述代码中，我们首先创建了一个axios实例并为其添加了响应拦截器，拦截器由两部分组成：一个是处理正常响应的回调，另一个是处理异常的回调。,当接口返回的业务状态码不是我们预定的成功状态码时，我们会在第一个回调函数中处理这种情况，通常，后端服务会返回一个包含业务错误信息的JSON对象，我们会弹出错误信息，并调用 Promise.reject()来拒绝这个Promise，使得后续的 .then()不会被执行，而是直接跳转到 .catch()中去。,对于异常处理，我们检查 error.response是否存在来区分错误类型，如果 error.response存在，说明请求已发出且服务器有响应，但状态码不是2xx，这时我们可以根据服务器返回的错误信息进行提示，如果不存在，可能是请求发出前发生了错误，例如网络问题，或者是请求配置不正确。,特别需要注意的是，当token失效时，可能会在一次用户操作中引发多个请求失败，导致多次弹出错误提示，这会影响用户体验，为了解决这个问题，我们可以设置一个全局变量来控制提示只弹出一次。,通过上述机制，我们不仅统一了错误处理的方式，而且避免了因为重复错误导致的频繁提示，提升了用户界面的友好性。,为了避免在拦截器中由于编程疏忽导致的问题，比如在响应拦截器中忘记返回response对象，我们需要仔细检查拦截器的逻辑，确保任何情况下， use函数中的两个回调都正确返回了Promise对象。,使用axios的拦截器可以有效地对HTTP请求进行监控和管理，它为我们提供了一个强大的机制来处理API调用过程中可能出现的各种情况，从而增强应用的可维护性和用户体验。,,// 创建axios实例 const service = axios.create({ // axios 配置项 }); // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 const res = response.data; // 这里可以根据后端接口返回数据的结构进行判断 if (res.code !== 200) { // 业务逻辑错误处理 // 可以根据实际情况，做弹出提示，或者其他的错误处理逻辑 Message({ message: res.message || ‘Error’, type: ‘error’, duration: 5 * 1000 }); // 如果是业务错误，我们返回一个Promise.reject，这样可以在后续的.catch中捕获 return Promise.reject(new Error(res.message || ‘Error’)); } else { // 业务成功，返回response对象 return response; } }, error => { // 对响应错误做点什么 if (error.response) { // 请求已发出，但服务器响应的状态码不在2xx的范围 const res = error.response.data; Message({ message: res.message || ‘Error’, type: ‘error’, duration: 5 * 1000 }); } else if (error.request) { // 请求已经发出了，但是没有收到响应 Message({ message: ‘Network Error’, type: ‘error’, duration: 5 * 1000 }); } else { // 发送请求时出了点问题 Message({ message: error.message ||...