Promise 是 JavaScript 中的一种异步编程解决方案，可以有效避免回调地狱。在 Promise 中，then 方法和 async/await 关键字是两个常用的用于处理异步操作的方式。
Promise 中的 then 方法
在 Promise 中，then 方法是用于处理异步操作成功后的回调函数。then 方法可以接受两个参数，分别为成功和失败的回调函数。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
--------------------- -- -
-------------------- -- ---------
-- ------- -- -
-------------------
---在上面的例子中，我们创建了一个 Promise 对象，并在 1 秒钟后通过 resolve 方法返回了一个字符串 'success'。然后我们调用 Promise 对象的 then 方法，传入了一个成功回调函数和一个失败回调函数。由于我们的 Promise 对象成功了，所以 then 方法会调用成功回调函数，打印出字符串 'success'。
async/await 关键字
async/await 是 ES8 中的异步编程解决方案，它基于 Promise，可以使异步代码看起来更像同步代码。async/await 关键字可以让我们以同步的方式编写异步代码。
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);
}
fetchData();在上面的例子中，我们定义了一个名为 fetchData 的异步函数，函数内部使用 await 关键字等待 fetch 方法返回的 Promise 对象，并将其结果赋值给 response 变量。然后我们再次使用 await 关键字等待 response 对象的 json 方法返回的 Promise 对象，并将其结果赋值给 data 变量。最后，我们打印出 data 变量的值。
then 方法与 async/await 的选择
在使用 Promise 时，then 方法和 async/await 关键字都是处理异步操作的有效方式。但在实际开发中，我们应该根据具体需求和代码风格选择合适的方式。
如果我们需要处理多个异步操作，并且这些操作之间没有依赖关系，那么使用 then 方法可以让代码更简洁。
Promise.all([
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2')
]).then((responses) => {
const data1 = responses[0].json();
const data2 = responses[1].json();
console.log(data1, data2);
});在上面的例子中，我们使用 Promise.all 方法将两个 fetch 方法返回的 Promise 对象合并成一个 Promise 对象，并在 then 方法中分别处理它们的结果。由于这两个异步操作之间没有依赖关系，使用 then 方法可以让代码更简洁。
如果我们需要处理多个异步操作，并且这些操作之间有依赖关系，那么使用 async/await 关键字可以让代码更易读。
-- -------------------- ---- ------- ----- -------- ----------- - ----- --------- - ----- ------------------------------------------------------ ----- ----- - ----- ----------------- ----- --------- - ----- -------------------------------------------------------------------- ----- ----- - ----- ----------------- ------------------- - ------------
在上面的例子中，我们定义了一个名为 fetchData 的异步函数，函数内部先通过 await 关键字等待第一个 fetch 方法返回的 Promise 对象，并将其结果赋值给 response1 变量。然后我们再次使用 await 关键字等待 response1 对象的 json 方法返回的 Promise 对象，并将其结果赋值给 data1 变量。接着我们使用 await 关键字等待第二个 fetch 方法返回的 Promise 对象，并将其结果赋值给 response2 变量。最后，我们再次使用 await 关键字等待 response2 对象的 json 方法返回的 Promise 对象，并将其结果打印出来。
由于第二个异步操作需要使用第一个异步操作的结果，使用 async/await 关键字可以让代码更易读。
总结
在 Promise 中，then 方法和 async/await 关键字都是处理异步操作的有效方式。我们应该根据具体需求和代码风格选择合适的方式。如果我们需要处理多个异步操作，并且这些操作之间没有依赖关系，那么使用 then 方法可以让代码更简洁。如果我们需要处理多个异步操作，并且这些操作之间有依赖关系，那么使用 async/await 关键字可以让代码更易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604d676d10417a22222e203