使用 async/await 进行“同步”获取

原文发表于Medium。

太长不看

async/await允许我们使用现代版本的 Javascript 以“同步”的方式使用异步请求进行编程。

假设的引言

作为Web开发人员，我们经常向API发出请求——不仅是我们自己的API，还有其他人的API。众所周知，API有时会非常麻烦。

如果我们想向一个假想的 API 发出请求呢https://api.com？

如果我告诉你，你可以在 Javascript 中发出这样的请求呢？

const response = fetch('https://api.com/values/1');
const json = response.json();
console.log(json);

通常情况下，这是不可能的，通常你会这样做：

fetch('https://api.com/values/1')
    .then(response => response.json())
    .then(json => console.log(json));

这个例子不如前一个例子易读。

不过，如果你尝试前面的例子，就会发现行不通。为什么呢？嗯，各位，我们缺少一些神奇的咒语！

等待

await允许我们等待异步请求的响应。

在await我们的假设代码中，我们可以这样做：

const response = await fetch('https://api.com/values/1');
const json = await response.json();
console.log(json);

让我们来分析一下。

第一行代码向目标地址发送 GET 请求https://api.com/values/1。我们不会立即执行下一行代码，而是等待请求完成，因此使用了 `await` 语句。请求完成后，它会将解析后的值传递给变量response。

在第二行中，我们获取了 JSON 版本response。同样，我们使用 `.`await来等待它完成（或失败），然后将结果传递给变量json。

最后，在最后一行，我们将变量的值记录json到控制台。

这避免了我们编写可读性不足的代码，使我们能够编写更简洁的代码。

这是一种更直观的请求处理方式。

为了帮助你更好地理解，这里提供另一种看待这个问题的方式：

await允许我们等待 aPromise解析为一个值。

awaitPromise只有在问题解决后才会返回该值。

抱歉重复了，但这样你才能明白。 😄 😅

异步

等等，还有！其实也没有，但我还有件事没告诉你。你知道我们用什么工具重写的那段代码await吗？它现在还不能用。

什么？！是啊。

要让它正常工作，你需要把它封装在一个async函数里！

方法如下：

const request = async () => {
    const response = await fetch('https://api.com/values/1');
    const json = await response.json();
    console.log(json);
}

request();

async你只需在函数声明前添加关键字并运行它！就这么简单！

但别光听我说！点击这里亲自体验一下！只需点击“运行”按钮：

Runkit 的 async/await 示例。

如果你喜欢这篇文章，请点击下方的爱心、独角兽或举手按钮！
谢谢！