axios 网上转载抄袭

image.png

index.ts

import axios, { Axios } from "axios";
import responseInterceptor from "./interceptors/response";
import requestInterceptor from "./interceptors/request";

// 创建axios实例
const axiosInstance: Axios = axios.create({
  baseURL: 'http://127.0.0.1:8088',
  timeout: 10000,
  withCredentials: true,
});

// 请求拦截器
requestInterceptor(axiosInstance);
// 响应拦截器
responseInterceptor(axiosInstance);

export default axiosInstance;

response.ts

import { Axios } from "axios";

export default (axiosInstance: Axios): void => {
  // 相应拦截器
  axiosInstance.interceptors.response.use(
    (response) => {
      const { responseType } = response.config;
      // 不拦截blob
      if (responseType === "blob") {
        return response;
      }
      const { success, errMsg } = response.data;
      // 处理失败请求
      if (!success) {
        window.$message.error(errMsg);
        return Promise.reject(errMsg);
      }
      return response.data;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
};

request.ts

import { Axios } from "axios";

export default (axiosInstance: Axios): void => {
  axiosInstance.interceptors.request.use((config) => {
    return config;
  });
};

image.png

api api\bussniess\user

import axiosInstance from "@/plugins/axios"

const GETUSERINFOAPI = (data: any): Promise<any> =>
  axiosInstance.get('/blog/user', data);

export default{
  GETUSERINFOAPI, // 获取用户信息
}

调用

<template>
  <div>
    <h1 @click="userInfo">首页</h1>
    <n-button type="primary" @click="handleClick">按钮</n-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import { userApi } from "@/api";

const handleClick = () => {
  console.log(window)
  window.$message.warning('警告警告')
}

const userInfo = () => {
  console.log(userApi)
  userApi.GETUSERINFOAPI({}).then(() => {});
};
</script>

<style lang="scss" scoped></style>