Promise 是什么

promise 是一个简单的函数，它返回一个你可以回调的 Object(对象)。

promise 对象上的回调只有在操作完成时才会被调用。在之前，回调将不得不等待，直到操作被fulfilled 或 rejected：

在一个 promise 最终确定之前（ promise 要么实现（fulfills），要么被拒绝（rejected）），它必须经历不同的状态：

STATEDESCRIPTIONCALLBCAKpending意味着操作仍在运行，promise 正在等待中-fulfilled操作已经完成，并且很成功.then()rejected操作已完成，但出现了一个错误.catch()settledpromise 要么已经 fulfilled ，要么被 rejected，无论如何，这个回调都会被调用.finally()

当一个 promise 被创建时，初始状态是待定（pending）。然后根据操作的输出，promise 要么被 fulfilled，要么被 rejected。

从上面的表格中，你可以很容易地看到根据 Promise 的每个状态而被调用的回调：

如何在 JavaScript 中使用 Promises

现在你已经了解了什么是 promise，让我们通过建立我们之前看到的电影搜索应用来演示如何在 JavaScript 中使用 promise。

一个基本的电影搜索应用程序应该有一个输入字段，用户可以在那里搜索他们喜欢的电影。它还应该有一个用户界面来显示他们所搜索的电影的一些基本信息。

让我们从创建 HTML 开始。

如何编写 HTML

为了本教程的目的和提供实际的例子，我将使用 Codepen，但你可以使用你喜欢的代码编辑器。

创建一个index.html文件并添加以下代码：

上面我们只是创建了我们的电影应用程序的基础。所以现在让我们用一些 CSS 给它注入一些活力“

如何获取电影

为了获取我们的电影，我们将使用 TVMAZE 的 API。创建main.js文件并添加以下代码：

我们创建了一个函数get_movie(value = "Game of thrones")，使用了 JavaScript fetch API。我们用它来向我们的电影 API 端点（endpoint）发出GET请求。

fetch API 会返回一个 promise 。为了使用 API 的响应，我们使用了.then()回调，其中我们将response.json()传入一个新的函数create_UI()。让我们继续创建create_UI函数:

上述函数，顾名思义，帮助我们为我们的电影应用程序创建用户界面。但当然，我们仍然需要一种方法来收集用户的电影名称。

我们需要做的第一件事是给我们的 HTML 表单（form）添加一个onsubmit事件处理程序：

现在在我们的main.js文件中，我们通过提交表单时发生的事件触发处理：

当用户提交表单时，我们就会得到他们在搜索框中输入的值，并将其传递给我们先前创建的 get_movie(value = "Game of thrones")函数。

Promise 链

与我们在之前的例子中看到的不同，.then()回调并不是真正的结束。这是因为当你返回一个 promise 的值时，你会得到另一个 promise。当你想按顺序运行一系列的异步操作时，这就变得非常有用。

例如，我们的电影 API 不只是返回一部电影的信息，它还返回所有剧集的信息。比方说，我们真的不想显示《权力的游戏》中的所有剧集，我们只想要前四（4）集。

通过 promise chaining（链），我们可以很容易地实现这一点：

这仍然是我们的get_movie()函数，但这次我们不是将数据传递给create_UI函数，而是返回响应.then((response) => response.json())。这将创建一个新的 promise，我们可以将更多的回调添加到这个 promise 上。

理想情况下，这个链可以一直持续下去，只要你想。记住，你所要做的就是返回 promise 的值。

如何处理 Promises 中的错误

在一个 promise 中发生的错误会立即进入 .catch()` 回调：

.catch()回调是.then(null, (error) => {})的简写。你也可以把上面的内容写成：

以我们的电影搜索应用为例，当我们遇到任何错误时，我们可以在.catch()回调中处理并向用户显示一个漂亮的错误信息：

现在，如果由于任何原因产生的一个错误，.catch()回调被调用，我们向用户显示当前的错误。

如何在 JavaScript 中创建 Promises

现在我们已经了解了什么是 promise 以及如何使用它们，让我们看看如何在 JavaScript 中创建一个 promise。

要在 JavaScript 中创建一个 promise，你需要使用 promise 构造函数。构造函数需要一个参数：一个有两个参数的函数，resolve和reject：

然后我们可以通过回调来使用我们的 new_promise：

总结

在本教程中，我们学习了 promise，它们是什么，以及如何通过建立一个电影搜索应用程序来使用它们。

更多学习资料关注马哥教育  私信UP主