微信小程序Promise詳解

一、Promise介紹

Promise是一種解決異步編程的方案，在ES6（ECMAScript 6）中被正式引入。Promise對象表示一個異步操作的最終完成（或失敗）及其結果值。它提供了一種更好的異步編程解決方案，避免了回調地獄（Callback Hell）。

二、Promise基本用法

Promise有三種狀態：Pending（進行中）、Fulfilled（已成功）和Rejected（已失敗）。初始狀態是Pending。狀態只能從Pending轉變為Fulfilled或Rejected。

  const promise = new Promise((resolve, reject) => {
    //異步操作
    if(異步操作成功){
        resolve(data)
    }else{
        reject(err)
    }
  })
 

Promise實例存在一個then方法，用於指定異步操作成功或失敗後的回調函數，返回一個新的Promise實例。

  promise.then((data) => {
    console.log(data)
  }).catch((err) => {
    console.log(err)
  })
 

三、小程序中的Promise

小程序提供了wx.Promise用於實現Promise。具體使用方式和原生JavaScript Promise一樣。

  const promise = new wx.Promise((resolve, reject) => {
    //異步操作
    if(異步操作成功){
        resolve(data)
    }else{
        reject(err)
    }
  })

  promise.then((data) => {
    console.log(data)
  }).catch((err) => {
    console.log(err)
  })
 

四、Promise.all

Promise.all方法將多個Promise實例包裝成一個新的Promise實例，等到所有的異步操作都完成，才會觸發then方法。

  const promise1 = new wx.Promise((resolve, reject) => {
    resolve('promise1');
  })
  const promise2 = new wx.Promise((resolve, reject) => {
    resolve('promise2');
  })

  wx.Promise.all([promise1, promise2]).then((result) => {
    console.log(result);
  }).catch((err) => {
    console.log(err);
  })
 

五、Promise.race

Promise.race方法同樣將多個Promise實例包裝成一個新的Promise實例，但是只要有一個實例率先改變狀態，新的Promise實例就立即改變狀態。

  const promise1 = new wx.Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'promise1');
  })
  const promise2 = new wx.Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'promise2');
  })

  wx.Promise.race([promise1, promise2]).then((result) => {
    console.log(result);
  }).catch((err) => {
    console.log(err);
  })
 

六、async/await

async/await是基於Promise實現的一種異步編程的新方法。async表示函數返回一個Promise對象，await表示等待Promise返回結果。

  async function demo() {
    try {
      const result = await new wx.Promise((resolve, reject) => {
        setTimeout(resolve, 1000, 'hello world');
      });
      console.log(result);
    } catch (err) {
      console.log(err);
    }
  }

  demo();
 

七、小結

通過對微信小程序Promise的詳細講解，我們可以看到Promise作為解決異步編程的方案，在小程序中的應用也是非常廣泛的。熟練掌握Promise並結合async/await的使用可以使我們編寫的小程序更加高效，代碼可維護性也更高。