使用vite从头搭建一个vue3项目（四）使用axios封装request.js文件，并使用proxy解决跨域问题

axios 的二次封装有三个要点：

• 创建 axios 实例，axios.create()
• 创建请求拦截器，interceptors.request.use()
• 创建响应拦截器，interceptors.response.use()

一、创建request.js文件

安装 axios 插件，指令： npm i axios 。

在 src/utils 目录下创建 request.js 文件，并引入 axios。

import axios from "axios"

二、创建axios实例

import axios from "axios"

console.log(import.meta);
// 创建axios实例
const instance = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,  // 设置默认的 API 地址
  timeout: 5000,						   // 设置请求超时时间
  headers: { 'systemType': 'IOS' }         // 设置请求header，可以自定义属性
})

export default instance;

import.meta 是个什么东西？

import.meta 是一个 ES 模块（ESM）特性，它提供了有关当前模块的元数据。在 Vue 3 中，import.meta 可以用于访问当前 Vue 应用程序实例的上下文信息，如应用程序的基本 URL、环境变量等。

Vite 官网也说过：Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

三、创建请求、响应拦截器

在 src/utils 中创建 token 操作文件 auth.js。

const tokenKey = 'vite_token'; // 自定义tokenKey
// 获取token
export function getToken() {
  return sessionStorage.getItem(tokenKey);
}
// 设置token
export function setToken(token) {
  return sessionStorage.setItem(tokenKey, token);
}
// 删除token
export function removeToken() {
  return sessionStorage.clear();
}

拦截器代码逻辑（完整代码）：

import axios from "axios"
import { getToken } from "./auth";
import { ElMessage } from 'element-plus';

console.log(import.meta);
// 创建axios实例
const instance = axios.create({
  baseURL: import.meta.env.VITE_BASE_API, // 设置默认的 API 地址，url = baseURL + url（使用proxy代理时此处可不写）
  timeout: 5000,						  // 设置请求超时时间
  headers: { 'systemType': 'IOS' }        // 设置请求header，可以自定义属性
})

// 请求拦截器
instance.interceptors.request.use(
  // 请求配置（全局），一般在登录时后端返回token，此处设置token后，前端每次调取接口都会携带token
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.token = token;
    }
    return config;
  },
  // 请求错误
  (error) => {
    return Promise.reject(error)
  }
)
// 响应拦截器
instance.interceptors.response.use(
  // 响应数据，2xx 范围内的状态码都会触发该函数。
  (response) => {
    const { status, data } = response;
    if (status === 200) {
      const { code, message } = data;
      // 根据后端返回的自定义状态码 code 进行错误信息提示（根据具体需求确定是否需要书写）
      switch (code) {
        case 1001:
          ElMessage({ message: '登录信息已过期，请重新登录！', type: 'error' })
          return Promise.reject(data);
        case 1002:
          ElMessage({ message: '当前账号已在其它端登录，请重试！', type: 'error' })
          return Promise.reject(data);
        case 1003:
          ElMessage({ message: message || '未知错误', type: 'error' })
          return Promise.reject(data);
        default:
          return data;
      }
    }
  },
  // 响应错误，超出 2xx 范围的状态码都会触发该函数。
  (error) => {
    if (error.response) {
      // 请求已发送，收到响应，但状态码非 2xx ，根据 http 状态码来判断响应错误信息
      const { status, data } = error.response;
      if (status === 2001) {
        ElMessage({ message: '没查到对应数据！', type: 'error' })
      } else if (status === 2002) {
        ElMessage({ message: '服务器开小差了！', type: 'error' })
      } else {
        ElMessage({ message: data.message || '未知错误！', type: 'error' })
      }
    } else if (error.request) {
      // 请求已发送，未收到响应
      ElMessage({ message: error.message || '请求已发送，未收到响应信息！', type: 'error' })
    } else {
      // 其他错误
      ElMessage({ message: error.message, type: 'error' })
    }
    // 若简写，上面代码可省略，只写此一行
    return Promise.reject(error);
  }
)

export default instance;

四、使用 request.js，测试接口：https://api.uomg.com/api/rand.qinghua

1、调取接口代码书写

在 src/api/about 目录下创建 index.js 文件，引入request.js，创建一个请求函数。

import request from '@/utils/request';

// 获取随机搞笑语句
export function getMessage(params = {}) {
  return request({
    url: '/api/rand.qinghua',
    method: 'POST',
    data: params
  })
}

在 src/pages/about/index.vue 组件中使用：

<template>
  <div class="about">
    <h3>This is About page!</h3>
    <el-button type="default" @click="handleClick">切换内容</el-button>
    <h4>{{ message }}</h4>
  </div>
</template>
<script setup>
import { getMessage } from '@/api/about'

const message = ref("")
onMounted(() => {
  handleClick();
})
function handleClick() {
  getMessage().then(res => {
    const { content } = res;
    message.value = content;
  })
}
</script>
<style lang="less" scoped>
.about {
  h3 {
    color: grey;
  }
}
</style>

需要修改 .env.development 文件：

## 开发环境
VITE_MODE='development'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://api.uomg.com/'

因为 about 组件中使用了 Element Plus UI 组件库，所以还得安装一下：npm i element-plus，然后在 main.js 文件中全局引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import '@style/index.scss'
import '@style/index.less'

import App from './App.vue'
import router from "@/router"

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

如果想要按需引入 Element Plus 组件，首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。详情请参考：https://element-plus.org/zh-CN/guide/quickstart.html

2、注意（跨域问题）

因为测试的 API 地址协议为 https，而本地使用的是 http，所以会出现跨域问题：

这时候就必须使用代理 proxy了。而要使用 proxy 代理，则 request.js 文件中的 baseURL 配置项就不再需要了。

此处说明一下：

• 如果 axios 的 baseURL 配置的是绝对路径，例如 'http://192.168.1.32:8000/'，axios 会直接发送请求而不经过 server.proxy。
• 如果 axios 的 baseURL 配置的是相对路径，例如 '/api'，则可以正常使用 server.proxy 进行请求转发，不会存在跨域问题。

此处若配置 baseURL，则路径地址变成了 https://api.uomg.com/api/rand.qinghua 这样的绝对路径；而不配置 baseURL ，则为相对路径 /api/rand.qinghua。proxy匹配到了 '/api'，会使用配置的 target 选项拼接成完整路径：target + '/api/rand.qinghua' 进行请求。

当然，此处的配置还有其他方式，不做赘述。

const instance = axios.create({
  baseURL: '',  // 设置默认的 API 地址，url = baseURL + url
  timeout: 5000,                           // 设置请求超时时间
  headers: { 'systemType': 'IOS' }         // 设置请求header，可以自定义属性
})

vite.config.js 文件中的 proxy 配置也需要修改：

proxy: {
  '/api': {
    target: env.VITE_BASE_API,                      
    changeOrigin: true,                             
    // rewrite: (path) => path.replace(/^\/api/, ''),  // 此行注释
  },
}

因为 '/api' 是地址 https://api.uomg.com/api/rand.qinghua 中的成员，所以 rewrite 配置项不需要再将 '/api' 重写为 ''。

看效果：