54 | 网络接口简介（五）：基于Promise+await、async关键字改写登录模块-微信小程序全栈开发实战(上) - 码小课 - 程序员在线学习平台

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

### 54 | 网络接口简介（五）：基于Promise+await、async关键字改写登录模块

在微信小程序的全栈开发过程中，网络接口的调用是不可或缺的一环，它连接了前端界面与后端服务，实现了数据的交互与业务逻辑的处理。随着JavaScript ES6及更高版本的普及，`Promise`、`async/await`等异步编程模式成为了处理异步操作的主流方式，极大地简化了代码结构，提高了代码的可读性和可维护性。本章节将重点介绍如何使用`Promise`结合`async/await`关键字来改写微信小程序的登录模块，实现更加优雅和高效的异步流程控制。

#### 一、理解Promise与async/await

**1.1 Promise基础**

`Promise`是ES6引入的一种新的异步编程解决方案，它代表了一个最终可能完成或失败的操作及其结果值。一个`Promise`有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。`Promise`对象通过`.then()`和`.catch()`方法处理成功和失败的情况，还可以使用`.finally()`来指定无论Promise最终状态如何都会执行的操作。

**1.2 async/await简介**

`async`和`await`关键字是建立在`Promise`之上的，使得异步代码看起来和同步代码一样。`async`函数会隐式返回一个`Promise`，而`await`关键字可以暂停`async`函数的执行，等待`Promise`处理完成后再继续执行`async`函数并返回结果。这极大地简化了异步代码的书写和理解。

#### 二、微信小程序登录流程回顾

在深入改写登录模块之前，我们先简要回顾一下微信小程序的登录流程：

1. **调用wx.login()获取code**：用户触发登录操作后，小程序首先调用`wx.login()`接口获取登录凭证`code`。
2. **发送code到服务器换取session_key和openid**：将`code`发送到开发者服务器，服务器使用`code`向微信服务器换取`session_key`和`openid`等信息。
3. **服务器生成自定义登录态（如token）**：服务器根据`openid`等信息生成自定义的登录态（如JWT token），并返回给小程序。
4. **小程序保存登录态**：小程序将接收到的登录态保存到本地存储（如`wx.setStorageSync`），以便后续请求携带。

#### 三、基于Promise+async/await改写登录模块

接下来，我们将使用`Promise`和`async/await`来改写上述登录流程中的关键步骤，使代码更加清晰和易于维护。

**3.1 封装wx.login()的Promise版本**

首先，我们可以封装一个返回`Promise`的`login`函数，用于处理`wx.login()`的异步调用：

```javascript
function loginWithPromise() {
    return new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                if (res.code) {
                    resolve(res.code);
                } else {
                    reject(new Error('登录失败：未获取到code'));
                }
            },
            fail(err) {
                reject(err);
            }
        });
    });
}
```

**3.2 使用async/await调用loginWithPromise**

然后，在需要登录的地方，我们可以使用`async`函数结合`await`来调用`loginWithPromise`，从而以同步的方式处理登录逻辑：

```javascript
async function handleLogin() {
    try {
        const code = await loginWithPromise();
        console.log('获取到的code:', code);
        // 接下来可以发送code到服务器换取session_key和openid
    } catch (error) {
        console.error('登录失败:', error);
    }
}

// 调用handleLogin函数
handleLogin();
```

**3.3 发送code到服务器并处理响应**

接下来，我们需要将`code`发送到服务器，并处理服务器的响应。这里同样可以使用`Promise`封装请求函数，并在`async`函数中使用`await`等待响应：

```javascript
function fetchSessionKey(code) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: '你的服务器接口地址', // 替换为你的服务器接口地址
            data: {
                code: code
            },
            method: 'POST',
            success(res) {
                if (res.statusCode === 200 && res.data.success) {
                    resolve(res.data); // 假设服务器返回的数据中包含session_key和openid
                } else {
                    reject(new Error('服务器响应错误：' + res.data.message));
                }
            },
            fail(err) {
                reject(err);
            }
        });
    });
}

// 在handleLogin函数中继续处理
async function handleLogin() {
    try {
        const code = await loginWithPromise();
        const sessionData = await fetchSessionKey(code);
        console.log('从服务器获取的session数据:', sessionData);
        // 保存session_key或token到本地存储
        wx.setStorageSync('session_key', sessionData.session_key); // 假设sessionData中包含session_key
        // 其他登录成功后的处理...
    } catch (error) {
        console.error('登录失败:', error);
    }
}

// 调用handleLogin函数
handleLogin();
```

#### 四、总结与扩展

通过本章节的学习，我们掌握了如何使用`Promise`和`async/await`来改写微信小程序的登录模块，使得异步代码更加简洁、易于理解和维护。在实际开发中，这种模式可以广泛应用于各种网络请求的处理中，提升代码的整体质量。

此外，值得注意的是，虽然`async/await`让异步代码看起来像是同步代码，但本质上它仍然是异步的，因此在处理多个异步操作时，仍需注意避免潜在的竞态条件和数据一致性问题。同时，对于复杂的异步逻辑，合理的错误处理和异常捕获也是必不可少的。

最后，随着前端技术的不断发展，新的异步编程模式和库不断涌现，如`async_hooks`（Node.js中的高级异步钩子API）、`RxJS`（响应式编程库）等，它们为开发者提供了更多选择和可能性。因此，持续学习和探索新技术，是成为一名优秀前端开发者的重要途径。

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

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

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

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

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

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

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