在前端开发中，我们经常会使用 Promise 来处理异步请求和操作，而 Promise 的链式调用是 Promise 提供的一种方便的方式，可以使代码更加简洁和优雅。但是，在实际开发中，我们也经常会遇到 Promise 链式调用出现的各种问题，例如回调地狱、函数嵌套等问题。在 ES6 中，通过引入 async/await 可以很好地解决这些问题。
Promise 链式调用的问题
Promise 链式调用是指将多个 Promise 调用串联起来，以便异步操作之间能够按照特定次序依次执行。例如，在前端开发中，我们经常需要通过多次异步请求来获取数据，然后对这些数据进行处理和展示。在这种情况下，我们通常会使用 Promise 链式调用来实现这一目的。
但是，Promise 链式调用也会带来一些问题，例如：
1. 回调地狱
在多次调用 Promise 的过程中，为了保证异步操作的有序执行，通常需要进行大量的回调操作，这就可能导致代码出现回调地狱，让代码难以维护。
例如，下面是一个使用 Promise 链式调用获取 GitHub 上某个用户仓库列表的示例，其中包含了大量的嵌套回调：
fetch('https://api.github.com/users/github/repos')
.then(response => response.json())
.then(repos => {
fetch(repos[0].url)
.then(response => response.json())
.then(repo => console.log(repo.name));
});2. 函数嵌套
在使用 Promise 链式调用时，为了保证异步操作的顺序执行，通常需要将每个操作封装到一个函数中，这就可能导致函数嵌套的问题，让代码难以读写和维护。
例如，下面是一个使用 Promise 链式调用获取 GitHub 上某个用户仓库列表的示例，其中包含了大量的函数嵌套：
-- -------------------- ---- -------
--------------------------------------------------
-------------- -- ----------------
----------- -- -
------ ------------------------
--
---------- -- -
-----------------------
---
-------- -------------- -
------ ----------
-------------- -- -----------------
-ES6 中的解决方案：async/await
在 ES6 中，引入 async/await 可以很好地解决 Promise 链式调用的问题，使代码更加清晰和易于维护。
async 函数是指一个返回 Promise 对象的异步函数，可以通过 await 操作符来阻塞后续代码的执行，等待 Promise 对象至 resolved 状态后再继续执行。使用 async/await 可以避免回调地狱和函数嵌套的问题，让代码更加简洁和易于理解。
例如，下面是一个使用 async/await 获取 GitHub 上某个用户仓库列表的示例，其中没有任何的回调和函数嵌套：
async function fetchRepoName() {
const response = await fetch('https://api.github.com/users/github/repos');
const repos = await response.json();
const repo = await fetch(repos[0].url).then(response => response.json());
console.log(repo.name);
}
fetchRepoName();总结
Promise 链式调用是在前端开发中经常使用的一种方式，可以方便地处理异步请求和操作，但是也会带来回调地狱和函数嵌套的问题。在 ES6 中，通过引入 async/await 可以很好地解决这些问题，使代码更加清晰和易于维护。在实际开发中，我们应该尽可能地使用 async/await 来处理异步请求和操作，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc3a2968c7c53b0c64509