深入淺出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非同步操作變得更高效，這無疑是前端開發人員應該擁有的解決方案之一。