前言

本文將帶你了解 JavaScript 中常見的錯(cuò)誤類型，處理同步和異步 JavaScript/Node.js 代碼中錯(cuò)誤和異常的方式，以及錯(cuò)誤處理最佳實(shí)踐！

1. 錯(cuò)誤概述

JavaScript 中的錯(cuò)誤是一個(gè)對(duì)象，在發(fā)生錯(cuò)誤時(shí)會(huì)拋出該對(duì)象以停止程序。在 JavaScript 中，可以通過構(gòu)造函數(shù)來創(chuàng)建一個(gè)新的通用錯(cuò)誤：

const err = new Error("Error");

當(dāng)然，也可以省略 new 關(guān)鍵字：

const err = Error("Error");

Error 對(duì)象有三個(gè)屬性：

• message：帶有錯(cuò)誤消息的字符串；
• name: 錯(cuò)誤的類型；
• stack：函數(shù)執(zhí)行的堆棧跟蹤。

例如，創(chuàng)建一個(gè) TypeError 對(duì)象，該消息將攜帶實(shí)際的錯(cuò)誤字符串，其 name 將是“TypeError”：

const wrongType = TypeError("Expected number");

wrongType.message; // 'Expected number'
wrongType.name;    // 'TypeError'

堆棧跟蹤是發(fā)生異?；蚓娴仁录r(shí)程序所處的方法調(diào)用列表：

它首先會(huì)打印錯(cuò)誤名稱和消息，然后是被調(diào)用的方法列表。每個(gè)方法調(diào)用都說明其源代碼的位置和調(diào)用它的行?？梢允褂么藬?shù)據(jù)來瀏覽代碼庫并確定導(dǎo)致錯(cuò)誤的代碼段。此方法列表以堆疊的方式排列。它顯示了異常首先被拋出的位置以及它如何通過堆棧方法調(diào)用傳播。為異常實(shí)施捕獲不會(huì)讓它通過堆棧向上傳播并使程序崩潰。

對(duì)于 Error 對(duì)象，F(xiàn)irefox 還實(shí)現(xiàn)了一些非標(biāo)準(zhǔn)屬性：

• columnNumber：錯(cuò)誤所在行的列號(hào)；
• filename：發(fā)生錯(cuò)誤的文件
• lineNumber：發(fā)生錯(cuò)誤的行號(hào)

2. 錯(cuò)誤類型

JavaScript 中有一系列預(yù)定義的錯(cuò)誤類型。只要使用者沒有明確處理應(yīng)用程序中的錯(cuò)誤，它們就會(huì)由 JavaScript 運(yùn)行時(shí)自動(dòng)選擇和定義。

JavaScript中的錯(cuò)誤類型包括：

• EvalError
• InternalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

這些錯(cuò)誤類型都是實(shí)際的構(gòu)造函數(shù)，旨在返回一個(gè)新的錯(cuò)誤對(duì)象。最常見的就是 TypeError。大多數(shù)時(shí)候，大部分錯(cuò)誤將直接來自 JavaScript 引擎，例如 InternalError 或 SyntaxError。

JavaScript 提供了 instanceof 運(yùn)算符可以用于區(qū)分異常類型：

try {
  If (typeof x !== ‘number') {
       throw new TypeError(‘x 應(yīng)是數(shù)字');
  } else if (x <= 0) {
       throw new RangeError('x 應(yīng)大于 0');
  } else {
       // ...
  }
} catch (err) {
    if (err instanceof TypeError) {
      // 處理 TypeError 錯(cuò)誤
    } else if (err instanceof RangeError) {
      // 處理 RangeError 錯(cuò)誤
  } else {
      // 處理其他類型錯(cuò)誤
  }
}

下面來了解 JavaScript 中最常見的錯(cuò)誤類型，并了解它們發(fā)生的時(shí)間和原因。

（1）SyntaxError

SyntaxError 表示語法錯(cuò)誤。這些錯(cuò)誤是最容易修復(fù)的錯(cuò)誤之一，因?yàn)樗鼈儽砻鞔a語法中存在錯(cuò)誤。由于 JavaScript 是一種解釋而非編譯的腳本語言，因此當(dāng)應(yīng)用程序執(zhí)行包含錯(cuò)誤的腳本時(shí)會(huì)拋出這些錯(cuò)誤。在編譯語言的情況下，此類錯(cuò)誤在編譯期間被識(shí)別。因此，在修復(fù)這些問題之前，不會(huì)創(chuàng)建應(yīng)用程序二進(jìn)制文件。

SyntaxError 發(fā)生的一些常見原因是：

• 缺少引號(hào)
• 缺少右括號(hào)
• 大括號(hào)或其他字符對(duì)齊不當(dāng)

（2）TypeError

TypeError 是 JavaScript 應(yīng)用程序中最常見的錯(cuò)誤之一，當(dāng)某些值不是特定的預(yù)期類型時(shí)，就會(huì)產(chǎn)生此錯(cuò)誤。

TypeError 發(fā)生的一些常見原因是：

• 調(diào)用不是方法的對(duì)象。
• 試圖訪問 null 或未定義對(duì)象的屬性
• 將字符串視為數(shù)字，反之亦然

