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

相关推荐
别拿曾经看以后~22 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死25 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人36 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人37 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR42 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香44 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