vue+ts下对axios的封装实现

在Vue.js和TypeScript的开发环境中，我们常常需要对第三方库如axios进行封装，以便更好地管理和定制网络请求。本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 确保你已经安装了axios。在终端中运行以下命令来安装它： ```bash npm install axios -D ``` 接下来，我们将创建一个名为`http.ts`的文件，用于封装axios实例。这个文件将包含基础的HTTP请求配置和逻辑。同时，为了组织代码，我们可以创建一个单独的`interceptors.ts`文件来处理拦截器的逻辑。当然，如果你更喜欢简洁，也可以选择将拦截器的代码直接放入`http.ts`。 在`interceptors.ts`文件中，我们需要导入axios和可能用到的其他库，例如消息提示组件（在这里使用的是Ant Design Vue的`message`）： ```typescript import axios from 'axios'; import { message } from 'ant-design-vue'; ``` 接下来，定义一个名为`Interceptors`的类，该类将包含axios实例和初始化拦截器的方法： ```typescript export class Interceptors { public instance: any; constructor() { // 创建axios实例 this.instance = axios.create({ timeout: 1000 * 12, // 设置超时时间为12秒 }); // 初始化拦截器 this.initInterceptors(); } // 获取初始化好的axios实例 public getInterceptors() { return this.instance; } // 初始化拦截器 public initInterceptors() { // 设置POST请求的Content-Type this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 请求拦截器 this.instance.interceptors.request.use( (config) => { // 在这里添加与请求相关的处理，例如检查和设置token // ... return config; }, (error) => { console.log(error); } ); // 响应拦截器 this.instance.interceptors.response.use( (res) => { // 在这里处理成功的响应，例如更新或检查token // ... return res; }, (error) => { // 处理错误响应，例如显示错误消息 console.error('Error in response:', error); message.error('网络请求出现问题，请稍后重试'); return Promise.reject(error); } ); } } ``` 现在，在`http.ts`文件中，你可以导入`Interceptors`类，并创建一个实例，然后通过`getInterceptors`方法获取封装后的axios实例： ```typescript import { Interceptors } from './interceptors'; export const http = new Interceptors().getInterceptors(); ``` 这样，你就完成了axios的基本封装。现在，你可以在Vue组件或其他地方导入`http`对象来发起HTTP请求，同时享受由拦截器带来的便利，如自动处理token、异常提示等。 例如，发起一个GET请求： ```typescript import { http } from './http'; async function fetchData() { try { const response = await http.get('/api/data'); console.log(response.data); } catch (err) { console.error('Error fetching data:', err); } } fetchData(); ``` 这个封装方法允许你在全局范围内对axios进行统一管理，减少重复代码，并确保所有请求遵循一致的规则。同时，拦截器提供了一种优雅的方式处理如身份验证、错误处理等常见任务，提高了代码的可维护性和可读性。