（3）ReferenceError

ReferenceError 表示引用錯(cuò)誤。當(dāng)代碼中的變量引用有問題時(shí)，會(huì)發(fā)生 ReferenceError。可能忘記在使用變量之前為其定義一個(gè)值，或者可能試圖在代碼中使用一個(gè)不可訪問的變量。在任何情況下，通過堆棧跟蹤都可以提供充足的信息來查找和修復(fù)有問題的變量引用。

ReferenceErrors 發(fā)生的一些常見原因如下：

• 在變量名中輸入錯(cuò)誤。
• 試圖訪問其作用域之外的塊作用域變量。
• 在加載之前從外部庫引用全局變量。

（4）RangeError

RangeError 表示范圍錯(cuò)誤。當(dāng)變量設(shè)置的值超出其合法值范圍時(shí)，將拋出 RangeError。它通常發(fā)生在將值作為參數(shù)傳遞給函數(shù)時(shí)，并且給定值不在函數(shù)參數(shù)的范圍內(nèi)。當(dāng)使用記錄不完整的第三方庫時(shí)，有時(shí)修復(fù)起來會(huì)很棘手，因?yàn)樾枰绤?shù)的可能值范圍才能傳遞正確的值。

RangeError 發(fā)生的一些常見場(chǎng)景如下：

• 試圖通過 Array 構(gòu)造函數(shù)創(chuàng)建非法長(zhǎng)度的數(shù)組。
• 將錯(cuò)誤的值傳遞給數(shù)字方法，例如 toExponential()、toPrecision()、toFixed() 等。
• 將非法值傳遞給字符串函數(shù)，例如 normalize()。

（5）URIError

URIError 表示 URI錯(cuò)誤。當(dāng) URI 的編碼和解碼出現(xiàn)問題時(shí)，會(huì)拋出 URIError。JavaScript 中的 URI 操作函數(shù)包括：decodeURI、decodeURIComponent 等。如果使用了錯(cuò)誤的參數(shù)（無效字符），就會(huì)拋出 URIError。

（6）EvalError

EvalError 表示 Eval 錯(cuò)誤。當(dāng) eval() 函數(shù)調(diào)用發(fā)生錯(cuò)誤時(shí)，會(huì)拋出 EvalError。不過，當(dāng)前的 JavaScript 引擎或 ECMAScript 規(guī)范不再拋出此錯(cuò)誤。但是，為了向后兼容，它仍然是存在的。

如果使用的是舊版本的 JavaScript，可能會(huì)遇到此錯(cuò)誤。在任何情況下，最好調(diào)查在eval()函數(shù)調(diào)用中執(zhí)行的代碼是否有任何異常。

（7）InternalError

InternalError 表示內(nèi)部錯(cuò)誤。在 JavaScript 運(yùn)行時(shí)引擎發(fā)生異常時(shí)使用。它表示代碼可能存在問題也可能不存在問題。

InternalError 通常只發(fā)生在兩種情況下：

• 當(dāng) JavaScript 運(yùn)行時(shí)的補(bǔ)丁或更新帶有引發(fā)異常的錯(cuò)誤時(shí)（這種情況很少發(fā)生）；
• 當(dāng)代碼包含對(duì)于 JavaScript 引擎而言太大的實(shí)體時(shí)（例如，數(shù)組初始值設(shè)定項(xiàng)太大、遞歸太多）。

解決此錯(cuò)誤最合適的方法就是通過錯(cuò)誤消息確定原因，并在可能的情況下重構(gòu)應(yīng)用邏輯，以消除 JavaScript 引擎上工作負(fù)載的突然激增。

**注意：**現(xiàn)代 JavaScript 中不會(huì)拋出 EvalError 和 InternalError。

（8）創(chuàng)建自定義錯(cuò)誤類型

雖然 JavaScript 提供了足夠的錯(cuò)誤類型類列表來涵蓋大多數(shù)情況，但如果這些錯(cuò)誤類型不能滿足要求，還可以創(chuàng)建新的錯(cuò)誤類型。這種靈活性的基礎(chǔ)在于 JavaScript 允許使用 throw 命令拋出任何內(nèi)容。

可以通過擴(kuò)展 Error 類以創(chuàng)建自定義錯(cuò)誤類：

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

可以通過以下方式使用它：

throw ValidationError("未找到該屬性: name")

可以使用 instanceof 關(guān)鍵字識(shí)別它：

try {
    validateForm() // 拋出 ValidationError 的代碼
} catch (e) {
    if (e instanceof ValidationError) {
      
    }
    else {
      
    }
}

3. 拋出錯(cuò)誤

很多人認(rèn)為錯(cuò)誤和異常是一回事。實(shí)際上，Error 對(duì)象只有在被拋出時(shí)才會(huì)成為異常。

在 JavaScript 中拋出異常，可以使用 throw 來拋出 Error 對(duì)象：

throw TypeError("Expected number");

或者：

throw new TypeError("Expected number");

來看一個(gè)簡(jiǎn)單的例子：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

