基于vite+vue3+ts对接请求封装

一、request.ts文件

首先npm i axios

request.ts文件

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
import { ElMessage } from 'element-plus'

interface requestType {
  url: string
  params?: any
}
const handleCode = async (code: number, msg: string) => {
  switch (code) {
    case 401:
      ElMessage.error(msg || '登录失效')
      setTimeout(() => {
        console.log('登录失效')
      }, 1500)
      // 跳转登录
      break
    default:
      ElMessage.error(msg || `后端接口${code}异常`)
      break
  }
}

//创建axsio 赋给常量service
const service: AxiosInstance = axios.create({
  baseURL:import.meta.env.VITE_APP_BASE_URL,
   timeout:30000,
   headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  }
});
// 添加请求拦截器
service.interceptors.request.use(
   (config: any)=> {
    console.log(config,'config')
    return config;
  },
   (error:any)=> {
    // 对请求错误做些什么
    console.log(error,'error')
    return Promise.reject(error);
  }
);
// 添加响应拦截器
service.interceptors.response.use(
   (response: AxiosResponse)=> {
    //response参数是响应对象
    // 对响应数据做点什么
    const { data, config } = response
    return data;
  },
   (error:any)=> {
    const { response} = error
   
    if (error.response && error.response.data) {
      const { status, data } = response
      handleCode(status, data.msg)
     
    // 对响应错误做点什么
    return Promise.reject(error);
    }else {
      let { message } = error
      if (message === 'Network Error') {
        message = '后端接口连接异常'
      }
      if (message.includes('timeout')) {
        message = '后端接口请求超时'
      }
      if (message.includes('Request failed with status code')) {
        const code = message.substr(message.length - 3)
        message = '后端接口' + code + '异常'
      }
      message.error(message || `后端接口未知异常`)
      return Promise.reject(error);
    }
  }
);





/**
 * @description GET
 */
 const GET = ({url,params}: requestType) => {
  return service({
    url,
    method:"GET",
    params
  } as AxiosRequestConfig)
}

/**
 * @description POST
 */
 const POST = ({url,params}: requestType) => {
  return service({
    url,
    method:"POST",
    data:params
  } as AxiosRequestConfig)
}
/**
 * @description PUT
 */
 const PUT = ({url,params}: requestType) => {
  return service({
    url,
    method:"PUT",
    data:params
  } as AxiosRequestConfig)
}

/**
 * @description DELETE
 */
const DELETE = ({url,params}: requestType) => {
  return service({
    url,
    method: 'delete',
    data:params
  } as AxiosRequestConfig)
}

/**
 * @description PATCH
 */
const PATCH = ({url,params}: requestType) => {

  return new Promise((resolve, reject) => {
    service
      .put(url, params)
      .then((res: any) => {
        if (res && res.status == 200) {
          resolve(res)
        }
      })
      .catch((error: any) => {
        reject(error)
      })
  })
}
export { GET, POST, PUT, DELETE, PATCH }

二、在api文件下的接口页面调用

api/home.ts文件

import { AxiosResponse } from 'axios';
import {GET} from '@/utils/request';
export const getUserinfo = (params?:Object):Promise<AxiosResponse<any, any>>=>{
  return GET(
    {
      url:'/getinfo',
      params
    }
  )
}

三、创建.env.development文件与.env.production文件

.env.development文件

# .env.development

NODE_ENV = development

VITE_APP_BASEURL = 'development数据1'

VITE_APP_CLOUDKEY = 'development数据22'
VITE_APP_BASE_URL = '/api'

.env.production文件

# .env.production

NODE_ENV = production

VITE_APP_BASEURL = 'production-url'

VITE_APP_CLOUDKEY = '反正这就是对应环境的数据'

四、vite.config.ts文件

import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";

import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default ({ mode }) => {
    return defineConfig({
        plugins: [vue(),vueSetupExtend()],
        resolve: {
            alias: {
                // "@ip": resolve(__dirname, "src"), // 多项目要注意下
                // "@": resolve(__dirname, "src"), // 多项目要注意下
                "@": fileURLToPath(new URL("./src", import.meta.url)),
            },
            extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
        },

        esbuild: {},
        build: {
            target: "es2015", // 构建时的兼容目标选项，可以是ES版本/浏览器版本/esnext/modules ,详情看vite官网,默认modules
            // outDir:'dist', // 指定输出路径（相对于 项目根目录).
            // assetsDir:'assets', // 指定生成静态资源的存放路径（相对于 build.outDir）。
            sourcemap: false, //开发/测试用true，生产false
            chunkSizeWarningLimit: 500, // chunk 大小警告的限制。<> 单位KiB,1KiB是 1024 字节Byte,1KB是1000字节。
          },

        server: {
            host: true, // 设置为true，则局域网内部都能访问
            port: 3200,
            strictPort: true, //为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
            open: false,
            proxy: {
                "/api": {
                    target: "http://127.0.0.1:3000",
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ""),
                },
            },
        },
    });
};