深入浅出await-to-js

作为一项ES6推出的异步编程解决方案，async/await构成了JavaScript的新风景线，在优化异步操作的同时，也显著地缩短了代码量。然而，不管在哪里，我们都不可能看到完美的异步解决方案，await-to-js诞生的意义也是如此——时常在一行代码中把全部的可能性拓展，碰到错误也能优雅地处理。这篇文章将会从await-to-js的优势和使用示例着手，深入探讨这款await-friendly库。

一、快速入门

在介绍await-to-js能做些什么之前，让我们先来看看在实际代码里，如何对一个promise做错误处理。我们以一个示例代码为例：

const fetchData = async () => {
  try {
    const res = await fetch('https://www.example.com/api/data');
    const data = await res.json();
    return data;
  } catch (err) {
    console.log('error', err);
  }
};

上面这段代码是众所周知的一种处理方式。然而，注意到其实我们不太关注代码的正常逻辑路径，而是“error”下有什么可能性

我们可以手写一个错误处理函数来达到与try/catch相同的功能。下面是一个示例：

const fetchData = async () => {
  const [err, res] = await to(fetch('https://www.example.com/api/data'));
  if (err) return console.log('error', err);
  const data = await res.json();
  return data;
};

如示例所示，await-to-js库提供了另一种针对promise错误处理的解决方案，尽管只是一种语法糖，但却让代码更简洁易懂。在上述调用中，我们把await提前到第一行，然后用方括号收集错误和数据变量 [err, res]。在第二行，我们关注了err变量。可以理解为把promise调用的错误和数据分开了，并存储了它们，这与在try块中拆分各个异步条件很相似。

二、await-to-js的特点

1、错误处理

与try/catch相比，await-to-js更加方便地获取错误：

const exampleFn = async () => {
  const [err, data] = await to(fetchData());
  if (err) console.log(err);
  else console.log(data);
};

在这个示例中，我们获得了fetchData()返回的数据与可能存在的错误。我们可以在对err进行监听时更加灵活，以便其他处理和更好的错误处理。

2、提供了一个短小的解决方案:

有时候，你所需的解决方案可能如此简单，以至于你不希望使用繁琐的promise和catch块。例如，我们想转换一个promise，以便我们可以将其置于更深的嵌套中：

const namePromise = Promise.resolve({ name: "await-to-js" });
const [err, name] = await to(namePromise.then(data => data.name));

// or useEffect(() => {
//   Promise.reject("error example")
//     .catch(err => [err])
//     .then(([err]) => console.log(err));
// }, []);

在使用它来解决我们的嵌套问题时，这个可怜的Promise.slide（Promise.resolve，Promise.reject）有点不充分，我们可能会尝试做更多的代码以解决这个问题。但使用to，就能够获得更短的代码和更好的可读性。

三、await-to-js的使用示例

1、组合代码

await-to-js通常在以下代码中使用：

const [err, data] = await to(myAsyncFunction());

这完全就是ASYNC/AWAIT的情况下使用的一种解决方案，它会捕获错误，以便我们能够更好地了解问题。然而，在这段与普通的await语法一样的代码代码组合中，我们多了一个易于使用的解决方案。

2、通过async/await调用回调函数

在React。我们很可能需要使用回调函数。然而，在React和其他组件中使用回调函数有时会带来一些问题。特别是在异步调用中，我们必须仔细处理回调函数。await-to-js library提供了一个解决方案：

const getUser = async (userId, callback) => {
    const [err, data] = await to(fetchUser(userId));
    if (err) return callback(err);
    callback(null, data);
};

getUser(123, (err, data) => {
    if (err) console.log(err);
    else console.log(data);
});

在这个例子中，我们成功地调用了一个异步调用，并使用回调函数检查了异步返回值。

3、等待多个Promise解决

我们有时会有多个异步操作，而不只是一个简单的操作，例如，当我们使用fetch.js从不同URL获取数据时。如果我们想让fetch完成异步操作后，再做其他事情。通过使用Promise.all，我们可以达到这个目的。

const [postErr, postData] = await to(axios.get(`/posts`));
const [userErr, userData] = await to(axios.get(`/users`));

if (postErr || userErr) {
  // handle errors
} else {
  // handle data
}

Promise.all很有用，但是如果我们只需要其中一个Promise解决就可以了，await-to-js是一个很好的选择，尤其是在我们对代码长度有要求时，因为我们不会像使用Promise.all那样需要创建一个新的Promise。

总结

await-to-js拓展了JavaScript的异步功能，使得原本复杂的异步操作变得简单易懂——任何代码只需一行，获得更好的可读性、可组合参数，并更灵活地进行错误处理。await-to-js的使用方式也相当灵活，可以通过组合、回调函数、等待Promise解决等方式，让您可以更加愉快地使用它。相信在了解并学会使用await-to-js后，您会发现JavaScript异步操作变得更高效，这无疑是前端开发人员应该拥有的解决方案之一。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193296.html