在這里，我們檢查函數(shù)參數(shù)是否為字符串。如果不是，就拋出異常。

從技術(shù)上講，我們可以在 JavaScript 中拋出任何東西，而不僅僅是 Error 對(duì)象：

throw Symbol();
throw 33;
throw "Error!";
throw null;

但是，最好避免這樣做：要拋出正確的 Error 對(duì)象，而不是原語。

4. 拋出異常時(shí)會(huì)發(fā)生什么？

異常一旦拋出，就會(huì)在程序堆棧中冒泡，除非在某個(gè)地方被捕獲。

來看下面的例子：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

在瀏覽器或 Node.js 中運(yùn)行此代碼，程序?qū)⑼Ｖ共伋鲥e(cuò)誤：

這里還顯示了發(fā)生錯(cuò)誤的確切行。這個(gè)錯(cuò)誤就是一個(gè)堆棧跟蹤，有助于跟蹤代碼中的問題。堆棧跟蹤從下到上：

at toUppercase (<anonymous>:3:11)
at <anonymous>:9:1

toUppercase 函數(shù)在第 9 行調(diào)用，在第 3 行拋出錯(cuò)誤。除了在瀏覽器的控制臺(tái)中查看此堆棧跟蹤之外，還可以在 Error 對(duì)象的 stack 屬性上面訪問它。

介紹完這些關(guān)于錯(cuò)誤的基礎(chǔ)知識(shí)之后，下面來看看同步和異步 JavaScript 代碼中的錯(cuò)誤和異常處理。

5. 同步錯(cuò)誤處理

（1）常規(guī)函數(shù)的錯(cuò)誤處理

同步代碼會(huì)按照代碼編寫順序執(zhí)行。讓我們?cè)倏纯辞懊娴睦樱?/p>

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

在這里，引擎調(diào)用并執(zhí)行 toUppercase，這一切都是同步發(fā)生的。 要捕獲由此類同步函數(shù)引發(fā)的異常，可以使用 try/catch/finally：

try {
  toUppercase(4);
} catch (error) {
  console.error(error.message);
} finally {
  // ...
}

通常，try 會(huì)處理正常的路徑，或者可能進(jìn)行的函數(shù)調(diào)用。catch 就會(huì)捕獲實(shí)際的異常，它接收 Error 對(duì)象。而不管函數(shù)的結(jié)果如何，finally 語句都會(huì)運(yùn)行：無論它失敗還是成功，finally 中的代碼都會(huì)運(yùn)行。

（2）生成器函數(shù)的錯(cuò)誤處理

JavaScript 中的生成器函數(shù)是一種特殊類型的函數(shù)。它可以隨意暫停和恢復(fù)，除了在其內(nèi)部范圍和消費(fèi)者之間提供雙向通信通道。為了創(chuàng)建一個(gè)生成器函數(shù)，需要在 function 關(guān)鍵字后面加上一個(gè) *：

function* generate() {
//
}

只要進(jìn)入函數(shù)，就可以使用 yield 來返回值：

function* generate() {
  yield 33;
  yield 99;
}

生成器函數(shù)的返回值是一個(gè)迭代器對(duì)象。要從生成器中提取值，可以使用兩種方法：

• 在迭代器對(duì)象上調(diào)用 next()
• 使用 for...of 進(jìn)行迭代

以上面的代碼為例，要從生成器中獲取值，可以這樣做：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

當(dāng)我們調(diào)用生成器函數(shù)時(shí)，這里的 go 就是生成的迭代器對(duì)象。接下來，就可以調(diào)用 go.next() 來繼續(xù)執(zhí)行：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

const firstStep = go.next().value; // 33
const secondStep = go.next().value; // 99

生成器也可以接受來自調(diào)用者的值和異常。除了 next()，從生成器返回的迭代器對(duì)象還有一個(gè) throw() 方法。使用這種方法，就可以通過向生成器中注入異常來停止程序：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

const firstStep = go.next().value; // 33

go.throw(Error("Tired of iterating!"));

const secondStep = go.next().value; // never reached

要捕獲此類錯(cuò)誤，可以使用 try/catch 將代碼包裝在生成器中：

function* generate() {
  try {
    yield 33;
    yield 99;
  } catch (error) {
    console.error(error.message);
  }
}

生成器函數(shù)也可以向外部拋出異常。 捕獲這些異常的機(jī)制與捕獲同步異常的機(jī)制相同：try/catch/finally。

下面是使用 for...of 從外部使用的生成器函數(shù)的示例：

function* generate() {
  yield 33;
  yield 99;
  throw Error("Tired of iterating!");
}

try {
  for (const value of generate()) {
    console.log(value);
  }
} catch (error) {
  console.error(error.message);
}

輸出結(jié)果：

這里，try 塊中包含正常的迭代。如果發(fā)生任何異常，就會(huì)用 catch 停止它。

6. 異步錯(cuò)誤處理

瀏覽器中的異步包括定時(shí)器、事件、Promise 等。異步世界中的錯(cuò)誤處理與同步世界中的處理不同。下面來看一些例子。

（1）定時(shí)器的錯(cuò)誤處理

