api接口请求封装--uni-app的“万金油”接口请求封装

1.前言。

正所谓"工欲善其事必先利其器",在vue-PC项目中,我们可以借助axios来封装对应的api接口请求(ps:axios的接口请求封装)。不过,如果是用uni-app开发小程序,那么又该如何借助uni-app自带的网络请求uni.request()来封装"万金油"的api接口请求呢?

2.认识uni.request。

  • 官方:uni.request

  • 在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单 ,换成大白话就是说:在uni-app中访问的网络接口请求域名必须要在你的微信/支付宝(你所要开发部署的小程序服务商)后台 中配置对应的域名白名单

  • uni.request()中特别注意的是请求方法必须是大写(比如:'GET','POST')等。

  • uni.request()的返回值会根据你的写法来返回requestTask对象 或者是封装后的Promise对象

3.认识uni.getAccountInfoSync()。

想在uni-app中封装"万金油"通用型接口api请求,还有一个很重要的点就是要借助uni.getAccountInfoSync()。官方解释是:获取当前帐号信息,可以返回小程序的Appid。如果使用了微信小程序的云端插件,还可以返回当前插件Appid、版本号。

4.封装步骤解析。

  1. 结构图:
  1. 新建api文件夹,再在其内新建config.js文件用于处理环境域名配置,代码如下。
js 复制代码
export default {
	//接口请求域名配置
	api: function() {
		let curVersion = uni.getAccountInfoSync().miniProgram.envVersion;
		switch (curVersion) {
			case "develop": //开发版
				return "https://sharebk.oss-cn-hangzhou.aliyuncs.com";
			case 'trial': //体验版
				return "http://xxx.xxx.xxx.xxx:xxx"
			case 'release': //正式版
				return "http://xxx.xxx.xxx.xxx:xxx"
			default: //其他,默认调用正式版
				return "http://xxx.xxx.xxx.xxx:xxx"
		}
	}
}
  1. 在api文件夹内新建request.js文件用于封装uni.request(),代码如下。
js 复制代码
import config from './config.js';

const request = (url = '', method = 'GET', data = {}, header = {   //这里这样封装是为了后续具体组件中使用时可以直接传参,需按此顺序传参;而不需要写url:xxx等键值对传参
	//具体的header和后端商同后再编写,这里以常见的token为例
	'token': uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: config.api() + url, //接口地址:前缀+方法中传入的地址
			method: method, //请求方法
			data: data, //传递参数
			header: header, //自定义头部,和后端商同后编写
			success: (res) => {
				console.log('request.js文件的通用接口请求封装返回的结果数据',res);
				//注:因为这里对请求成功的没有统一设置抛错提示,所以后续具体组件中使用接口请求的res除200(实际以后端同事定好的为准)成功外的其他code需要额外写抛错提示
				if (res.data.code == 'xxx') { //自定请求失败的情况,这里以常见的token失效或过期为例
					uni.removeStorageSync('token');
					uni.showModal({
						showCancel: false,
						title: '温馨提示',
						content: res.data.msg,
						success: function(result) {
							if (result.confirm) {
								// uni.reLaunch({
								// 	url: '/pages/login/index'    //这里需用绝对路径才可
								// });
							}
						}
					});
				}
				resolve(res.data) //成功
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败的msg;
			//注:因为这里对于请求失败的设置统一抛错提示了,所以后续具体组件中使用接口请求的catch中不需要再写抛错提示
			fail: (err) => {
				uni.showToast({
					title: "" + err.msg,
					icon: 'none'
				});
				reject(err)
			}
		})
	})
}

export default request;
  1. 在项目入口文件main.js 中注册全局通用请求。

  2. 具体组件中使用(这里以oss为例,实际开发换成服务端同事的接口即可)。

  3. 效果。

5.源码。

源码链接:GitHub代码 (如因网络等原因打不开GitHub,请移步 码云代码)。

6.结语。

以上就是在uni-app中封装通用api接口请求的全部过程,当然这里只展示了最基础的api封装,并未做过多的拦截处理等,读友可以根据自己的实际开发情况做请求拦截和响应处理。码文不易,大佬勿喷,欢迎三连。

相关推荐
万少1 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊3 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火3 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀7 小时前
html初学者第一天
前端·html
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码