Vue3+TypeScript封装axios请求

一、request.ts

导入axios依赖

import axios,{AxiosRequestConfig} from 'axios'

1.设置baseURL和请求时间

const service = axios.create({
//使用.env.development文件中的VITE_APP_BASE_API路径
    baseURL:import.meta.env.VITE_APP_BASE_API, 
    timeout:1 * 60 * 1000
})

2.请求拦截器

AxiosRequestConfig中的内容

interface AxiosRequestConfig<D = any> {

url?: string;

method?: Method;

baseURL?: string;

transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];

transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];

headers?: AxiosRequestHeaders;

params?: any;

paramsSerializer?: (params: any) => string;

data?: D;

timeout?: number;

timeoutErrorMessage?: string;

withCredentials?: boolean;

adapter?: AxiosAdapter;

auth?: AxiosBasicCredentials;

responseType?: ResponseType;

xsrfCookieName?: string;

xsrfHeaderName?: string;

onUploadProgress?: (progressEvent: any) => void;

onDownloadProgress?: (progressEvent: any) => void;

maxContentLength?: number;

validateStatus?: ((status: number) => boolean) | null;

maxBodyLength?: number;

maxRedirects?: number;

socketPath?: string | null;

httpAgent?: any;

httpsAgent?: any;

proxy?: AxiosProxyConfig | false;

cancelToken?: CancelToken;

decompress?: boolean;

transitional?: TransitionalOptions;

signal?: AbortSignal;

insecureHTTPParser?: boolean;

}

service.interceptors.request.use(
    async (config:AxiosRequestConfig|any)=>{
        //获取到登陆成功后存入localstorage/sessionstorage中token
        const Token = localStorage.getItem('token')
        if(config.headers){
            //把获取到的token赋值到请求头中
            Token ? config.headers['Token'] = Token : ''
        }
        return config
    },
    //请求错误返回的信息
    error => {
        console.log(error)
        Promise.reject(error)
      }
)

3.响应拦截器

service.interceptors.response.use(
    //可在此为返回的数据做处理
    response => response,
    error => {
        const res = error.response
        if (res !== undefined) {
        //如果存在错误的结果则做一下操作
            switch (res.status) {
            //表示身份信息失效
              case 401:
                localStorage.clear()
                window.location.href = '/login'
                break
            }
          }
        return Promise.reject(error)
    }
)

二、http.ts

1.消息提示封装

函数内传入返回结果、是否提示消息、loading、成功返回方法、失败返回方法

function notifyUser(response: AxiosResponse, isMsg: boolean, loading: any, resolve: (res: AxiosResponse) => void, reject: (res: AxiosResponse) => void) {
    loading.close()
    //默认code 10000为成功，其他状态为失败
    if (response.data.code === 10000) {
        resolve(response.data)
    } else {
    //是否需要错误的消息提醒、针对无需提醒请求
        if (isMsg) {
            ElMessage.error(response.data.message)
        }
        reject(response.data)
    }
}

2.post请求封装

所有请求的封装都大同小异，列举post请求

函数接受url、请求参数、pageNum、pageSize、是否消息提醒(默认为true)、请求头信息

const postData = (url: string, postData: any,pageNum?: number, pageSize?: number, isMsg: boolean = true,headers?: any): Promise<AxiosResponse> => new Promise((resolve, reject) => {
    //请求时创建全局loading
    const loading = ElLoading.service({
        lock: true,
        background: 'rgba(0, 0, 0, 0.7)'
    });
    const config = {
        headers: { 'Content-Type': headers || 'application/json; charset = UTF-8' }
    }
    //默认的请求参数全部包裹再postDat对象中
    let param: Record<string, unknown> = { postData }
    if (pageNum && pageSize) { // 分页参数需要放在第一级
        param = {
            postData,
            pageNum,
            pageSize
        }
    }
    //发送请求、config中可包含的内容请求拦截器中提到的AxiosRequestConfig
    request.post(url,param,config).then((response: AxiosResponse) => {
        notifyUser(response, isMsg, loading, resolve, reject)
    }).catch((error: Record<string, unknown>) => {
        reject(error)
        loading.close()
    })
})

3.api-list创建

const UserAPI = {
    login: '/user/login',
    logout: '/user/logout',
    del: '/user/deleteUserInfo',
    list: '/user/getUserInfoByPage',
    AUUser: '/user/upsertUserInfo',
    resetPwd:'/user/resetPassword',
    uPwd:'/user/updatePassword'
}
const ....
cosnt ....
export {UserAPI,...,....}

4.方法函数调用

import {postData} from '@/api/http'
import {UserAPI} from '@/api/api-list'
//postData为封装的请求
postData(UserAPI.list,params).then(res=>{
        console.log(res);
        
})