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

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

前言

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

配置Axios

安装

css 复制代码
npm i axios

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

引入

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、设置请求头、加密等操作。
  • 设置响应拦截,对请求结果进行处理,判断是否请求成功,如果失败则对不同失败结果进行不同处理。
js 复制代码
// 请求拦截
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

js 复制代码
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)
        })
    })
}

api请求🌰

js 复制代码
// 引入 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:生产环境生效

🌰:

js 复制代码
// .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文件里配置:

js 复制代码
import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

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

相关推荐
菜鸟‍20 分钟前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
小光学长41 分钟前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
huangql5201 小时前
截图功能技术详解:从原理到实现的完整指南
前端·html5
长空任鸟飞_阿康1 小时前
Node.js 核心模块详解:fs 模块原理与应用
前端·人工智能·ai·node.js
这儿有一堆花2 小时前
网站链接重定向原理
前端
麦麦大数据2 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
cecyci2 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒2 小时前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
詩句☾⋆᭄南笙2 小时前
HTML的盒子模型
前端·html·盒子模型
落言2 小时前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构