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函数并返回结果。这极大地简化了异步代码的书写和理解。

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

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

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

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

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

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

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

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，从而以同步的方式处理登录逻辑：

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等待响应：

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（响应式编程库）等，它们为开发者提供了更多选择和可能性。因此，持续学习和探索新技术，是成为一名优秀前端开发者的重要途径。