上面我們介紹了如何使用 try/catch/finally 來處理錯(cuò)誤，那異步中可以使用這些來處理錯(cuò)誤嗎？先來看一個(gè)例子：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Wrong!");
  }, 1000);
}

此函數(shù)在大約 1 秒后會(huì)拋出錯(cuò)誤。那處理此異常的正確方法是什么？以下代碼是無效的：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Wrong!");
  }, 1000);
}

try {
  failAfterOneSecond();
} catch (error) {
  console.error(error.message);
}

我們知道，try/catch是同步的，所以沒辦法這樣來處理異步中的錯(cuò)誤。當(dāng)傳遞給 setTimeout的回調(diào)運(yùn)行時(shí)，try/catch 早已執(zhí)行完畢。程序?qū)?huì)崩潰，因?yàn)槲茨懿东@異常。它們是在兩條路徑上執(zhí)行的：

A: --> try/catch
B: --> setTimeout --> callback --> throw

（2）事件的錯(cuò)誤處理

我們可以監(jiān)聽頁面中任何 HTML 元素的事件，DOM 事件的錯(cuò)誤處理機(jī)制遵循與任何異步 Web API 相同的方案。

來看下面的例子：

const button = document.querySelector("button");

button.addEventListener("click", function() {
  throw Error("error");
});

這里，在單擊按鈕后立即拋出了異常，我們?cè)撊绾尾东@這個(gè)異常呢？這樣寫是不起作用的，也不會(huì)阻止程序崩潰：

const button = document.querySelector("button");

try {
  button.addEventListener("click", function() {
    throw Error("error");
  });
} catch (error) {
  console.error(error.message);
}

與前面的 setTimeout 例子一樣，任何傳遞給 addEventListener 的回調(diào)都是異步執(zhí)行的：

Track A: --> try/catch
Track B: --> addEventListener --> callback --> throw

如果不想讓程序崩潰，為了正確處理錯(cuò)誤，就必須將 try/catch 放到 addEventListener 的回調(diào)中。不過這樣做并不是最佳的處理方式，與 setTimeout 一樣，異步代碼路徑拋出的異常無法從外部捕獲，并且會(huì)使程序崩潰。

下面會(huì)介紹 Promises 和 async/await 是如何簡(jiǎn)化異步代碼的錯(cuò)誤處理的。

（3）onerror

HTML 元素有許多事件處理程序，例如 onclick、onmouseenter、onchange 等。除此之外，還有 onerror，每當(dāng) <img> 標(biāo)簽或 <script> 等 HTML 元素命中不存在的資源時(shí)，onerror 事件處理程序就會(huì)觸發(fā)。

來看下面的例子：

<body>
  <img src="nowhere-to-be-found.png">
</body>

當(dāng)訪問的資源缺失時(shí)，瀏覽器的控制臺(tái)就會(huì)報(bào)錯(cuò)：

GET http://localhost:5000/nowhere-to-be-found.png
[HTTP/1.1 404 Not Found 3ms]

在 JavaScript 中，可以使用適當(dāng)?shù)氖录幚沓绦?ldquo;捕獲”此錯(cuò)誤：

const image = document.querySelector("img");

image.onerror = function(event) {
  console.log(event);
};

或者使用 addEventListener 來監(jiān)聽 error 事件，當(dāng)發(fā)生錯(cuò)誤時(shí)進(jìn)行處理：

const image = document.querySelector("img");

image.addEventListener("error", function(event) {
  console.log(event);
});

此模式對(duì)于加載備用資源以代替丟失的圖像或腳本很有用。不過需要記?。簅nerror 與 throw 或 try/catch 是無關(guān)的。

（4）Promise 的錯(cuò)誤處理

下面來通過最上面的 toUppercase 例子看看 Promise 是如何處理錯(cuò)誤的：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

對(duì)上面的代碼進(jìn)行修改，不返回簡(jiǎn)單的字符串或異常，而是分別使用 Promise.reject 和 Promise.resolve 來處理錯(cuò)誤和成功：

function toUppercase(string) {
  if (typeof string !== "string") {
    return Promise.reject(TypeError("Expected string"));
  }

  const result = string.toUpperCase();

  return Promise.resolve(result);
}

從技術(shù)上講，這段代碼中沒有任何異步的內(nèi)容，但它可以很好地說明 Promise 的錯(cuò)誤處理機(jī)制。

現(xiàn)在我們就可以在 then 中使用結(jié)果，并使用 catch 來處理被拒絕的 Promise：

toUppercase(99)
  .then(result => result)
  .catch(error => console.error(error.message));

執(zhí)行結(jié)果如下：

在 Promise 中，catch 是用來處理錯(cuò)誤的。除了 catch 還有 finally，類似于 try/catch 中的finally。不管 Promise 結(jié)果如何，finally 都會(huì)執(zhí)行：

toUppercase(99)
  .then(result => result)
  .catch(error => console.error(error.message))
  .finally(() => console.log("Finally"));

執(zhí)行結(jié)果如下：

需要記住，任何傳遞給 then/catch/finally 的回調(diào)都是由微任務(wù)隊(duì)列異步處理的。 它們是微任務(wù)，優(yōu)先于事件和計(jì)時(shí)器等宏任務(wù)。

