微信小程序使用Promise簡化回調

來源：懂視網責編：小采時間：2020-11-27 22:20:09

微信小程序使用Promise簡化回調

微信小程序使用Promise簡化回調:Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（

推薦度：

點擊下載本文 文檔為doc格式

導讀微信小程序使用Promise簡化回調:Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。

了解什么是 Promise 對象

在項目中，會出現各種異步操作，如果一個異步操作的回調里還有異步操作，就會出現回調金字塔。

比如下面這種

// 模擬獲取code，然后將code傳給后臺，成功后獲取userinfo，再將userinfo傳給后臺
// 登錄
wx.login({
 success: res => {
 let code = res.code
 // 請求
 imitationPost({
 url: '/test/loginWithCode',
 data: {
 code
 },
 success: data => {
 // 獲取userInfo
 wx.getUserInfo({
 success: res => {
 let userInfo = res.userInfo
 // 請求
 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來進行簡化代碼

因為微信小程序異步api都是success和fail的形式，所有有人封裝了這樣一個方法:

promisify.js

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

先看最簡單的:

// 獲取系統信息
wx.getSystemInfo({
 success: res => {
 // success
 console.log(res)
 },
 fail: res => {

 }
})

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

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
 // success
 console.log(res)
}).catch(res=>{

})

getSystemInfo

可以看到簡化后的回調里少了一個縮進，并且回調函數從9行減少到了6行。

回調金字塔的簡化效果

那么再來看看最開始的那個回調金字塔

const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登錄
login().then(res => {
 let code = res.code
 // 請求
 pImitationPost({
 url: '/test/loginWithCode',
 data: {
 code
 },
 }).then(data => {
 // 獲取userInfo
 getUserInfo().then(res => {
 let userInfo = res.userInfo
 // 請求
 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)
})