使用ts封装axios
时间: 2023-11-04 08:42:53 浏览: 38
Sure, 封装 Axios 可以让我们更好地管理 API 调用,避免大量重复的代码,提高应用程序的可维护性和可扩展性。而 TypeScript 可以帮助我们在代码编写和维护过程中,避免一些 Bug,增加代码的可读性和可维护性。因此,将 Axios 和 TypeScript 结合在一起封装,是一种非常好的编码实践。
相关问题
vue3中使用ts封装axios给出代码
当然,我非常乐意回答你的问题!以下是一个使用 TypeScript 封装 Axios 的 Vue3 代码示例:
```
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { reactive } from 'vue';
interface ResponseData<T = any> {
code: number;
message: string;
data: T;
}
export interface Result<T = any> {
loading: boolean;
error: string;
response: ResponseData<T> | null;
fetchData: (axiosConfig?: AxiosRequestConfig) => Promise<void>;
}
export function useAxios<T = any>(url: string, axiosConfig: AxiosRequestConfig = {}): Result<T> {
const state = reactive({
loading: false,
error: '',
response: null,
fetchData: async (axiosConfig?: AxiosRequestConfig) => {
state.loading = true;
try {
const response: AxiosResponse<ResponseData<T>> = await axios.request({
url,
...axiosConfig,
});
state.response = response.data;
} catch (error) {
state.error = error.message;
} finally {
state.loading = false;
}
},
});
state.fetchData(axiosConfig);
return state;
}
```
希望这个代码示例可以帮到你!
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的过程。通过这个封装,可以方便地发送请求,并且可以获得类型提示,提高代码的可维护性和可读性。