（5）Promise, error, throw

作為拒絕 Promise 時(shí)的最佳實(shí)踐，可以傳入 error 對(duì)象：

Promise.reject(TypeError("Expected string"));

這樣，在整個(gè)代碼庫中保持錯(cuò)誤處理的一致性。 其他團(tuán)隊(duì)成員總是可以訪問 error.message，更重要的是可以檢查堆棧跟蹤。

除了 Promise.reject 之外，還可以通過拋出異常來退出 Promise 執(zhí)行鏈。來看下面的例子：

Promise.resolve("A string").then(value => {
  if (typeof value === "string") {
    throw TypeError("Expected number!");
  }
});

這里使用 字符串來 resolve 一個(gè) Promise，然后執(zhí)行鏈立即使用 throw 斷開。為了停止異常的傳播，可以使用 catch 來捕獲錯(cuò)誤：

Promise.resolve("A string")
  .then(value => {
    if (typeof value === "string") {
      throw TypeError("Expected number!");
    }
  })
  .catch(reason => console.log(reason.message));

這種模式在 fetch 中很常見，可以通過檢查 response 對(duì)象來查找錯(cuò)誤：

fetch("https://example-dev/api/")
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }

    return response.json();
  })
  .then(json => console.log(json));

這里的異?？梢允褂?catch 來攔截。 如果失敗了，并且沒有攔截它，異常就會(huì)在堆棧中向上冒泡。這本身并沒有什么問題，但不同的環(huán)境對(duì)未捕獲的拒絕有不同的反應(yīng)。

例如，Node.js 會(huì)讓任何未處理 Promise 拒絕的程序崩潰：

DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

所以，最好去捕獲錯(cuò)誤。

（6）使用 Promise 處理定時(shí)器錯(cuò)誤

對(duì)于計(jì)時(shí)器或事件，不能捕獲回調(diào)拋出的異常。上面有一個(gè)例子：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Error");
  }, 1000);
}

// 不生效
try {
  failAfterOneSecond();
} catch (error) {
  console.error(error.message);
}

我們可以使用 Promise 來包裝計(jì)時(shí)器：

function failAfterOneSecond() {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(Error("Error"));
    }, 1000);
  });
}

這里通過 reject 捕獲了一個(gè) Promise 拒絕，它帶有一個(gè) error 對(duì)象。此時(shí)就可以用 catch 來處理異常了：

failAfterOneSecond().catch(reason => console.error(reason.message));

這里使用 value 作為 Promise 的返回值，使用 reason 作為拒絕的返回對(duì)象。

（7）Promise.all 的錯(cuò)誤處理

Promise.all 方法接受一個(gè) Promise 數(shù)組，并返回所有解析 Promise 的結(jié)果數(shù)組：

const promise1 = Promise.resolve("one");
const promise2 = Promise.resolve("two");

Promise.all([promise1, promise2]).then((results) => console.log(results));

// 結(jié)果： ['one', 'two']

如果這些 Promise 中的任何一個(gè)被拒絕，Promise.all 將拒絕并返回第一個(gè)被拒絕的 Promise 的錯(cuò)誤。

為了在 Promise.all 中處理這些情況，可以使用 catch：

const promise1 = Promise.resolve("good");
const promise2 = Promise.reject(Error("Bad"));
const promise3 = Promise.reject(Error("Bad+"));

Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error.message));

如果想要運(yùn)行一個(gè)函數(shù)而不考慮 Promise.all 的結(jié)果，可以使用 finally：

Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error.message))
  .finally(() => console.log("Finally"));

（8）Promise.any 的錯(cuò)誤處理

Promise.any 和 Promise.all 恰恰相反。Promise.all 如果某一個(gè)失敗，就會(huì)拋出第一個(gè)失敗的錯(cuò)誤。而 Promise.any 總是返回第一個(gè)成功的 Promise，無論是否發(fā)生任何拒絕。

相反，如果傳遞給 Promise.any 的所有 Promise 都被拒絕，那產(chǎn)生的錯(cuò)誤就是 AggregateError。 來看下面的例子：

const promise1 = Promise.reject(Error("Error"));
const promise2 = Promise.reject(Error("Error+"));

