网站开发手册下载,网站开发 都包含什么语言,浙江昆仑建设集团网站,镇江网站排名优化价格目录
前言
一、axios中的常见类型
1. AxiosInstance
2. AxiosRequestConfig
3. AxiosResponse
4. AxiosError
二、axios封装步骤
三、封装后的完整代码
1. 基础封装
2. 高级封装 前言
为了实现统一的网络请求处理和管理#xff0c;在日常开发中我们常常封装 axios在日常开发中我们常常封装 axios来实现统一配置、设置请求拦截器和响应拦截器、错误处理等。
TypeScript可以给项目提供类型检查和类型推导axios请求回来的数据也会受其检查。本文将提供axios结合ts写法的封装步骤和代码。 一、axios中的常见类型
1. AxiosInstance
表示axios请求的配置选项包括URL、方法、头部、参数等。
2. AxiosRequestConfig
表示一个axios实例的类型可以用于创建自定义配置的axios实例。
3. AxiosResponse
表示axios响应的数据结构包括状态码、响应头和响应数据。
4. AxiosError
表示axios请求发生错误时的错误对象包括错误消息、请求配置和响应信息如果有。
注意如果没有跟类型ts也会自动推到成相应类型。可以不写但不能错写。 二、axios封装步骤
1. 安装依赖
在项目根目录下使用 npm 或 yarn 命令安装 axios 和 types/axios用于提供 axios 的类型定义文件
pnpm install axios types/axios2. 创建封装文件
在项目中创建一个新的文件例如 request.ts用于封装 axios。可以根据项目需求结构化地组织这些文件。文件名根据个人习惯来大都取 axios 、request 、http等。
3. 导入 axios
在 request.ts 文件中导入 axios 模块。
4. 添加默认配置
根据需要在请求方法中设置默认的请求头、超时时间、响应数据格式等配置项。
5. 定义返回的数据类型
根据后端返回的数据设置统一的请求结果接口。
6. 添加拦截器
如果需要使用拦截器可以在 api.ts 文件中定义请求拦截器和响应拦截器并注册到 axios 中。
7. 封装请求方法
根据项目需求定义请求方法例如 GET、POST、PUT、DELETE 等。可以使用泛型来指定请求和响应的数据类型增加类型安全性。
8. 导出方法/实例
在 request.ts 文件末尾将封装的请求方法进行导出。 三、封装后的完整代码
1. 基础封装
使用对象字面量方式创建一个单例的axios实例。
// 导入axios和所需的类型
import axios, { AxiosInstance, AxiosError, AxiosResponse, InternalAxiosRequestConfig } from axios// 默认配置
const service: AxiosInstance axios.create({baseURL: import.meta.env.VITE_API_BASE || / // 设置API的基本URL默认为根路径
})// 请求拦截器对请求配置进行一些处理或设置
service.interceptors.request.use((config: InternalAxiosRequestConfig) {return config},(error: AxiosError) {return Promise.reject(error)}
)// 响应拦截器对响应结果进行处理或判断
service.interceptors.response.use((response: AxiosResponse) {if (response.status 200) {return response.data}return Promise.reject() // 如果响应状态不是200则返回一个拒绝的Promise},(error: AxiosError) {return Promise.reject(error)}
)export default service // 导出封装好的axios实例// 定义结果接口Result
export interface ResultT unknown {message: stringcode: numberdata: T[key: string]: any // 其他任意属性
}export const http {// 发送GET请求的方法可指定数据类型T并返回一个Promise对象其值为ResultT类型getT any(url: string, data?: object): PromiseResultT {return service.getT, ResultT(url, data);},// 发送POST请求的方法同样可指定数据类型T并返回一个Promise对象postT any(url: string, data?: object): PromiseResultT {return service.postT, ResultT(url, data);},// 发送PUT请求的方法同样可指定数据类型T并返回一个Promise对象putT any(url: string, data?: object): PromiseResultT {return service.putT, ResultT(url, data);},// 发送DELETE请求的方法同样可指定数据类型T并返回一个Promise对象deleteT any(url: string): PromiseResultT {return service.deleteT, ResultT(url);},
};
2. 高级封装
相比基础封装高级封装通过类的方式来创建实例并将请求方法封装在类的原型上。
相比之下这种方法更加灵活可以创建多个不同配置的axios实例也可以在实例中添加其他自定义的方法和属性。此外高级封装还将请求方法统一封装在一个类中结构更加清晰易于维护和扩展。
// 先创建一个类给类添加1个属性 instance代表axios的实例 构造函数传递配置 config配置比如全局的baseURL timeout
import axios from axios;
import type {AxiosInstance,AxiosError,AxiosResponse,AxiosRequestConfig,
} from axios;
// interface ResultT any {
// data: T;
// success: boolean;
// }
class Request {// 限制创建的实例必须是axios的实例private instance: AxiosInstance;// 这个config是不能乱写的axios对创建的配置有限制的constructor(config: AxiosRequestConfig) {this.instance axios.create(config);
// 接下来配置axios实例身上的全局配置比如拦截器this.instance.interceptors.request.use((config: AxiosRequestConfig) {return config;},(error: AxiosError) {return Promise.reject(error);});
this.instance.interceptors.response.use((response: AxiosResponse) {return response.data;},(error: AxiosError) {return Promise.reject(error);});}
// 公共方法因为不知道返回值的类型fetchDataT(options: AxiosRequestConfig): PromiseT {// 将私有的instance上面发请求的操作封装到这个实例方法request中这个方法的返回值应该是一个promise对象return new Promise((resolve, reject) {this.instance.requestany, T(options).then((res) {resolve(res);}).catch((err) {reject(err);});});}
// 调用上面封装的实例方法request来实现get / post / delete / put 方法的快捷调用getT(options: AxiosRequestConfig): PromiseT {return this.fetchDataT({ ...options, method: GET });}
postT(options: AxiosRequestConfig): PromiseT {return this.fetchData({ ...options, method: POST });}
putT(options: AxiosRequestConfig): PromiseT {return this.fetchData({ ...options, method: PUT });}
deleteT(options: AxiosRequestConfig): PromiseT {return this.fetchData({ ...options, method: DELETE });}
}
// 到处新new出来的实例
export const http new Request({baseURL: https://mock.mengxuegu.com/mock/6323def2b4c53348ed2bc5d7/example,
});
