微信小程序中Promise簡化回調的方法

# 微信小程序中Promise簡化回調的方法

## 引言

在微信小程序開發中，我們經常會遇到各種異步操作，如網絡請求、文件讀寫、數據存儲等。傳統的回調函數方式雖然能夠處理這些異步操作，但隨著業務邏輯的復雜化，回調嵌套（俗稱"回調地獄"）問題日益突出。Promise作為ES6中引入的異步編程解決方案，能夠有效解決這個問題。本文將詳細介紹如何在微信小程序中使用Promise來簡化異步回調。

## 一、回調函數的問題

### 1.1 回調地獄現象

在小程序開發中，典型的回調函數使用方式如下：

```javascript
wx.request({
  url: 'https://api.example.com/data',
  success: function(res) {
    wx.setStorage({
      key: 'data',
      data: res.data,
      success: function() {
        wx.showToast({
          title: '保存成功',
          success: function() {
            // 更多嵌套...
          }
        });
      }
    });
  },
  fail: function(err) {
    console.error(err);
  }
});

這種深度嵌套的代碼結構不僅難以閱讀和維護，而且錯誤處理也變得復雜。

1.2 錯誤處理分散

在回調模式中，錯誤處理通常分散在各個回調函數中，難以集中管理，容易遺漏某些錯誤情況。

二、Promise基礎

2.1 Promise簡介

Promise是JavaScript中用于處理異步操作的對象，它代表一個異步操作的最終完成（或失?。┘捌浣Y果值。

2.2 Promise的三種狀態

1. pending：初始狀態，既不是成功，也不是失敗
2. fulfilled：操作成功完成
3. rejected：操作失敗

2.3 基本用法

const promise = new Promise((resolve, reject) => {
  // 異步操作
  if (/* 操作成功 */) {
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(
  value => { /* 成功處理 */ },
  error => { /* 失敗處理 */ }
);

三、將小程序API Promise化

3.1 手動封裝示例

我們可以將小程序的API手動封裝成Promise形式：

function requestPromise(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: resolve,
      fail: reject
    });
  });
}

// 使用示例
requestPromise({
  url: 'https://api.example.com/data'
})
.then(res => {
  console.log(res.data);
})
.catch(err => {
  console.error(err);
});

3.2 通用封裝方法

我們可以創建一個通用函數來Promise化任何小程序API：

function promisify(fn) {
  return function(options = {}) {
    return new Promise((resolve, reject) => {
      fn({
        ...options,
        success: resolve,
        fail: reject
      });
    });
  };
}

// 使用示例
const wxRequest = promisify(wx.request);
const wxGetStorage = promisify(wx.getStorage);
const wxLogin = promisify(wx.login);

wxRequest({ url: 'https://api.example.com/data' })
  .then(/* ... */)
  .catch(/* ... */);

3.3 使用第三方庫

除了手動封裝，還可以使用一些成熟的第三方庫：

1. miniprogram-api-typings：微信官方提供的類型定義
2. weapp-promise：專門為小程序設計的Promise化工具

安裝使用示例：

npm install weapp-promise

import { promisifyAll } from 'weapp-promise';

promisifyAll(wx);

// 使用
wx.requestPromise({ url: '...' })
  .then(/* ... */)
  .catch(/* ... */);

四、Promise高級用法

4.1 Promise鏈式調用

Promise的then方法可以鏈式調用，有效解決回調地獄：

wxLogin()
  .then(res => wxRequest({ url: '/user/info', data: { code: res.code } }))
  .then(res => wxSetStorage({ key: 'userInfo', data: res.data }))
  .then(() => wxShowToast({ title: '登錄成功' }))
  .catch(err => {
    wxShowToast({ title: '登錄失敗', icon: 'none' });
    console.error(err);
  });

4.2 Promise.all處理并行請求

當需要同時發起多個請求并等待所有請求完成時：

Promise.all([
  wxRequest({ url: '/api/user' }),
  wxRequest({ url: '/api/products' }),
  wxRequest({ url: '/api/orders' })
])
.then(([userRes, productsRes, ordersRes]) => {
  // 所有請求都成功完成
  console.log(userRes, productsRes, ordersRes);
})
.catch(err => {
  // 任一請求失敗
  console.error(err);
});

4.3 Promise.race競速請求

獲取最先完成的請求結果：

Promise.race([
  wxRequest({ url: '/api/fast' }),
  wxRequest({ url: '/api/slow' })
])
.then(firstResult => {
  console.log('最先返回的結果:', firstResult);
});

五、async/await語法糖

5.1 基本用法

async/await是基于Promise的語法糖，使異步代碼看起來像同步代碼：

async function getUserInfo() {
  try {
    const loginRes = await wxLogin();
    const userRes = await wxRequest({
      url: '/user/info',
      data: { code: loginRes.code }
    });
    await wxSetStorage({ key: 'userInfo', data: userRes.data });
    await wxShowToast({ title: '操作成功' });
    return userRes.data;
  } catch (err) {
    await wxShowToast({ title: '操作失敗', icon: 'none' });
    throw err;
  }
}

5.2 注意事項

1. async函數總是返回Promise：即使函數內部返回的是非Promise值
2. 錯誤處理：必須使用try/catch捕獲await表達式的錯誤
3. 并行優化：避免不必要的串行await

優化并行示例：

async function loadData() {
  // 錯誤的串行方式
  // const a = await getA();
  // const b = await getB();
  
  // 正確的并行方式
  const [a, b] = await Promise.all([getA(), getB()]);
  return { a, b };
}

六、實際應用案例

6.1 用戶登錄流程

async function login() {
  try {
    // 1. 獲取code
    const { code } = await wxLogin();
    
    // 2. 獲取用戶信息
    const { userInfo } = await wxGetUserProfile({ desc: '用于完善會員資料' });
    
    // 3. 發送到服務器
    const res = await wxRequest({
      url: '/api/login',
      method: 'POST',
      data: { code, userInfo }
    });
    
    // 4. 存儲token
    await wxSetStorage({ key: 'token', data: res.data.token });
    
    // 5. 更新全局狀態
    getApp().globalData.userInfo = userInfo;
    
    return userInfo;
  } catch (err) {
    console.error('登錄失敗:', err);
    await wxShowToast({ title: '登錄失敗', icon: 'none' });
    throw err;
  }
}

6.2 數據預加載

async function preloadData() {
  const loading = wx.showLoading({ title: '加載中' });
  
  try {
    const [
      banners,
      categories,
      recommends
    ] = await Promise.all([
      wxRequest({ url: '/api/banners' }),
      wxRequest({ url: '/api/categories' }),
      wxRequest({ url: '/api/recommends' })
    ]);
    
    return {
      banners: banners.data,
      categories: categories.data,
      recommends: recommends.data
    };
  } finally {
    wx.hideLoading();
  }
}

七、性能與錯誤處理

7.1 性能優化

1. 減少不必要的await：對于不依賴結果的異步操作，可以不await
2. 合理使用Promise.all：并行處理獨立請求
3. 避免過長的Promise鏈：考慮拆分復雜邏輯

7.2 錯誤處理最佳實踐

1. 全局錯誤處理：封裝統一的錯誤處理邏輯
2. 錯誤邊界：在適當層級捕獲錯誤，避免過度捕獲
3. 錯誤信息友好化：對API錯誤進行分類處理

// 全局錯誤處理器
function handleError(err) {
  console.error(err);
  if (err.errno === 401) {
    wx.navigateTo({ url: '/pages/login/login' });
  } else {
    wx.showToast({ 
      title: err.message || '請求失敗', 
      icon: 'none' 
    });
  }
}

// 在Promise鏈末尾添加catch
getData()
  .then(/* ... */)
  .catch(handleError);

八、總結

通過將微信小程序API Promise化，我們可以顯著改善異步代碼的可讀性和可維護性。結合async/await語法糖，可以編寫出更加清晰、結構化的異步代碼。在實際項目中，建議：

1. 對常用API進行統一的Promise封裝
2. 建立良好的錯誤處理機制
3. 合理使用并行請求優化性能
4. 在復雜場景下結合Promise高級用法

Promise不是萬能的，在某些特定場景下（如事件監聽、持續狀態變更），可能仍需使用回調函數。但對于大多數異步操作而言，Promise無疑是小程序開發中的強大工具。

參考資料

1. MDN Promise文檔
2. 微信小程序開發文檔
3. ECMAScript 6 入門 - Promise

”`