Vue3框架搭建2：axios+typescript封装
堆栈地点：https://github.com/buguniao5213/LuArch1、安装axios
npm install axios
2、创建文件
先创建一个文件夹：
├── src/
│ ├── api/
│ │ ├── index.ts/ #编写axios封装代码
│ │ └── example.ts/ #定义向后端服务器发送请求的模块`
├── publix/
│ ├── json/
│ │ └── example.json/ #模拟get接口获取到的数据`
3、导入申明
导入axios库和干系类型
import axios, { type AxiosInstance, type AxiosRequestConfig } from 'axios';
4、基础url定义
这个后面放到vite的缓建变量配置中（.env）
const BASE_URL = '/'
5、定义request类
要素如下：
export class Request {
private instance: AxiosInstance;
private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
public constructor() {
//...
}
public request() {
//...
}
public get() {
//...
}
//...
//...
}
a）、private instance：私有属性instance:Axios实例
b）、private baseConfig：根本配置，包罗基础URL和超时时间
c）、public constructor：构造函数
创建Axios实例，合并根本配置和传入配置
设置请求拦截器：可以添加token等认证信息
设置相应拦截器：处理相应数据，根据状态码决定返回数据或报错误信息
d）、请求方法设置：
request：通用请求方法。
get：GET请求方法。
post: POST 请求方法
put: PUT 请求方法
delete: DELETE 请求方法
完整代码如下：
index.ts：
export class Request {
private instance: AxiosInstance;
private baseConfig: AxiosRequestConfig = { baseURL: BASE_URL, timeout: 60000 };
public constructor(config: AxiosRequestConfig) {
this.instance = axios.create(Object.assign(this.baseConfig, config));
this.instance.interceptors.request.use(
(config: any) => {
// 配置处理逻辑
// const token = 'tokentoken';
return config;
},
(error: any) => {
return Promise.reject(error);
}
)
this.instance.interceptors.response.use(
(res: any) => {
if(res.data.code === 200) {
return res.data.data;
}else {
// 错误code处理
return "发生错误";
}
},
(error: any) => {
return Promise.reject(error);
}
)
}
public request<T = any>(config: AxiosRequestConfig): Promise<T> {
return this.instance.request(config);
}
public get<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.get(url, {params, ...config});
}
public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.post(url, data, config);
}
public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.put(url, data, config)
}
public delete<T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.delete(url, {params, ...config});
}
}
6、创建实例，并导出为Axios
export const Axios = new Request({
baseURL: BASE_URL,
});
7、使用
a）、封装一个HTTP请求
example.ts：
import { Axios } from '@/api'
export function HTLLOWORD() {
return Axios.get<any>('/json/example.json')
}
example.json：
{
"code": 200,
"data": "hello word"
}
b）、调用
import { HTLLOWORD } from '@/api/example'
const getTest = () => {
HTLLOWORD().then(res => {
console.log(res)
})
}
getTest();
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]