从用户登陆请求Api列表数据，一文详解 Promise 高效工具

Promise 的引入

Promise是JavaScript中一种常见的异步编程方式，用于解决回调地狱的问题。Promise可以用来包装一个异步操作，并返回一个对象，用于表示该异步操作的最终完成或失败的状态。

Promise有三个状态：pending（等待中）、fulfilled（已完成）和rejected（已失败）。一旦Promise对象状态变为fulfilled或rejected，就不能再改变了。当Promise对象状态变为fulfilled时，会调用then方法注册的回调函数；当Promise对象状态变为rejected时，会调用catch方法注册的回调函数。

下面是一个简单的Promise示例代码：

运行结果为：

上述代码创建了一个Promise对象，该对象会在1秒后被标记为fulfilled，并返回字符串'done!'。然后调用then方法注册一个回调函数，该函数会在Promise对象被标记为fulfilled时被调用，输出'done!'。

Promise对象的构造函数接收一个函数作为参数，该函数会在Promise对象创建时立即执行。该函数接收两个参数：resolve和reject。当异步操作成功时，调用resolve函数并传入操作结果；当异步操作失败时，调用reject函数并传入失败的原因。在上面的示例中，setTimeout模拟了一个异步操作，并在1秒后调用resolve函数返回操作结果。

then方法和catch方法都是Promise对象的原型方法。then方法接收一个回调函数作为参数，该函数会在Promise对象状态变为fulfilled时被调用，并将操作结果作为参数传入。catch方法接收一个回调函数作为参数，该函数会在Promise对象状态变为rejected时被调用，并将失败的原因作为参数传入。

所以，Promise对象可以用来包装异步操作，并通过回调函数的方式处理异步操作的结果，避免了回调地狱的问题。

业务代码

下面我们通过实例，演示 Promise 在代码流程中的应用。

• 先从本地storage中判断用户信息是否存在？

• 如果存在，就调用api接口 /api/v1/page/list 请求数据；

• 数据字段包括 id, name, desc, ratio, amount，要求将ratio字段隐藏不展示。

• 如果本地storage中用户信息不存在，则调用login接口，发起登录。

• 登录成功后，缓存用户信息到storage。

• 然后调用api接口 /api/v1/page/list 请求数据，并使用同样的处理方法处理返回数据。

下面是使用Promise处理任务的示例代码：

上述代码首先定义了三个Promise函数，分别用于从本地storage中读取用户信息、登录并缓存用户信息到本地storage、请求数据接口并隐藏ratio字段。

然后使用Promise按照题目要求处理任务，首先调用getUserInfo函数从本地storage中读取用户信息。如果用户信息存在，则调用requestData函数请求数据接口并隐藏ratio字段；如果用户信息不存在，则调用login函数进行登录并缓存用户信息，然后再调用requestData函数请求数据接口并隐藏ratio字段。

最后，使用then方法处理返回的数据，将处理后的数据输出到控制台。如果出现错误，则使用catch方法捕获错误并输出错误信息。

async - await

async/await 是 ES2017 中新增的关键字，用于处理异步操作，它们是 Promise 的语法糖，可以让异步代码更加易读和易写。

async 表示一个函数是异步函数，async 函数中可以使用 await 来等待异步操作的结果。await 表示需要等待的异步操作，可以是 Promise 对象或者其他的异步操作。当 await 表达式被执行时，它会暂停 async 函数的执行，直到 Promise 对象的状态变成 resolved，才会继续执行 async 函数。

async/await 跟 Promise 的关系是，async/await 是 Promise 的语法糖，本质上仍然是基于 Promise 实现的。使用 async/await 可以让 Promise 更加易读易写，使得异步操作更加像同步操作。

下面是 async/await 的用法示例：

上面的代码使用 async/await 来实现了一个获取数据的函数 getData，其中使用了 checkUserExist 方法来判断用户是否存在，并使用 fetch 方法获取数据。由于 fetch 方法返回的是一个 Promise 对象，因此可以使用 await 来等待异步操作的结果。

小结

文本简要介绍了 Promise 的由来和使用，并使用 Promise 使业务流程更加易读。最后介绍了 Promise 的语法糖 async、await 关键字，可以用同步的手法，写异步代码。岂不美哉！