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官方教程

相关推荐
霍先生的虚拟宇宙网络7 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
jessezappy28 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js