Vue+TS中axios的封装与拦截器实现

"本文主要介绍了如何在Vue.js与TypeScript环境下对axios库进行封装，以实现接口调用的规范化和统一管理，包括拦截器的设置，处理token和响应状态码。作者强调了对前端TS、Node.js等技术的熟悉作为前提，并提供了具体的步骤和示例代码。" 在Vue.js与TypeScript的项目中，尽管axios已经非常便利，但为了保持接口调用的一致性，通常需要创建一个全局的管理方法。这个过程包括设置请求和响应拦截器，以处理如token管理和状态码反馈等常见问题。以下是对axios进行封装的具体步骤： 1. **安装axios**: 首先，通过`npm install axios -D`命令在项目中安装axios库。 2. **创建http.ts和interceptors.ts文件**：将HTTP逻辑封装在http.ts文件中，而拦截器的逻辑放在interceptors.ts文件中。这样可以保持代码的整洁和模块化。 3. **初始化axios实例**：在interceptors.ts文件中，导入axios并创建一个axios实例，设置超时时间等配置。 4. **设置拦截器**： - **请求拦截器**：在请求发送前，可以检查本地是否存在token，并将其添加到请求头中。这有助于在用户登录状态下进行接口调用。 ```typescript this.instance.interceptors.request.use((config) => { // 添加token逻辑 }, (error) => { // 处理请求错误 }); ``` - **响应拦截器**：当服务器响应时，拦截器会处理响应数据，例如检查状态码，处理错误信息，或者刷新token等。 ```typescript this.instance.interceptors.response.use((response) => { // 处理成功响应 }, (error) => { // 处理响应错误 }); ``` 5. **导出axios实例**：在http.ts中，从interceptors.ts中获取初始化好的axios实例，以便在其他组件中使用。 6. **在Vue组件中使用封装后的axios**：在Vue组件中，通过导入http.ts中的axios实例，可以直接调用接口，而无需关心底层的拦截器逻辑。 这样的封装方式提高了代码的可维护性和一致性，同时也使得处理如身份验证、错误处理等复杂逻辑更加集中和便捷。在实际项目中，可以根据具体需求进一步扩展和优化这些拦截器，例如添加日志记录、错误重试机制等。