JavaScript-異步/等待中的錯誤處理

我是 javascript 新手，我正在學習 async/await。我研究了不同的檔案并得到了基本的想法。在運行一些示例時，我遇到了一些意想不到的結果。我不確定我錯過了哪里。

代碼：

var colors = ["RED", "GREEN", "YELLOW"];

const getColor = async () => {
  var value = "";
  colors.forEach((color) => {
    value = value   color   " ";
  });
  return value;
};


const middleware = async () => {
  addColor(null)
    .then(() => {
      getColor().then((result) => {
        console.log(result);
      });
    })
    .catch((err) => {
      console.log(err.message   " at  middleware");
    });
};

const addColor = async (color) => {
  validateColor(color)
    .then(() => {
      console.log("Adding data");
      colors.push(color);
    })
    .catch((err) => {
      console.log(err.message   " at add color");
      throw err;
    });
};

const validateColor = async (color) => {
  if (color == null) {
    throw new Error("Color cannot be empty");
  }
};

middleware();

呼叫中間件函式后，預期的結果是只列印錯誤訊息。但它也會列印顏色的名稱。輸出：

即使addColor()拋出了一些錯誤，我還是無法理解為什么then() 中的代碼會被執行？另外，為什么沒有呼叫middleware()處的 catch 塊？

uj5u.com熱心網友回復：

雙方validateColor()并addColor()創建無極物件，但他們無關。如果addColor()更改為從回傳Promise validateColor()，則您的代碼將按預期作業：

    var colors = ["RED", "GREEN", "YELLOW"];
    
    const getColor = async () => {
      var value = "";
      colors.forEach((color) => {
        value = value   color   " ";
      });
      return value;
    };
    
    
    const middleware = async () => {
      addColor(null)
        .then(() => {
          getColor().then((result) => {
            console.log(result);
          });
        })
        .catch((err) => {
          console.log(err.message   " at  middleware");
        });
    };
    
    const addColor = async (color) => {
      return validateColor(color)
        .then(() => {
          console.log("Adding data");
          colors.push(color);
        })
        .catch((err) => {
          console.log(err.message   " at add color");
          throw err;
        });
    };
    
    const validateColor = async (color) => {
      if (color == null) {
        throw new Error("Color cannot be empty");
      }
    };
    
    middleware();

你的async函式導致回傳值被包裝在一個 Promise 中。因此，不論validateColor()和addColor()意志，除非你做一些事情，創建無關相互獨立的個人承諾的物件。另一方面，如果addColor回傳回傳的 Promise validateColor()，則不會單獨創建新的 Promise；相同的 Promise 被傳遞回middleware(). 該 Promise 在 中拋出了未決例外validateColor()，因此.catch()將呼叫 。

uj5u.com熱心網友回復：

在一個班級中，我會說，您需要為每個異步函式添加回傳承諾，這里是正確的代碼。

var colors = ["RED", "GREEN", "YELLOW"];

const getColor = async () => {
  var value = "";
  colors.forEach((color) => {
    value = value   color   " ";
  });
  return Promise.resolve(value);
};


const middleware = async () => {
  return addColor(null) 
    .then(() => {
      getColor().then((result) => {
        console.log(result);
      });
    })
    .catch((err) => {
      console.log(err.message   " at  middleware");
    });
};

const addColor = async (color) => {
  return validateColor(color)
    .then(() => {
      console.log("Adding data");
      colors.push(color);
    })
    .catch((err) => {
      console.log(err.message   " at add color");
      throw err;
    });
};

const validateColor = async (color) => {
  if (color == null) {
    throw new Error("Color cannot be empty");
  }
  Promise.resolve(true)
};

middleware();

解釋：

基本上，async 函式可以與 await 一起使用，或者換句話說，如果您想將 await 與任何函式一起使用，那么該函式必須是異步的，這實際上意味著該函式應該回傳一個 promise，然后只有 await 陳述句可以有道理。

例子：

考慮我正在呼叫一個函式“test()”和“await test()”，所以這兩者之間的區別在于第一種情況（“test()”）它將呼叫測驗函式，如果有任何阻塞操作然后它將繼續執行“test()”陳述句下面的陳述句。而在“await test()”的情況下，如果有一個阻塞操作，那么它將等待它們完成并且在測驗函式完成之前不會執行進一步的陳述句（這里完成意味著該函式將回傳一個promise，它將等待直到承諾被解決或拒絕）

因此，這里沒有任何異步函式回傳承諾，因此默認情況下，當函式執行克服它時，將其視為已解決，因此引發了問題。

關于這個例子的詳細解釋。

第一個“middleware()”函式被呼叫。從那個“addColor()”函式被呼叫

addColor()：
如果從這個函式回傳的 promise 得到解決，那么它將呼叫“getColor()”函式，
否則它只會列印一條錯誤訊息。

所以它將首先轉到我們正在呼叫的函式中的 addColor 函式 validateColor() 函式

validateColor()：
如果該函式承諾的回傳值得到解決，那么我們將顏色添加到陣列中。
否則我們列印一個錯誤并拋出它。

并且validate color函式會因為顏色為空而拋出一個錯誤，但是當它來到validate函式的else部分（從addColor函式呼叫）時，addColor函式已經被認為執行成功了。

標籤：javascript 异步 异步等待

上一篇：ReplaySubject讀取所有值

下一篇：console.log1234如何同步