async/await & Promise的再認(rèn)識(shí)

背景

在開(kāi)發(fā)微信小程序過(guò)程中，遇到如下需求：

需要等待wx.requestPayment的回調(diào)函數(shù)執(zhí)行完后再執(zhí)行后續(xù)代碼

這是因?yàn)樵谡{(diào)用wx.requestPayment之后，會(huì)彈出一個(gè)支付彈窗，如果此時(shí)點(diǎn)擊右上角的x，那么將會(huì)執(zhí)行wx.requestPayment的回調(diào)函數(shù)fail中的代碼。而由于wx.requestPayment的回調(diào)函數(shù)是異步執(zhí)行的，所以程序會(huì)繼續(xù)跑下去執(zhí)行后面的代碼。這會(huì)出現(xiàn)什么問(wèn)題呢？

async fabu(){
    const res = await wx.requestPayment({
      ...params,
      success: function (res) {
        console.log('Payment success');
        //...(假設(shè)這里是支付成功后的代碼)
      },
      fail: function (error) {
        console.log('Payment failed', error);
      }
    });
    //...(假設(shè)這里是支付成功后的代碼)
}

1.如果我把支付成功后的代碼寫到wx.requestPayment的后面，那么在我點(diǎn)擊了右上角的x后，程序會(huì)執(zhí)行后續(xù)的代碼，導(dǎo)致我明明沒(méi)有支付卻執(zhí)行了支付成功的代碼。

2.如果我把支付成功后的代碼寫到wx.requestPayment的回調(diào)函數(shù)（succes）里，那么會(huì)出現(xiàn)：在彈出彈窗等待用戶進(jìn)行支付操作之后，程序會(huì)繼續(xù)執(zhí)行wx.requestPayment后面的代碼的現(xiàn)象，這會(huì)導(dǎo)致用戶未完成支付操作，fabu()這個(gè)函數(shù)就已經(jīng)執(zhí)行完并返回結(jié)果了。

Solution

由于wx.requestPayment的回調(diào)函數(shù)是異步執(zhí)行的，而且微信開(kāi)發(fā)者工具不支持直接使用async/await等待回調(diào)函數(shù)的執(zhí)行完成，所以無(wú)法直接通過(guò)在wx.requestPayment前加上await來(lái)等待回調(diào)函數(shù)執(zhí)行完畢。

不過(guò)，可以使用Promise和resolve來(lái)手動(dòng)實(shí)現(xiàn)等待回調(diào)函數(shù)執(zhí)行完畢后再執(zhí)行后續(xù)代碼的效果。

async doPayment(params) {
    let that = this;
    try {
      const paymentResult = await new Promise((resolve, reject) => {
        wx.requestPayment({
          ...params,
          success: function (res) {
            console.log('Payment success');
            resolve(res); // 在成功回調(diào)函數(shù)中手動(dòng)觸發(fā)resolve，并傳遞回調(diào)數(shù)據(jù)
          },
          fail: function (error) {
            //如果不是耗時(shí)處理，處理支付失敗的情況可以寫在這
            console.log('Payment failed in', error);
            reject(error); // 在失敗回調(diào)函數(shù)中手動(dòng)觸發(fā)reject，并傳遞錯(cuò)誤信息
          }
        });
      });
      console.log('Continue with the next steps');
      // 在這里可以執(zhí)行支付成功后的代碼
    } catch (error) {
      //如果是耗時(shí)處理，處理支付失敗的情況可以寫在這
      console.log('Payment failed out', error);
    }
    console.log('這里是try catch塊后面的代碼');
  },

這里我們?cè)赿oPayment函數(shù)中使用await new Promise來(lái)等待wx.requestPayment的完成，并獲取支付結(jié)果。在成功情況下，輸出"Payment success"，然后可以執(zhí)行后續(xù)代碼。在失敗情況下，輸出"Payment failed"并打印錯(cuò)誤信息，可以在catch塊中處理支付失敗的情況。

這樣我們就能做到等待wx.requestPayment的回調(diào)函數(shù)執(zhí)行完后再執(zhí)行后續(xù)代碼，如圖所示：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-704198.html

到了這里，關(guān)于微信小程序等待wx.requestPayment的回調(diào)函數(shù)執(zhí)行完后再執(zhí)行后續(xù)代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！