uniapp 网络请求封装(uni.request 与 uView-Plus）

一、背景

在开发项目中，需要经常与后端服务器进行交互；为了提高开发效率和代码维护性，以及降低重复性代码，便对网络请求进行封装统一管理。

二、创建环境文件

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.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>