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