Promise.any([promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Finally"));

執(zhí)行結(jié)果如下：

這里用 catch 處理錯(cuò)誤。AggregateError 對(duì)象具有與基本錯(cuò)誤相同的屬性，外加一個(gè) errors 屬性：

const promise1 = Promise.reject(Error("Error"));
const promise2 = Promise.reject(Error("Error+"));

Promise.any([promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error.errors))
  .finally(() => console.log("Finally"));

此屬性是一個(gè)包含所有被拒絕的錯(cuò)誤信息的數(shù)組：

（9）Promise.race 的錯(cuò)誤處理

Promise.race 接受一個(gè) Promise 數(shù)組，并返回第一個(gè)成功的 Promise 的結(jié)果：

const promise1 = Promise.resolve("one");
const promise2 = Promise.resolve("two");

Promise.race([promise1, promise2]).then(result => 
  console.log(result)
);

// 結(jié)果：one

那如果有被拒絕的 Promise，但它不是傳入數(shù)組中的第一個(gè)呢：

const promise1 = Promise.resolve("one");
const rejection = Promise.reject(Error("Bad"));
const promise2 = Promise.resolve("two");

Promise.race([promise1, rejection, promise2]).then(result =>
  console.log(result)
);

// 結(jié)果：one

這樣結(jié)果還是 one，不會(huì)影響正常的執(zhí)行。

如果被拒絕的 Promise 是數(shù)組的第一個(gè)元素，則 Promise.race 拒絕，就必須要必須捕獲拒絕：

const promise1 = Promise.resolve("one");
const rejection = Promise.reject(Error("Bad"));
const promise2 = Promise.resolve("two");

Promise.race([rejection, promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error.message));

// Bad

（10）Promise.allSettled 的錯(cuò)誤處理

Promise.allSettled 是 ECMAScript 2020 新增的 API。它和 Promise.all 類似，不過不會(huì)被短路，也就是說當(dāng)Promise全部處理完成后，可以拿到每個(gè) Promise 的狀態(tài), 而不管其是否處理成功。

來看下面的例子：

const promise1 = Promise.resolve("Good!");
const promise2 = Promise.reject(Error("Bad!"));

Promise.allSettled([promise1, promise2])
  .then(results => console.log(results))
  .catch(error => console.error(error))
  .finally(() => console.log("Finally"));

這里向 Promise.allSettled 傳遞了一個(gè)包含兩個(gè) Promise 的數(shù)組：一個(gè)已解決，另一個(gè)已拒絕。

輸出結(jié)果如下：

（11）async/await 的錯(cuò)誤處理

JavaScript 中的 async/await 表示異步函數(shù)，用同步的方式去編寫異步，可讀性更好。

下面來改編上面的同步函數(shù) toUppercase，通過將 async 放在 function 關(guān)鍵字之前將其轉(zhuǎn)換為異步函數(shù)：

async function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

只需在 function 前加上 async 前綴，就可以讓函數(shù)返回一個(gè) Promise。這意味著我們可以在函數(shù)調(diào)用之后鏈?zhǔn)秸{(diào)用 then、catch 和 finally：

toUppercase("hello")
  .then(result => console.log(result))
  .catch(error => console.error(error.message))
  .finally(() => console.log("Always runs!"));

當(dāng)從 async 函數(shù)中拋出異常時(shí)，異常會(huì)成為底層 Promise 被拒絕的原因。任何錯(cuò)誤都可以從外部用 catch 攔截。

除此之外，還可以使用 try/catch/finally 來處理錯(cuò)誤，就像在同步函數(shù)中一樣。

例如，從另一個(gè)函數(shù) consumer 中調(diào)用 toUppercase，它方便地用 try/catch/finally 包裝了函數(shù)調(diào)用：

async function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

async function consumer() {
  try {
    await toUppercase(98);
  } catch (error) {
    console.error(error.message);
  } finally {
    console.log("Finally");
  }
}

consumer();

執(zhí)行結(jié)果如下：

（12）異步生成器的錯(cuò)誤處理

JavaScript 中的異步生成器是能夠生成 Promise 而不是簡(jiǎn)單值的生成器函數(shù)。它將生成器函數(shù)與異步相結(jié)合，結(jié)果是一個(gè)生成器函數(shù)，其迭代器對(duì)象向消費(fèi)者公開一個(gè) Promise。

要?jiǎng)?chuàng)建一個(gè)異步生成器，需要聲明一個(gè)帶有星號(hào) * 的生成器函數(shù)，前綴為 async：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad!"); // Promise.reject
}

因?yàn)楫惒缴善魇腔?Promise，所以同樣適用 Promise 的錯(cuò)誤處理規(guī)則，在異步生成器中，throw 會(huì)導(dǎo)致 Promise 拒絕，可以用 catch 攔截它。

要想從異步生成器處理 Promise，可以使用 then：

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));
go.next().catch(reason => console.error(reason.message));

執(zhí)行結(jié)果如下：

也使用異步迭代 for await...of。 要使用異步迭代，需要用 async 函數(shù)包裝 consumer：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad"); // Promise.reject
}

async function consumer() {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
}

consumer();

與 async/await 一樣，可以使用 try/catch 來處理任何異常：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad"); // Promise.reject
}

async function consumer() {
  try {
    for await (const value of asyncGenerator()) {
      console.log(value);
    }
  } catch (error) {
    console.error(error.message);
  }
}

consumer();

輸出結(jié)果如下：

從異步生成器函數(shù)返回的迭代器對(duì)象也有一個(gè) throw() 方法。在這里對(duì)迭代器對(duì)象調(diào)用 throw() 不會(huì)拋出異常，而是 Promise 拒絕：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  yield 11;
}

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));

go.throw(Error("Reject!"));

go.next().then(value => console.log(value)); 

輸出結(jié)果如下：

可以通過以下方式來捕獲錯(cuò)誤：

go.throw(Error("Let's reject!")).catch(reason =>
  console.error(reason.message)
);

