【从零开始搭建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;
}