记录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默认只有两种环境:开发环境 和 生产环境。
但也可以自定义其他环境模式。
- 显示指定mode模式:在
package.json
配置命令,🌰【"test" : "vite --mode test"
】 - 在根目录创建对应的文件:🌰
.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官方教程