vue3+ts axios封装及使用

http.ts文件

import axios, { Axios, AxiosResponse, AxiosRequestConfig } from "axios";


// 处理  类型“AxiosResponse”上不存在属性“errorinfo”。ts(2339) 关键一步。
declare module "axios" {
  interface AxiosResponse {//参数与res的字段相对应
    result: T;
    statuscode: number;
    reason: string
  }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
}

// 创建axios实例
const request = axios.create({
    baseURL: '',// 所有的请求地址前缀部分(没有后端请求不用写)
    timeout: 10000, // 请求超时时间(毫秒)
    withCredentials: true,// 异步请求携带cookie
    headers: {
    // 设置后端需要的传参类型
    'Content-Type': 'application/json'
    // 'token': x-auth-token',//一开始就要token
    // 'X-Requested-With': 'XMLHttpRequest',
    },
})
// request拦截器
request.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token
        // let token = localStorage.getItem("x-auth-token");
        // if (token) {
        //     config.headers = {"x-auth-token": token}
        // }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)
 
// response 拦截器
request.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data
    },
    error => {  
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default request

接口文件.ts

import instance from "./http";

export const List = (data: any) =>
instance.post("路径", data);

vue文件中的使用

const getdata = () => {
  state.value.metaModel.page = 1
  state.value.loading = true;
  metaModelList(state.value.metaModel).then((res) => {
    console.log(res);
    state.value.listData = res.result.result
    console.log(state.value.listData)
  });
}

代理vue.config.js

module.exports = {
  outputDir: "dist", //build输出目录
  assetsDir: "assets", //静态资源目录（js, css, img）
  lintOnSave: false, //是否开启eslint
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost",
    port: "8080",
    https: false, //是否使用https协议
    proxy: {
      "/api": {
        target: "", //API服务器的地址
        changeOrigin: true, // 虚拟的站点需要更管origin
        pathRewrite: {
          //重写路径
          "^/api": "/api",
        },
      },
    },
  },
};