关于javascript: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 服务。你能够依据须要扩大和自定义这个服务，以满足你的我的项目需要。