简化 JavaScript Promise

我喜欢 Promise。不是来自人类的 Promise，而是来自 JavaScript 的 Promise。
推文引用

我喜欢Promise。不是来自人类，而是来自 JavaScript。Promise让你的代码简洁明了，让代码库更容易理解。

您可能也熟悉async/await语法，但不幸的是，它会带来一些麻烦。我将介绍一些解决常见场景的技巧。

结合async/await​Promise.then

我遇到的第一个问题是使用过于冗长fetch：

const response = await fetch('/api');
const data = response.json();

如果您仅仅依赖于使用await，那么您最终将在非常简单的用例中使用多个变量和行。

相反，我们可以利用“传统”Promise.then语法：

const data = await fetch('/api').then(res => res.json());

一行代码仍然可读，并且功能相同。

结合async/await​Promise.catch

我遇到的第二个问题是用块创建的范围try { }：

try {
  const data = await fetchData();
} catch (error) {
  console.error(error);
}

// Oh no, `data` is undefined 😱
console.log(data);

嗯……我们无法读取块data外的内容try { }。如果你对这个变量还不熟悉，const我建议你读一下我的《揭秘 const 变量》这篇文章，但本质上，这个变量的作用域仅限于其花括号内{ }。

我们可以做的一件事就是提升变量：

let data;

try {
  data = await fetchData();
} catch (error) {
  console.error(error);
}

// Now we can use `data` 😎
console.log(data);

但是……我们已经不再符合使用const变量的安全范围了。代码中后面的任何地方都data可能被重新赋值，这样我们就得花几个小时来调试。有没有办法在使用的同时获得相同的结果const？

为什么是的，有：

const data = await fetchData()
  .catch(error => {
    console.error(error);
    return null;
  });

// We can still use `data` 👍
console.log(data);

我们再次利用了 Promise 的两种语法：async/await和Promise.catch。如果成功解析，则像往常一样fetchData将该值设置为变量。否则，将变量设置为，即 内部返回的值。datadatanull.catch()

明智地重构

当一个新的语言特性发布时，开发者们总是急于让他们的代码库遵循新的语法。正如你在本文中看到的，这种做法并不总是明智的。将新旧语法结合起来，可以有效地保持代码库的简洁，让任何新手都能轻松理解。