【从零开始搭建uniapp开发框架】（十）—— 异步化封装

框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame

异步的方法，如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据

异步的方法，且有返回对象，如果希望获取返回对象，必须至少传入一项 success、fail、complete 等 callback 参数

 

在common文件夹下新建  sju.async.js 文件

 

 

 

 

 

sju.async.js源码：

/**
 * 对uni提供的所有api进行代理封装,让方法调用支持Promise
 * 
 * uni.request({url:'url',data:data,success:'',fail:''})
 * 引入封装包
 * import uniAsync from '@/common/sju.async.js';
 * 通过调用方法1:
 * uniAsync.request({url:'url',data:data}).then(res=>{成功执行的代码})
 * 通过调用方法2:res是成功返回的数据
 * function的前边需要添加async关键字
 * let res = await uniAsync.request({url:'url',data:data});
 */
// 使用proxy转换为异步化的uni方法
const uniAsync = new Proxy({}, {
	// target要代理的目标,name目标的key
	get(target, name) {
		return (obj) => new Promise((resolve, reject) => {
			uni[name]({
				...obj,
				success: res => {
					console.info('-success')
					resolve(res)
				},
				fail: res => {
					console.info('-fail')
					reject(res)
				},
				complete:res =>{
					console.info('-complete')
				}
			})
		})
	}
})
export default uniAsync

 

main.js引入封装类代码：

import jsAsync from './common/async.js'

Vue.prototype.jsAsync = jsAsync;

 

 

封装方法调用：

import uniAsync from '@/common/sju.async.js'; //引用异步化封装方法
			
getInfo: async function(keyword) {
	//获取地址位置
	var data = {
		keyword:keyword
	}
	//获取地址位置
	let res = await uniAsync.request({
			url:'https://xxx.com/ws/place/v1/suggestion/?',
			dataType:'jsonp',
			data:data
	});
	var data = JSON.parse(res.data);
	var result = data;
	return result;
}