Vue3框架搭建2：axios+typescript封装

仓库地址：https://github.com/buguniao5213/LuArch（分支代码未上传，完整一系列后传一波，中途有需求可以再传）

1、安装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();