章节 52 | 网络接口简介（三）：Promise介绍及 6 个常用方法

在微信小程序全栈开发的旅途中，网络接口的调用是不可或缺的一环，它连接了前端与后端的数据世界，使得动态内容展示、用户交互反馈成为可能。而Promise作为处理异步操作的一种强大机制，在现代JavaScript开发中占据了举足轻重的地位。本章节将深入探讨Promise的基本概念、工作原理以及在小程序开发中常用的六个方法，帮助读者更好地理解和应用这一技术，优化网络接口的调用与处理流程。

一、Promise概述

1.1 什么是Promise

Promise是JavaScript中用于处理异步操作的对象，它代表了一个尚未完成但预期将来会完成的异步操作的结果。它允许你为异步操作的成功(fulfilled)和失败(rejected)情况绑定处理程序。与传统的回调函数相比，Promise提供了更优雅的方式来处理异步流程，避免了回调地狱（Callback Hell）的问题。

1.2 Promise的基本状态

• Pending（等待中）：初始状态，既不是成功，也不是失败状态。
• Fulfilled（已成功）：意味着操作成功完成。
• Rejected（已失败）：意味着操作失败。

一旦Promise被fulfilled或rejected，它的状态就不能再改变。

1.3 Promise的基本用法

let promise = new Promise(function(resolve, reject) {
    // 异步操作
    if (/* 异步操作成功 */) {
        resolve(value); // 将Promise的状态从"pending"变为"fulfilled"，并将异步操作的结果作为回调函数的参数
    } else {
        reject(error); // 将Promise的状态从"pending"变为"rejected"，并将错误信息作为回调函数的参数
    }
});
promise.then(
    function(value) {
        // 成功时的回调
    },
    function(error) {
        // 失败时的回调
    }
);

二、Promise的6个常用方法

2.1 then()

then()方法是Promise最重要的方法之一，用于在Promise成功（fulfilled）后执行一个回调函数，并可以返回一个新的Promise。它接受两个可选参数：

• onFulfilled：当Promise成功时调用的函数，该函数接收Promise的解决值作为参数。
• onRejected：当Promise失败时调用的函数，该函数接收Promise的拒绝原因作为参数。

promise.then(value => {
    console.log(value);
    // 可以返回一个新的Promise
    return new Promise(/* ... */);
}).then(result => {
    // 处理上一步返回的新Promise的结果
});

2.2 catch()

catch()方法用于指定Promise失败时的回调函数，它是.then(null, rejection)的语法糖，用于处理Promise被拒绝（rejected）的情况。

promise.then(value => {
    // 处理成功情况
}).catch(error => {
    // 处理失败情况
    console.error(error);
});

2.3 finally()

finally()方法不论Promise最终状态如何，都会执行。它主要用于执行一些清理工作，如关闭文件描述符、释放资源等。

promise.finally(() => {
    // 无论成功或失败，都会执行
    console.log('Promise已完成，无论是成功还是失败。');
});

2.4 all()

Promise.all()方法接收一个Promise对象的数组作为参数，并返回一个新的Promise实例。只有当所有的子Promise都成功完成时，新的Promise才会成功完成，其结果是所有子Promise结果的数组。如果任何一个子Promise失败，新的Promise会立即失败，其结果是第一个失败的子Promise的结果。

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // [3, 42, "foo"]
});

2.5 race()

Promise.race()方法同样接收一个Promise对象的数组作为参数，但返回的新Promise实例会在其数组中的任何一个Promise对象成功或失败时，以相同的值或理由解决（resolve）或拒绝（reject）。

let promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "two"，因为它更快
});

2.6 resolve() 和 reject()

虽然resolve()和reject()并非Promise对象的方法，而是用于在Promise构造函数中定义Promise状态转变的函数，但它们在Promise的创建和使用中扮演着核心角色。resolve()将Promise的状态由pending变为fulfilled，reject()则将Promise的状态由pending变为rejected。

let fulfilledPromise = Promise.resolve(123);
fulfilledPromise.then(value => {
    console.log(value); // 123
});
let rejectedPromise = Promise.reject(new Error('出错了'));
rejectedPromise.catch(error => {
    console.error(error); // Error: 出错了
});

三、Promise在微信小程序中的应用

在微信小程序中，网络请求的API（如wx.request）默认返回的就是一个Promise对象，这使得我们可以非常方便地使用then、catch等方法来处理网络请求的结果或错误。此外，利用Promise.all可以并发执行多个网络请求，并在所有请求都完成后统一处理结果，这对于提升应用的性能和用户体验非常有帮助。

例如，同时获取用户信息和商品列表：

Promise.all([
    wx.request({
        url: 'https://api.example.com/user',
        success: res => resolve(res.data)
    }),
    wx.request({
        url: 'https://api.example.com/products',
        success: res => resolve(res.data)
    })
]).then(([userInfo, products]) => {
    // 同时处理用户信息和商品列表
    console.log(userInfo, products);
}).catch(error => {
    // 处理可能出现的错误
    console.error(error);
});
// 注意：上面的wx.request用法仅为示意，实际中wx.request已返回Promise，无需再封装

四、总结

通过本章节的学习，我们深入理解了Promise的基本概念、工作原理以及在小程序开发中常用的六个方法。Promise作为处理异步操作的强大工具，不仅简化了异步编程的复杂度，还提高了代码的可读性和可维护性。在微信小程序的开发过程中，合理利用Promise可以极大地优化网络请求的处理流程，提升应用的性能和用户体验。希望读者能够掌握并灵活运用这些知识，为开发高效、稳定的微信小程序打下坚实的基础。