Uniapp中request的promise封装及快速调用

Posted 2022-01-06 帅气的黑桃J

简介

一层一层的用promise属实烦人，又去网上找了被人的封装方法，发现大多数都并不适合自己，因此笔者将uni.request封装了起来，可以更加合理调用。

快速上手

代码封装

首先，您需要为您的项目创建两个文件，如下图所示。

• API用于保存所有的请求
• request用于封装请求

• API.js

export default 
	get_device_info: 'API/getOpendoorInfo', 

• request.js

const baseURL = 'http://localhost:8080/'//请求服务器公共地址

//页面中想用.then()就必须是Prnmise实例
export default 
	
	request(options)
		
		const 
			api,
			url,
			data,			
		 = options;
		
		let httpDefaultOpts = 
			url: baseURL + url,
			method: 'POST',
			dataType: 'json',
		
		
		if (data && data !== '') 
			httpDefaultOpts['data'] = options.data
		  
		
		return new Promise((resolve,reject)=>//把调取的的接口给了一个Promise实例
			uni.request(httpDefaultOpts).then((res) => 
				console.log('[request info] ' + JSON.stringify(httpDefaultOpts))
				console.log('[response info] ' + JSON.stringify(res[1]))
				
				resolve(JSON.stringify(res[1]))	
				
			).catch(err=>console.log(err))
		).catch(err=>console.log(err))
	,
	//get方法
	get(options)
		options.method="get"
		return this.request(options)
	,
	//post方法
	post(options)
		options.method="post"
		return this.request(options)
	
	

• main.js

import request from '@/common/request.js'
import API from '@/common/API.js'
Vue.prototype.$api = API
Vue.prototype.$request=request

调用方式

this.$request.get(
	url: this.$api.get_device_info+"?recentOpenUserId=2"
).then(res=>
	//res为json字符串
	console.log('[info] res is :'+res)
	this.mydata = res
)

舒服了~