微信小程序使用Promise簡(jiǎn)化回調(diào)

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:20:09

微信小程序使用Promise簡(jiǎn)化回調(diào)

微信小程序使用Promise簡(jiǎn)化回調(diào):Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序使用Promise簡(jiǎn)化回調(diào):Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(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ì)象

在項(xiàng)目中，會(huì)出現(xiàn)各種異步操作，如果一個(gè)異步操作的回調(diào)里還有異步操作，就會(huì)出現(xiàn)回調(diào)金字塔。

比如下面這種

// 模擬獲取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)
})