首页 > 技术文章 > uniapp:使用Promise简化回调

jiajia-hjj 2021-04-26 16:31 原文

uniapp:使用Promise简化回调

promisify.js

因为异步api都是success和fail的形式,所以封装方法:

export const promisify = (api) => {
	return (options, ...params) => {
		return new Promise((resolve, reject) => {
			api(Object.assign({}, options, {
				success: resolve,
				fail: reject
			}), ...params);
		});
	}
}

为简化之前

uni.getUserProfile({
    success: res => {
        console.log(res)
    },
    fail: res => {

    },
    complete:()=>{
        
    }
})

使用上面的promisify.js简化后:

import {promisify} from './promisify.js'
const getSystemInfo = promisify(uni.getSystemInfo)
getUserProfile({
    desc: "获取你的昵称、头像、地区及性别",
}).then((res)=>{
    console.log(res.userInfo)
}).catch((err)=>{
     console.log('拒绝授权')
}).finally(()=>{
    console.log('拒绝或授权都会执行')
})

因为uniapp中多很多少异步方法,这样一个一个转换不方便const getSystemInfo = promisify(uni.getSystemInfo)

因此批量转换(promisify.js)

export const promisify = (api) => {
	return (options, ...params) => {
		return new Promise((resolve, reject) => {
			api(Object.assign({}, options, {
				success: resolve,
				fail: reject
			}), ...params);
		});
	}
}
export const toAPromise = (...names) => { 
	return (names || [])
		.map(name => ({
			name,
			member: uni[name]
		}))
		.filter(t => typeof t.member === "function")
		.reduce((r, t) => {
			r[t.name] = promisify(uni[t.name]);
			return r;
		}, {});
}
export  const unip = toAPromise('getSystemInfo','getUserProfile','login','showToast');

使用

import {unip} from '@/common/js/promisify.js'
unip.getUserProfile({
    desc: "获取你的昵称、头像、地区及性别",
}).then((res) => {
    console.log(res.userInfo)
}).catch((err) => {
    unip.showToast({
        title: "拒绝了授权",
        icon: "none"
    })
}).finally(() => {
    console.log('拒绝或授权都会执行')
})		
  • 多个嵌套可用async/await

参考:
在微信小程序中使用 async/await

微信小程序:使用Promise简化回调

推荐阅读