vue3版本+TS(typescript)+简单封装api 配置反向代理

最新推荐文章于 2025-06-23 23:47:41 发布

原创最新推荐文章于 2025-06-23 23:47:41 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #vue.js

vue 专栏收录该内容

80 篇文章

订阅专栏

本文展示了如何在Vue3项目中结合TypeScript和axios来封装API请求，包括创建axios实例、设置基础URL、添加请求和响应拦截器，以及处理不同错误代码。此外，还介绍了如何使用ElementPlus进行错误提示，并提供了在组件中调用API获取数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3版本+TS(typescript)+封装api

1、在src下新建一个 shared文件夹文件夹下新建一个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:process.env.VUE_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 = (data: requestType) => {
  return service.get(data.url, data.params)
}

/**
 * @description POST
 */
 const POST = (data: requestType) => {
  return service.post(data.url, data.params)
}
/**
 * @description PUT
 */
 const PUT = (data: requestType) => {
  return service.put(data.url, data.params)
}

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

/**
 * @description PATCH
 */
const PATCH = (data: requestType) => {

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

2 在src下新建一个api文件夹在api文件夹下新建一个ts文件 ts文件代码如下

//XXXX
import { GET, POST, PUT, DELETE } from '@/shared/request'
let URL = '/drone/drones/'
export function getDrone(params: any) {
  return GET({ url: URL, params: params })
}

3、在页面中写代码发请求

<template>
  <div class="home">
    5465465
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="无人机名称" />
      <el-table-column prop="contact_phone" label="联系人" />
      <el-table-column prop="max_height" label="联系电话" />
      <el-table-column prop="max_speed" label="最大飞行高度" />
      <el-table-column prop="life_time" label="续航时间" />
      <el-table-column prop="is_running" label="运行状态" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, createVNode, onMounted } from "vue";
import { ElMessage } from 'element-plus'
import { getDrone } from "@/api/base";//<*************************
const tableData = ref<any>([]);

async function getDroneData() {//<*************************
  let param = {
    page_index: 1,
    page_size: 20,
  };
  let res: any = await getDrone(param);
  if (res.code === 20000) {
      let arr = res?.data.list
      tableData.value = arr
    } else {
      ElMessage.error(res.msg)
    }
}
onMounted(() => {
  getDroneData();
});
</script>

4、新建.env.development 与.env.production
在这里插入图片描述
5、配置反向代理

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  publicPath: "./",
  outputDir: "dist", //打包文件名称
  transpileDependencies: true,
  devServer: {
    // port: 8080,
    proxy: {
      "/api": {
        target: "https://dev.XXXXXXXXXXXXX", //反向代理地址
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "XXXX";//系统标题
      return args;
    });
  },
});