持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

JavaScript 中的 Promise 是什么？

我们总是听到人们做出承诺。你那个承诺给你免费钱的表弟，一个承诺在未经允许的情况下不再碰饼干罐的孩子......但是 JavaScript 中的承诺略有不同。

在我们的上下文中，承诺是需要一些时间才能完成的事情。一个承诺有两种可能的结果：

• 我们要么运行并解决承诺，要么
• 沿线发生了一些错误，并且承诺被拒绝

Promise 的出现是为了解决回调函数的问题。Promise 接受两个函数作为参数。即，resolve和reject。请记住，resolve 表示成功，reject 表示错误发生时。

让我们看一下工作中的 Promise：

const getData = (dataEndpoint) => {
   return new Promise ((resolve, reject) => {
     //some request to the endpoint;
     
     if(request is successful){
       //do something;
       resolve();
     }
     else if(there is an error){
       reject();
     }
   
   });
};

上面的代码是一个承诺，包含在对某个端点的请求中。就像我之前提到的那样resolve，承诺接受了。reject

例如，在对端点进行调用后，如果请求成功，我们将解决承诺并继续对响应做任何我们想做的事情。但是如果出现错误，promise 将被拒绝。

Promise 是一种解决回调地狱带来的问题的巧妙方法，采用一种称为Promise Chaining的方法。你可以使用此方法从多个端点顺序获取数据，但代码更少，方法更简单。

但是还有更好的方法！你可能熟悉以下方法，因为它是在 JavaScript 中处理数据和 API 调用的首选方式。

JavaScript 中的异步和等待是什么？

问题是，像回调一样将 Promise 链接在一起会变得非常庞大和混乱。这就是产生 Async 和 Await 的原因。

要定义异步函数，请执行以下操作：

const asyncFunc = async() => {

}

请注意，调用异步函数将始终返回一个 Promise。看看这个：

const test = asyncFunc();
console.log(test);

在浏览器控制台中运行上面的代码，我们看到asyncFunc返回了一个 Promise。

现在让我们真正分解一些代码。考虑下面的小片段：

const asyncFunc = async () => {
	const response = await fetch(resource);
   	const data = await response.json();
}

正如我上面提到的async，关键字是我们用来定义异步函数的。但是怎么样await？好吧，它会阻止 JavaScript 分配fetch给响应变量，直到 promise 被解决。一旦 promise 被解决，现在可以将 fetch 方法的结果分配给响应变量。

同样的事情发生在第 3 行。该.json方法返回一个承诺，我们可以使用await仍然延迟分配，直到承诺解决。

阻止代码或不阻止代码

当我说“拖延”时，你一定认为实现 Async 和 Await 会以某种方式阻止代码执行。因为如果我们的请求花费的时间太长了，对吧？

事实是，它没有。异步函数内部的代码是阻塞的，但这不会以任何方式影响程序的执行。我们代码的执行与以往一样是异步的。为了展示这一点，

const asyncFunc = async () => {
	const response = await fetch(resource);
   	const data = await response.json();
}

console.log(1);
cosole.log(2);

asyncFunc().then(data => console.log(data));

console.log(3);
console.log(4);

在我们的浏览器控制台中，上面的输出看起来像这样：

1
2
3
4
data returned by asyncFunc

你会看到，当我们调用asyncFunc时，我们的代码会继续运行，直到该函数返回结果。

结论

本文不会深入探讨这些概念，但我希望它能向你展示异步 JavaScript 的含义以及需要注意的一些事项。