axios二次封装实践：接口管理与token验证

"本文主要介绍如何对axios进行二次封装，以适应前端项目中接口管理和调用的需求，并涉及了处理身份认证、环境切换、超时设置、跨域配置以及请求拦截器的应用，尤其在处理token验证方面提供了示例。" 在前端开发中，axios是一个常用的HTTP库，用于发起网络请求。为了提高代码复用性和统一接口调用规范，通常会对其进行二次封装。以下是对标题和描述中提到的知识点的详细解释： 1. **axios二次封装**：封装的目的在于将通用的请求逻辑集中处理，例如统一设置基础URL、处理请求错误、添加身份验证等，使代码更整洁，减少重复工作。在本例中，封装后的axios被存放在`http.js`文件中。 2. **状态码提示**：通过定义`unconnectedErr`函数，可以根据HTTP状态码给出相应的错误提示。如401表示未授权（身份认证过期），404表示未找到资源，500表示服务器内部错误，504表示网关超时，而其他未知状态码则提示请求失败。 3. **根据环境变量设置基础URL**：在不同的环境（生产、测试、开发）下，API接口的地址不同。通过判断`process.env.NODE_ENV`可以动态切换基础URL，使得在切换环境时无需手动修改配置。 4. **设置请求超时时间**：`axios.defaults.timeout`用于设置请求的最大等待时间，本例中设为10秒。当超过这个时间，请求仍未响应，将会抛出错误。 5. **设置CORS跨域允许携带资源凭证**：`axios.defaults.withCredentials`设为`true`，意味着在跨域请求时发送cookie，这对于需要身份验证的API非常重要。 6. **POST请求头设置**：为了指定POST请求的数据格式，通常需要修改`Content-Type`，这里设置为`application/x-www-form-urlencoded`，并使用`qs`库来序列化请求数据。 7. **请求拦截器**：使用`axios.interceptors.request.use`添加请求拦截器，可以在此处添加全局的请求前处理，如检查token是否有效，将token添加到请求头中。未提供的代码中可能包含类似以下的逻辑： ```javascript // 添加token验证 axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); ``` 这样，每个请求都会自动携带有效的token，除非用户未登录或token已过期。 以上就是对axios进行二次封装的基本步骤和常见配置，这样的封装不仅简化了接口调用，还提高了项目的可维护性。在实际项目中，还可以根据需求添加更多的功能，如响应拦截器（处理返回结果，如重定向、刷新token等）、错误处理、请求合并等。