vue3+ts+axios封装请求

结构介绍

1. http.ts

import myAxios from "@/api/index";
interface responseData<T> {
    code: number;
    data: T;
    msg: string;
}
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
const request = <T = unknown>(config: AxiosRequestConfig): Promise<responseData<T>> => {
    return new Promise((resolve, reject) => {
        myAxios(config).then((res: AxiosResponse) => resolve(res.data))
            .catch((err: { message: string }) => reject(err))
    })
}

export default request

2.index.ts

import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
import router from "@/router";
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { statusCode } from './type'


const myAxios: AxiosInstance = axios.create({
    baseURL: '/api',
    timeout: 5000
})

myAxios.interceptors.request.use((res: InternalAxiosRequestConfig): any => {
    // res.headers['X-Access-Token'] = localStorage.getItem('token') || ''
    NProgress.start() // 进度条
    return res
}, (error): object => {
    return Promise.reject(error);
});

myAxios.interceptors.response.use((response: AxiosResponse): any => {
    NProgress.done()
    if (response.data.code === 403) {


    } else if (response.data.code === 505) {
        router.replace('/login')
        // localStorage.clear()
    }
    return response.data;
}, (error): any => {
    NProgress.done()
    const response = Object.assign({}, error.response)
    response && ElMessage.error(statusCode[response.status] || '系统异常, 请检查网络或联系管理员！')
    return Promise.reject(error)
});
export default myAxios

3.type.ts

interface statusCode {
    [propName: number]: string
}
export const statusCode: statusCode = {
    200: '服务器成功返回请求的数据',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）',
    204: '删除数据成功',
    400: '请求错误(400)',
    401: '未授权，缺少令牌',
    403: '拒绝访问(403)',
    404: '请求出错(404)',
    408: '请求超时(408)',
    500: '服务器错误(500)',
    501: '服务未实现(501)',
    502: '网络错误(502)',
    503: '服务不可用(503)',
    504: '网络超时(504)'
}

4.login.ts

import request from '../index.ts'
import type { LoginUserInfoForm, loginResp } from '@/interfaces/userInfo.ts'
/**
 * @description: 用户登录
 * @params data
 * 
 * LoginUserInfoForm:入参格式
 * loginResp：反参格式
 * 
 */
export const Login = (data: LoginUserInfoForm): Promise<loginResp> => {
    return new Promise((resolve, reject)=>{
        request<loginResp>({
            url: '/admin/login', // mock接口
            method: 'post',
            data,
        })
        .then(res=>resolve(res.data))
        .catch(err=>reject(err))
    })
}

5.vue.config.js

    const data: loginResp = await Login(userInfo)
    console.log(data);

6.配置vue.config.ts

server: {
    proxy: {
        "/api": {
            target: 'http://yourUrl.com',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ""),
        },
    },
},

7.其他涉ts文件(@/interfaces/userInfo.ts)

export interface LoginUserInfoForm {
    username: string
    password: string
    code?: string
}
export interface loginResp{
    token: string
}