Vue3+Vite 之 从0到1搭建系统 - Part 3

记录Vue3 + Vite 搭建系统的过程之Part 3：封装axios

前言

Axios 是基于promise的网络请求库，是 Vue 官方推荐的一个 HTTP 库。一般来说，在开发过程中我们会将其进行封装，以便于减少重复代码，方便调用。同时对一些请求结果进行统一处理。

配置Axios

安装

npm i axios

在src目录下创建utils目录，并新建request.js文件

引入

import axios from 'axios'

// 创建一个axios实例
const instance = axios.create({
    baseURL: 【your app baseURL】,
    timeout: 3000,
    headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})

拦截配置

• 设置请求拦截，做一些添加token、设置请求头、加密等操作。
• 设置响应拦截，对请求结果进行处理，判断是否请求成功，如果失败则对不同失败结果进行不同处理。

// 请求拦截
instance.interceptors.request.use(function (config) {  
    // 在发送请求之前做些什么  
    return config;  
}, (error) => {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
});

// 响应拦截
instance.interceptors.response.use(response => {  
    if (response.status === 200) {
        return response.data
    }
    return Promise.reject(response.data)  
}, (error) => {  
    const status = error.response.status
    switch (status) {
        case 401:
             // 用户没有权限
             break
        case 500:
             // 服务器发生错误
             break
        case 404:
             // Not Found
             break
        case 504:
             // 网关超时
             break
        case 400:
             // 请求有误
             break
    }
    return Promise.reject(error)
});

封装Post和Get

export function request(method='GET', url='', params={}) {
    return  new Promise((resolve, reject) => {
        let promise
        if (method.toUpperCase() === 'GET') {
            promise = instance({
                url,
                params
            })
        } else if (method.toUpperCase() === 'POST') {
            promise = instance({
                method,
                url,
                data: params
            })
        }
        
        promise.then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

封装取消请求

什么情况下需要用到取消请求呢？举个栗子：用户在请求还未完成时离开了当前页面或者执行了其他操作；取消重复请求等等。

axios取消请求在v0.22.0之后是使用 fetch API的 AbortController API 来取消请求。在此之前是使用 CancelToken API。

官方案例：

 const controller = new AbortController();
 
 axios.get('/foo/bar', {
    signal: controller.signal
 }).then(function(response) {
    //...
 });
 // 取消请求
 controller.abort();

封装

// 存放接口标识
const pendingMap = new Map()
// 生成唯一标识
const getPendingUrl = ({method, url}) => {
    return [method, url].join("&")
}
// 添加请求
const addPending = (config) => {
  const key = getPendingUrl(config)
  const controller = new AbortController()
  config.signal = controller.signal
  if (!pendingMap.has(key)) {
    pendingMap.set(key, controller)
  }
}
// 移除请求
const removePending = (config) => {
  console.log('remove')
  const key = getPendingUrl(config)
  if (pendingMap.has(key)) {
    const abortController = pendingMap.get(key)
    if (abortController) {
      abortController.abort(key)
    }
    pendingMap.delete(key)
  }
}

api请求🌰

// 引入 request
import { request } from '@/utils/request'

// api🌰
export const getUserInfo = (params) => {
    const url = '/getuserinfo'
    return request('GET', url, params)
}

环境变量

使用环境变量，是基于不同环境实现不同逻辑的。比如，在生产环境和开发环境将BASE_URL设置成不同的值，用来请求不同的环境的接口。

由于我们系统使用的是Vite，所以根据变量规则，需要以VITE_为前缀的变量才会暴露给经过vite处理的代码。

Vite自带环境变量

在vue2中，webpack做了处理，使浏览器可以直接识别node的process.env变量，实现浏览器识别环境变量的功能。

而vite中，浏览器是无法识别process.env的。

vite中，在一个特殊的 import.meta.env 对象上暴露环境变量。共有五种内建变量：

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境
• import.meta.env.SSR: {boolean} 应用是否运行在 server 上

但是，这些变量无法在vite.config中访问到。

Vite 环境

Vite默认只有两种环境：开发环境 和 生产环境。

但也可以自定义其他环境模式。

1. 显示指定mode模式：在package.json配置命令，🌰【 "test" : "vite --mode test"】
2. 在根目录创建对应的文件：🌰 .env.test文件

定义环境变量

在根目录下新建以下文件：

• .env：所有环境生效
• .env.local：所有环境生效，但会被git忽略
• .env.development：开发环境生效
• .env.production：生产环境生效

🌰：

// .env.development
VITE_BASEURL = "http://dev.baseurl"
VITE_SYSTEME = "DEV BlueWhale"

// 在 main.js中打印
console.log('VITE_BASEURL', import.meta.env.VITE_BASEURL) // http://dev.baseurl
console.log('VITE_SYSTEME', import.meta.env.VITE_SYSTEME) // DEV BlueWhale

如果.env文件太多，也可以将其统一存放在一个文件夹里，通过envDir配置修改。需要在vite.config文件里配置：

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

更多vite相关可见：vite官方教程