axios拦截器统一处理HTTP请求教程

"本文档主要介绍了如何使用axios的拦截器功能来统一处理所有的HTTP请求和响应。通过设置拦截器，可以在请求发送前和响应接收后执行特定的逻辑，例如添加自定义头部、错误处理等。" 在开发过程中，我们常常需要对HTTP请求进行统一的管理和优化，比如在每个请求中添加身份验证令牌或者处理全局的错误信息。axios提供了一个强大的特性——拦截器（interceptors），让我们能够方便地实现这些需求。 **HTTP请求拦截器** 请求拦截器是在实际发送HTTP请求之前运行的，可以用来做以下操作： 1. **添加请求头**：例如在每个请求中加入`X-Token`，用于身份验证。 2. **修改请求配置**：根据业务需求调整请求参数。 3. **预处理数据**：如对请求体进行序列化处理。 4. **错误处理**：在请求失败前进行一些错误检查，或者提供备用策略。 示例代码： ```javascript axios.interceptors.request.use( function(config) { // 在这里可以获取到请求配置，并进行修改 if (store.getters.userToken) { config.headers['X-Token'] = store.getters.userToken; config.headers['User-Type'] = store.getters.userType; } return config; // 返回修改后的配置或直接返回config }, function(error) { // 请求错误处理，例如提示用户网络问题 return Promise.reject(error); } ); ``` 在这个例子中，如果存在用户令牌，就会被添加到请求头中。 **HTTP响应拦截器** 响应拦截器则是在服务器返回响应后，但在调用`.then()`或`.catch()`之前执行的，常用于以下情况： 1. **处理响应数据**：统一转换数据格式，如将所有返回的数据封装为特定对象。 2. **错误重试**：根据响应状态码决定是否重新发送请求。 3. **全局错误处理**：捕获所有未被`.catch()`处理的错误。 响应拦截器的使用方式类似： ```javascript axios.interceptors.response.use( function(response) { // 对响应数据做点什么，例如检查状态码 if (response.status === 200) { // 成功处理 } else { // 错误处理 } return response; }, function(error) { // 响应错误处理，例如提示用户请求失败 return Promise.reject(error); } ); ``` **移除拦截器** 如果需要移除已添加的拦截器，可以使用`axios.interceptors.request.eject`或`axios.interceptors.response.eject`方法： ```javascript var myInterceptor = axios.interceptors.request.use(function() {/*...*/}); axios.interceptors.request.eject(myInterceptor); ``` 这样，`myInterceptor`就从请求拦截器链中被移除了。 总结来说，axios的拦截器机制使得我们可以优雅地管理HTTP请求和响应，实现全局的逻辑处理，提升代码的可维护性和一致性。在实际项目中，合理利用拦截器能够大大提高开发效率并减少重复代码。