uni-app 封装uni.request()接口

uni-app 封装uni.request()接口

此处通过Promise进行一步处理操作

首先第一步我们在封装之前先创建目录（此处我创建的是util，并创建子文件api.js）

请求接口内容

// 构造全局接口调用方法
const BASE_URL='http://localhost:8082'
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url: BASE_URL+options.url,
			method:options.method||'GET',
			data:options.data || {},
			success:(res)=>{
				if(res.data.status!==0){
					return uni.showToast({
						title:"获取数据失败"
					})
				}
				resolve(res)
			},
			fail:(res)=>{
				uni.showToast({
					title:"请求接口失败"
				})
				reject (err)
			}
		})
	})
}

然后在main.js文件内进行导入和全局挂载：

>// 封装接口调用方法 main.js文件内进行导入和全局挂载：
import {myRequest} from './util/api.js'
Vue.prototype.$myRuquest = myRequest

使用方法： 此处有封装前与封装后的代码

//获取轮播图接口数据
			async getSwipers(){
				//封装后获取接口
				const res= await this.$myRuquest({
					url:'/api/getlunbo'
				})
				this.swipers=res.data.message
				// console.log(res);
				//封装前获取接口
				/* console.log("获取轮播图数据");
				uni.request({
					url: 'http://localhost:8082/api/getlunbo',
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.status!==0){
							return uni.showToast({
								title:"获取数据失败"
							})
						}
						this.swiper=res.data.message;//此处为将获取的数据源塞进data中定义的数组以便后续for循环
					}
				}) */
			},

其他操作：
接下来我们就可以按照之前调用接口的方法使用了。此处我是在进入页面后就加载了一下

onLoad() {
			this.getSwipers();
},

感觉不错记得点赞哟！ 初次使用一是为了分享，二是为了留档保存
欢迎加微交流 dagonghun996