您好,登錄后才能下訂單哦!
這篇文章給大家介紹如何在微信小程序中使用Promise,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn),ES6 將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn),統(tǒng)一了用法,原生提供了Promise對(duì)象。
所謂Promise,簡(jiǎn)單說(shuō)就是一個(gè)容器,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。從語(yǔ)法上說(shuō),Promise 是一個(gè)對(duì)象,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理。
了解什么是 Promise 對(duì)象
比如下面這種
// 模擬獲取code,然后將code傳給后臺(tái),成功后獲取userinfo,再將userinfo傳給后臺(tái) // 登錄 wx.login({ success: res => { let code = res.code // 請(qǐng)求 imitationPost({ url: '/test/loginWithCode', data: { code }, success: data => { // 獲取userInfo wx.getUserInfo({ success: res => { let userInfo = res.userInfo // 請(qǐng)求 imitationPost({ url: '/test/saveUserInfo', data: { userInfo }, success: data => { console.log(data) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) } }) }, fail: res => { console.log(res) } })
下面分析如何用Promise來(lái)進(jìn)行簡(jiǎn)化代碼
因?yàn)槲⑿判〕绦虍惒絘pi都是success和fail的形式,所有有人封裝了這樣一個(gè)方法:
promisify.js
module.exports = (api) => { return (options, ...params) => { return new Promise((resolve, reject) => { api(Object.assign({}, options, { success: resolve, fail: reject }), ...params); }); } }
先看最簡(jiǎn)單的:
// 獲取系統(tǒng)信息 wx.getSystemInfo({ success: res => { // success console.log(res) }, fail: res => { } })
使用上面的promisify.js簡(jiǎn)化后:
const promisify = require('./promisify') const getSystemInfo = promisify(wx.getSystemInfo) getSystemInfo().then(res=>{ // success console.log(res) }).catch(res=>{ })
getSystemInfo
可以看到簡(jiǎn)化后的回調(diào)里少了一個(gè)縮進(jìn),并且回調(diào)函數(shù)從9行減少到了6行。
回調(diào)金字塔的簡(jiǎn)化效果
那么再來(lái)看看最開(kāi)始的那個(gè)回調(diào)金字塔
const promisify = require('./promisify') const login = promisify(wx.login) const getSystemInfo = promisify(wx.getSystemInfo) // 登錄 login().then(res => { let code = res.code // 請(qǐng)求 pImitationPost({ url: '/test/loginWithCode', data: { code }, }).then(data => { // 獲取userInfo getUserInfo().then(res => { let userInfo = res.userInfo // 請(qǐng)求 pImitationPost({ url: '/test/saveUserInfo', data: { userInfo }, }).then(data => { console.log(data) }).catch(res => { console.log(res) }) }).catch(res => { console.log(res) }) }).catch(res => { console.log(res) }) }).catch(res => { console.log(res) })
關(guān)于如何在微信小程序中使用Promise就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。