微信小程序中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中用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。

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

”`