一、背景
在开发项目中，需要经常与后端服务器进行交互；为了提高开发效率和代码维护性，以及降低重复性代码，便对网络请求进行封装统一管理。
二、创建环境文件
2.1、根目录新建utils文件夹，utils文件夹内新建env.js文件
2.2、env.js文件
let BASE_URL
//开发环境中
if (process.env.NODE_ENV === 'development') {// 开发环境BASE_URL = 'http://xxxx' //开发环境请求地址
} else {// 生产环境BASE_URL = 'https://xxxx' //生成环境请求地址
}export default BASE_URL⭐⭐说明：
创建的是vue3项目，与vue2项目的区别在于页面中调用api的写法不同，具体以需求为主
以下是两种uniapp请求的封装，分别为👇👇：
①uni.request 请求封装，②uniapp+uview-plus 请求封装
✍✍两种请求封装，根据需求二选一，不能同时使用
三、uni.request 请求封装（方法一）
3.1、官网地址👉：uni-app官网">uni.request(OBJECT) | uni-app官网
3.2、在utils文件夹下创建request.js文件，用于封装请求
备注：在发送uni.request请求之前，可以执行拦截操作；在uni.request的success中接收响应后处理响应数据
import BASE_URL from '@/env.js' //引入接口共用地址
import useUserStore from '@/store/user.js' //引入仓库，使用的是pinia
export const request = (options) => {return new Promise((resolve, reject) => {// 获取用户令牌let token = useUserStore().token// 设置请求头const header = {'Content-Type': 'application/json',Authorization: `Bearer ${token}`,...options.header // 可以传入额外的请求头参数}// ⭐在发送请求之前执行拦截操作uni.request({url: BASE_URL + options.url, //接收请求的APImethod: options.method || 'GET', //接收请求的方式,如果不传默认为GETdata: options.data || {}, //接收请求的data,不传默认为空header: header, //接收请求的headersuccess(res) {// ⭐在这里处理接收到响应后处理响应数据if (res.data.code != 0) {// 提示重新登录uni.$showMsg('请登录')useUserStore().userLogout()setTimeout(() => {uni.switchTab({url: '/pages/my/my'})}, 1000)}resolve(res.data) // 使用resolve将数据传递出去},fail: (err) => {reject(err)}})})
}3.3、在utils文件夹下创建api.js文件
api.js文件是用来调用封装好的uni.request，统一管理请求接口，在后续开发中只需要调用api.js文件即可
import {request} from './request.js' //导入封装好的js文件//登录 post请求
export const login = (data)=>{return request({url:'wx-api/login',method:'post',data:data})
}//用户信息 get请求
export const info = ()=>{return request({url:'/wx-api/me/info',})
}3.4、页面调用api文件使用
<script setup>
import { login } from '@/utils/api.js'
//点击登录按钮操作
const getToken = async () => {let res = await login()console.log('res', res)
}
</script>四、uniapp+uview-plus 请求封装（方法二）
4.1、前提条件：项目中引入uview-plus
具体操作可查看之前写的文章👉：uniapp使用 uview-plus 和 Pinia（vue3项目）_翻滚的露西的博客-CSDN博客
uview-plus官网地址👉： Http请求 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
4.2、 在utils文件夹下创建request.js文件，用于封装请求
在此可以书写请求和响应拦截
import BASE_URL from '@/env.js' //引入接口共用地址
import useUserStore from '@/store/user.js' //引入仓库，使用的是pinia
export const setRequestConfig = () => {uni.$u.http.setConfig((config) => {/* config 为默认全局配置*/config.baseURL = BASE_URLreturn config})// 请求拦截uni.$u.http.interceptors.request.use((config) => {let token = useUserStore().tokenif (token) {config.header.Authorization = `Bearer ${token}`}return config},(error) => {return Promise.reject(error)})// 响应拦截uni.$u.http.interceptors.response.use((response) => {if (response.data.code == 401) {// 提示重新登录uni.$showMsg('请登录')useUserStore().userLogout()setTimeout(() => {uni.switchTab({url: '/pages/my/my'})}, 1000)}return response},(error) => {return Promise.reject(error)})
}4.3、在utils文件夹下创建api.js文件
api.js文件是用来调用uview-plus封装好的请求，统一管理请求接口，在后续开发中只需要调用api.js文件即可
import { setRequestConfig } from './request.js';// 调用setRequestConfig函数进行请求配置
setRequestConfig();
const http = uni.$u.http
// 发起登录请求 post请求
export const requestLogin = (data) => http.post('/wx-api/login', data);
//获取个人中心信息 get请求
export const requestUserInfo = () => http.get('/wx-api/me/info')4.4、页面调用api文件使用
<script setup>
import { requestLogin } from '@/utils/api.js'
//点击登录按钮操作
const getToken = async () => {let res = await requestLogin()console.log('res', res)
}
</script>
