如何封装ts版本的axios
时间: 2023-03-25 21:02:00 浏览: 68
可以使用npm安装axios和@types/axios,然后在项目中引入axios和axios的类型声明文件。然后,创建一个axios实例,并设置一些默认配置,例如baseURL、headers等。最后,可以使用该实例发送请求,例如get、post等。在ts中,可以使用泛型来指定响应数据的类型。
相关问题
ts 封装axios
在TypeScript中封装axios可以按照以下步骤进行:
1. 首先,导入axios库并创建axios实例。可以使用import语句导入axios,并使用axios.create()方法创建一个实例。在创建实例时,可以设置一些配置,比如基础路径、请求超时时间等。这样可以确保每次请求都使用相同的配置。
```typescript
import axios, { AxiosRequestConfig } from 'axios';
const instance = axios.create({
baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
timeout: 5000,
// 其他配置
});
```
2. 接下来,可以封装请求函数。可以创建一个函数,接受一个AxiosRequestConfig类型的参数,并返回一个Promise实例。在函数内部,使用创建的axios实例的request方法发送请求,并根据请求结果的状态来决定Promise实例的状态。
```typescript
type Response<T = any> = {
msg: string;
result: T;
};
export default <T>(config: AxiosRequestConfig) => {
return new Promise<Response<T>>((resolve, reject) => {
instance
.request<Response<T>>(config)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
});
};
```
这样,就完成了在TypeScript中封装axios的过程。通过这个封装,可以方便地发送请求,并且可以获得类型提示,提高代码的可维护性和可读性。
vue3 ts 封装axios
在Vue 3中使用TypeScript封装Axios,可以按照以下步骤进行操作:
1. 首先,安装`axios`和`@types/axios`依赖:
```bash
npm install axios @types/axios
```
2. 创建一个新的Axios实例并进行封装。在项目的根目录下创建一个`axios.ts`文件,并在其中编写以下代码:
```typescript
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
// 创建一个自定义的Axios实例
const instance: AxiosInstance = axios.create({
baseURL: 'http://api.example.com', // 根据你的实际情况设置baseURL
timeout: 5000, // 请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 在发送请求之前做些什么
// 比如添加token等
return config;
},
(error: any) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response: AxiosResponse) => {
// 对响应数据做些什么
return response.data;
},
(error: any) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
export default instance;
```
3. 将封装好的Axios实例导入到需要使用的组件中进行调用。例如,在一个`UserService.ts`文件中,你可以这样使用:
```typescript
import axios from '@/axios';
export function getUserInfo(userId: number) {
return axios.get(`/user/${userId}`);
}
export function updateUserProfile(userId: number, profile: any) {
return axios.put(`/user/${userId}`, profile);
}
// 其他接口请求方法...
```
现在,你就可以在你的Vue 3组件中使用这些封装好的Axios请求方法了:
```typescript
import { getUserInfo } from '@/services/UserService';
export default {
mounted() {
getUserInfo(123)
.then((response) => {
// 处理响应数据
})
.catch((error) => {
// 处理错误
});
},
};
```
通过这种方式,你可以更好地封装和管理Axios实例,并在整个项目中重复使用定义的请求方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)