ts 封装axios

当使用TypeScript封装Axios时，你可以创建一个专门的HTTP服务模块，用于管理所有的HTTP请求。下面是一个简单的示例，展示了如何使用TypeScript封装Axios：

首先，确保你已经安装了Axios和TypeScript。你可以使用npm或yarn来安装它们：

bash
npm install axios typescript --save
创建一个名为http.service.ts的文件，并添加以下代码：

typescript
import axios, { AxiosRequestConfig, AxiosResponse }     from 'axios';  

// 创建Axios实例

const instance = axios.create({  
  baseURL: 'https://api.example.com', // 设置基础URL  
  timeout: 5000, // 设置请求超时时间  
});  

// 定义请求拦截器

instance.interceptors.request.use(  
  (config: AxiosRequestConfig) => {  
    // 在发送请求之前做些什么  
    // 例如，添加请求头、身份验证等  
    return config;  
  },  
  (error) => {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
  }  
);  

// 定义响应拦截器

instance.interceptors.response.use(  
  (response: AxiosResponse) => {  
    // 对响应数据做点什么  
    // 例如，处理错误代码、解析JSON数据等  
    return response.data;  
  },  
  (error) => {  
    // 对响应错误做点什么  
    return Promise.reject(error);  
  }  
);  

// 导出Axios实例

    export default instance;

在上面的代码中，我们首先创建了一个Axios实例，并设置了基础URL和请求超时时间。然后，我们定义了请求拦截器和响应拦截器，用于在发送请求之前和接收响应之后执行一些操作。你可以根据自己的需求自定义这些拦截器的行为。

在需要使用HTTP请求的文件中，导入刚刚创建的http.service.ts文件，并使用它来发送请求。例如，在api.ts文件中：

typescript
import http from './http.service';  

// 定义一个获取用户列表的函数

  export const getUsers = async () => {  
    try {  
      const response = await http.get('/users');  
      return response;  
    } catch (error) {  
      console.error('Error fetching user list:',         error);  
      throw error;  
    }  
  };

在上面的代码中，我们导入了http实例，并使用它来发送一个GET请求到/users路径。你可以根据自己的API接口来修改路径和请求方法。

最后，在你的应用程序中使用api.ts文件中定义的函数来发送请求。例如，在组件中：

typescript
import { getUsers } from './api';  

// 在组件中调用getUsers函数  
async componentDidMount() {  
  try {  
    const users = await getUsers();  
    console.log('Users:', users);  
  } catch (error) {  
    console.error('Error fetching user list:', error);  
  }  
}

这样，你就成功地使用TypeScript封装了Axios，并在你的应用程序中使用了封装后的HTTP服务。你可以根据需要扩展和自定义这个服务，以满足你的项目需求。