使用Axios结合Typescript二次封装完整详细场景使用案例
作者：夲奋亻Jay
本文详细介绍了如何使用TypeScript对Axios进行二次封装,以提高HTTP请求的统一管理和可维护性,通过创建Axios实例、封装请求和响应处理、错误处理以及创建特定的API服务,可以实现更加一致和方便的API调用,需要的朋友可以参考下
前言
Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。
以下是一个使用 TypeScript 进行 Axios 二次封装的详细场景使用案例：
1. 创建 Axios 实例
首先，创建一个 Axios 实例，并配置通用参数。
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000, // 请求超时时间
headers: {'Content-Type': 'application/json'}
});
export default instance;
2. 统一请求处理
封装请求方法，包括统一的请求前缀、头部处理等。
// http.ts
import axios from './path/to/axiosInstance';
// 添加一个通用的请求前缀
function request(url: string, config?: AxiosRequestConfig) {
const fullPath = `/api/${url}`;
// 可以在这里添加通用的 header 或其他配置
const defaultConfig = {
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
};
return axios({
url: fullPath,
...config,
...defaultConfig
});
}
export default request;
3. 响应拦截器
处理响应拦截器，统一处理响应数据格式。
// http.ts (继续上面的代码)
import axios, { AxiosInstance } from 'axios';
// 响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做点什么
return response.data;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance;
4. 错误处理
统一处理 HTTP 请求错误。
// http.ts (继续上面的代码)
import { AxiosError } from 'axios';
// 使用封装的请求函数
function handleError(error: AxiosError) {
if (error.response) {
// 请求已发出，服务器响应了状态码 2xx 之外的其他状态
console.error(error.response.data);
console.error(error.response.status);
console.error(error.response.headers);
} else if (error.request) {
// 请求已发出但没有收到响应
console.error(error.request);
} else {
// 发生了触发请求错误的问题
console.error('Error', error.message);
}
return Promise.reject(error);
}
export { handleError };
5. 使用封装的 HTTP 客户端
在组件或其他服务中使用封装的 HTTP 客户端进行请求。
// SomeComponent.vue
import http from './path/to/http';
import { handleError } from './path/to/http';
export default {
async created() {
try {
const response = await http('/user', {
method: 'get'
});
this.user = response.data;
} catch (error) {
handleError(error);
}
}
};
6. 封装特定的 API 请求
创建特定的 API 服务文件，如用户服务。
// api/user.ts
import http from '../http';
export const getUser = (userId: string) => http(`/users/${userId}`);
export const updateUser = (userId: string, userData: object) => http(`/users/${userId}`, {
method: 'put',
data: userData
});
// 其他 API 调用 ...
7. 使用特定的 API 服务
在组件中使用特定的 API 服务。
// SomeComponent.vue
import { getUser, updateUser } from './api/user';
export default {
methods: {
async fetchUser() {
try {
const user = await getUser('123');
this.user = user;
} catch (error) {
handleError(error);
}
},
async saveUser() {
try {
await updateUser('123', { name: 'New Name' });
} catch (error) {
handleError(error);
}
}
}
};
通过上述步骤，你可以创建一个可维护性高、易于使用的 HTTP 客户端，它包括统一的配置、拦截器、错误处理和 API 调用封装。这使得在项目中进行 API 请求变得更加一致和方便。
总结
到此这篇关于使用Axios结合Typescript二次封装完整详细场景使用案例的文章就介绍到这了,更多相关Axios结合Typescript二次封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！