我們知道，迭代器對(duì)象的 throw() 是在生成器內(nèi)部發(fā)送異常的。所以還可以使用以下方式來處理錯(cuò)誤：

async function* asyncGenerator() {
  try {
    yield 33;
    yield 99;
    yield 11;
  } catch (error) {
    console.error(error.message);
  }
}

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));

go.throw(Error("Reject!"));

go.next().then(value => console.log(value));

5. Node.js 錯(cuò)誤處理

（1）同步錯(cuò)誤處理

Node.js 中的同步錯(cuò)誤處理與 JavaScript 是一樣的，可以使用 try/catch/finally。

（2）異步錯(cuò)誤處理：回調(diào)模式

對(duì)于異步代碼，Node.js 強(qiáng)烈依賴兩個(gè)術(shù)語：

• 事件發(fā)射器
• 回調(diào)模式

在回調(diào)模式中，異步 Node.js API 接受一個(gè)函數(shù)，該函數(shù)通過事件循環(huán)處理并在調(diào)用堆棧為空時(shí)立即執(zhí)行。

來看下面的例子：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) console.error(error);
    // data操作
  });
}

這里可以看到回調(diào)中錯(cuò)誤處理：

function(error, data) {
    if (error) console.error(error);
    // data操作
}

如果使用 fs.readFile 讀取給定路徑時(shí)出現(xiàn)任何錯(cuò)誤，我們都會(huì)得到一個(gè) error 對(duì)象。這時(shí)我們可以：

• 單地記錄錯(cuò)誤對(duì)象。
• 拋出異常。
• 將錯(cuò)誤傳遞給另一個(gè)回調(diào)。

要想拋出異常，可以這樣做：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) throw Error(error.message);
    // data操作
  });
}

但是，與 DOM 中的事件和計(jì)時(shí)器一樣，這個(gè)異常會(huì)使程序崩潰。 使用 try/catch 停止它的嘗試將不起作用：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) throw Error(error.message);
    // data操作
  });
}

try {
  readDataset("not-here.txt");
} catch (error) {
  console.error(error.message);
}

如果不想讓程序崩潰，可以將錯(cuò)誤傳遞給另一個(gè)回調(diào)：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) return errorHandler(error);
    // data操作
  });
}

這里的 errorHandler 是一個(gè)簡(jiǎn)單的錯(cuò)誤處理函數(shù)：

function errorHandler(error) {
  console.error(error.message);
  // 處理錯(cuò)誤：寫入日志、發(fā)送到外部logger
}

（3）異步錯(cuò)誤處理：事件發(fā)射器

Node.js 中的大部分工作都是基于事件的。大多數(shù)時(shí)候，我們會(huì)與發(fā)射器對(duì)象和一些偵聽消息的觀察者進(jìn)行交互。

Node.js 中的任何事件驅(qū)動(dòng)模塊（例如 net）都擴(kuò)展了一個(gè)名為 EventEmitter 的根類。EventEmitter 有兩個(gè)基本方法：on 和 emit。

下面來看一個(gè)簡(jiǎn)單的 HTTP 服務(wù)器：

const net = require("net");

const server = net.createServer().listen(8081, "127.0.0.1");

server.on("listening", function () {
  console.log("Server listening!");
});

server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});

這里我們監(jiān)聽了兩個(gè)事件：listening 和 connection。除了這些事件之外，事件發(fā)射器還公開一個(gè)錯(cuò)誤事件，在出現(xiàn)錯(cuò)誤時(shí)觸發(fā)。

如果這段代碼監(jiān)聽的端口是 80，就會(huì)得到一個(gè)異常：

const net = require("net");

const server = net.createServer().listen(80, "127.0.0.1");

server.on("listening", function () {
  console.log("Server listening!");
});

server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});

輸出結(jié)果如下：

events.js:291
      throw er;
      ^

Error: listen EACCES: permission denied 127.0.0.1:80
Emitted 'error' event on Server instance at: ...

 為了捕獲它，可以為 error 注冊(cè)一個(gè)事件處理函數(shù)：

server.on("error", function(error) {
  console.error(error.message);
});

這樣就會(huì)輸出：

listen EACCES: permission denied 127.0.0.1:80

6. 異常處理最佳實(shí)踐

最后，我們來看看處理 JavaScript 異常的最佳實(shí)踐！

（1）不要過度處理異常

異常處理的第一個(gè)最佳實(shí)踐就是不要過度使用“異常處理”。通常，我們會(huì)在外層處理異常，從內(nèi)層拋出異常，這樣一旦發(fā)生異常，就可以更好地理解是什么原因?qū)е碌摹?/p>

然而，開發(fā)人員常犯的錯(cuò)誤之一是過度使用異常處理。有時(shí)這樣做是為了讓代碼在不同的文件和方法中看起來保持一致。但是，不幸的是，這些會(huì)對(duì)應(yīng)用程序和錯(cuò)誤檢測(cè)造成不利影響。

因此，只關(guān)注代碼中可能導(dǎo)致錯(cuò)誤的地方，異常處理將有助于提高代碼健壯性并增加檢測(cè)到錯(cuò)誤的機(jī)會(huì)。

