vue3中ts封装axios

先下载axios

src目录下创建http文件，创建http.ts文件

import axios from "axios"
//引入 element -plus 中的ElMessage
import { ElMessage } from 'element-plus'

enum MSGS {
    "操作成功" = 200,
    "密码错误",
    "账号错误",
    "请求异常"
}
//创建HTTP实例
const $http = axios.create({
    url: "地址",
    timeout: 2000,
    headers: {
        "Content-Type": 'appliaction/json;charset=utf8'
    }
})

// 请求拦截
$http.interceptors.request.use(config => {
    config.headers = config.headers || {}
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token') || ''
    }
    return config
})

// 响应拦截
$http.interceptors.response.use(res => {
    let code: number = res.data.code
    if (code !== 200) {
        ElMessage.error(MSGS[code])
        return Promise.reject(res.data)
    }
}, error => {
    console.log(error);
})

export default $http

同级目录下创建api.ts 引入http.ts

import $http from "./index";
interface loginData {
    username: String,
    password: String
}
export const login = (data: loginData) => $http({
    url: '地址半部分',
    data,
    method: "POST"
})