52 | 网络接口简介（三）：Promise介绍及 6 个常用方法-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 章节 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的基本用法

```javascript
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的拒绝原因作为参数。

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

##### 2.2 `catch()`

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

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

##### 2.3 `finally()`

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

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

##### 2.4 `all()`

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

```javascript
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）。

```javascript
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。

```javascript
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`可以并发执行多个网络请求，并在所有请求都完成后统一处理结果，这对于提升应用的性能和用户体验非常有帮助。

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

```javascript
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`可以极大地优化网络请求的处理流程，提升应用的性能和用户体验。希望读者能够掌握并灵活运用这些知识，为开发高效、稳定的微信小程序打下坚实的基础。

该分类下的相关小册推荐：

微信小程序与云开发(中)

微信小程序与云开发(下)

微信小程序全栈开发实战(下)

微信小程序全栈开发实战(中)

微信小程序底层框架实现原理

微信小程序与云开发(上)