（2）避免瀏覽器特定的非標(biāo)準(zhǔn)方法

盡管許多瀏覽器都遵循一個(gè)通用標(biāo)準(zhǔn)，但某些特定于瀏覽器的 JavaScript 實(shí)現(xiàn)在其他瀏覽器上卻失敗了。例如，以下語法僅適用于 Firefox。

catch(e) { 
  console.error(e.filename + ': ' + e.lineNumber); 
}

因此，在處理異常時(shí)，盡可能使用跨瀏覽器友好的 JavaScript 代碼。

（3）遠(yuǎn)程異常記錄

當(dāng)發(fā)生異常時(shí)，我們應(yīng)該得到通知以了解出了什么問題。這就是異常日志的用武之地。JavaScript 代碼是在用戶的瀏覽器中執(zhí)行的。因此，我們需要一種機(jī)制來跟蹤客戶端瀏覽器中的這些錯(cuò)誤，并將它們發(fā)送到服務(wù)器進(jìn)行分析。

可以嘗試使用以下工具來監(jiān)控并上報(bào)錯(cuò)誤：

• Sentry（sentry.io/）： 專注于異常（應(yīng)用崩潰）而不是信息錯(cuò)誤。它提供了應(yīng)用中錯(cuò)誤的完整概述，包括受影響的用戶數(shù)量、調(diào)用堆棧、受影響的瀏覽器以及導(dǎo)致錯(cuò)誤的提交等詳細(xì)信息。
• Rollbar（rollbar.com/）： 用于前端、后端和移動(dòng)應(yīng)用的無代理錯(cuò)誤監(jiān)控工具。它提供人工智能輔助的工作流程，使開發(fā)人員能夠在錯(cuò)誤影響用戶之前立即采取行動(dòng)。它會(huì)顯示受錯(cuò)誤影響的客戶數(shù)量、受影響的平臺(tái)或?yàn)g覽器的類型以及之前是否發(fā)生過類似錯(cuò)誤或是否已經(jīng)存在解決方案等數(shù)據(jù)。

（4）錯(cuò)誤處理中間件（Node.js）

Node.js 環(huán)境支持使用中間件向服務(wù)端應(yīng)用中添加功能。因此可以創(chuàng)建一個(gè)錯(cuò)誤處理中間件。使用中間件的最大好處是所有錯(cuò)誤都在一個(gè)地方集中處理?？梢赃x擇啟用/禁用此設(shè)置以輕松進(jìn)行測(cè)試。

以下是創(chuàng)建基本中間件的方法：

const logError = err => {
    console.log("ERROR: " + String(err))
}

const errorLoggerMiddleware = (err, req, res, next) => {
    logError(err)
    next(err)
}

const returnErrorMiddleware = (err, req, res, next) => {
    res.status(err.statusCode || 500)
       .send(err.message)
}

module.exports = {
    logError,
    errorLoggerMiddleware,
    returnErrorMiddleware
}

可以像下面這樣在應(yīng)用中使用此中間件：

const { errorLoggerMiddleware, returnErrorMiddleware } = require('./errorMiddleware')

app.use(errorLoggerMiddleware)

app.use(returnErrorMiddleware)

現(xiàn)在可以在中間件內(nèi)定義自定義邏輯以適當(dāng)?shù)靥幚礤e(cuò)誤。而無需再擔(dān)心在整個(gè)代碼庫中實(shí)現(xiàn)單獨(dú)的錯(cuò)誤處理結(jié)構(gòu)。

（5）捕獲所有未捕獲的異常（Node.js）

我們可能永遠(yuǎn)無法涵蓋應(yīng)用中可能發(fā)生的所有錯(cuò)誤。因此，必須實(shí)施回退策略以捕獲應(yīng)用中所有未捕獲的異常。

可以這樣做：

process.on('uncaughtException', error => {
    console.log("ERROR: " + String(error))
    // 其他處理機(jī)制
})

還可以確定發(fā)生的錯(cuò)誤是標(biāo)準(zhǔn)錯(cuò)誤還是自定義操作錯(cuò)誤。根據(jù)結(jié)果，可以退出進(jìn)程并重新啟動(dòng)它以避免意外行為。

（6）捕獲所有未處理的Promise拒絕（Node.js）

與異常不同的是，promise 拒絕不會(huì)拋出錯(cuò)誤。因此，一個(gè)被拒絕的 promise 可能只是一個(gè)警告，這讓應(yīng)用有可能遇到意外行為。因此，實(shí)現(xiàn)處理 promise 拒絕的回退機(jī)制至關(guān)重要。

可以這樣做：

const promiseRejectionCallback = error => {
    console.log("PROMISE REJECTED: " + String(error))
}

process.on('unhandledRejection', callback)

參考文章

• www.valentinog.com/blog/error/
• kinsta.com/blog/errors…
• blog.bitsrc.io/javascript-…

總結(jié)

到此這篇關(guān)于JavaScript錯(cuò)誤處理的文章就介紹到這了,更多相關(guān)JS錯(cuò)誤處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論