JavaScript錯(cuò)誤處理如何實(shí)現(xiàn)
這篇“JavaScript錯(cuò)誤處理如何實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript錯(cuò)誤處理如何實(shí)現(xiàn)”文章吧。
為企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、營銷型網(wǎng)站、競(jìng)價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)建站擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！
使用 Promise 處理錯(cuò)誤
為了演示 Promise 處理方式，我們先回到一開始的那個(gè)事例：
function toUppercase(string) { if (typeof string !== "string") { throw TypeError("Wrong type given, expected a string"); } return string.toUpperCase(); } toUppercase(4);相對(duì)簡單拋出異常，我們可以使用 Promise.reject 和Promise.resolve:
function toUppercase(string) { if (typeof string !== "string") { return Promise.reject(TypeError("Wrong type given, expected a string")); } const result = string.toUpperCase(); return Promise.resolve(result); }因?yàn)槭褂昧?Promise ，所以可以使用 then 來接收返回的內(nèi)容，或者用 catch 來捕獲出現(xiàn)的錯(cuò)誤。
toUppercase(99) .then(result => result) .catch(error => console.error(error.message));
上面的執(zhí)行結(jié)果：
Wrong type given, expected a string
除了 then 和 catch , Promise 中還有 finally 方法，這類似于try/catch 中的 finally。
toUppercase(99) .then(result => result) .catch(error => console.error(error.message)) .finally(() => console.log("Run baby, run"));Promise, error, 和 throw
使用 Promise.reject 可以很方便的拋出錯(cuò)誤：
Promise.reject(TypeError("Wrong type given, expected a string"));除了Promise.reject，我們也可以通過拋出異常來退出 Promise。
考慮以下示例：
Promise.resolve("A string").then(value => { if (typeof value === "string") { throw TypeError("Expected a number!"); } });要停止異常傳播，我們照常使用catch：
Promise.resolve("A string") .then(value => { if (typeof value === "string") { throw TypeError("Expected a number!"); } }) .catch(reason => console.log(reason.message));這種模式在fetch中很常見:
fetch("https://example-dev/api/") .then(response => { if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(json => console.log(json));這里可以使用catch攔截異常。如果我們失敗了，或者決定不捕獲它，異常可以在堆棧中自由冒泡。
使用 Promise 來處理定時(shí)器中的異常
使用定時(shí)器或事件無法捕獲從回調(diào)引發(fā)的異常。
function failAfterOneSecond() { setTimeout(() => { throw Error("Something went wrong!"); }, 1000); } // DOES NOT WORK try { failAfterOneSecond(); } catch (error) { console.error(error.message); }解決方案就是使用 Promise:
function failAfterOneSecond() { return new Promise((_, reject) => { setTimeout(() => { reject(Error("Something went wrong!")); }, 1000); }); }使用reject，我們啟動(dòng)了一個(gè) Promise 拒絕，它攜帶一個(gè)錯(cuò)誤對(duì)象。
此時(shí)，我們可以使用catch處理異常:
failAfterOneSecond().catch(reason => console.error(reason.message));
使用 Promise.all 來處理錯(cuò)誤
Promise.all(iterable) 方法返回一個(gè) Promise 實(shí)例，此實(shí)例在 iterable 參數(shù)內(nèi)所有的 promise 都“完成(resolved)”或參數(shù)中不包含 promise 時(shí)回調(diào)完成(resolve);
const promise1 = Promise.resolve("All good!"); const promise2 = Promise.resolve("All good here too!"); Promise.all([promise1, promise2]).then((results) => console.log(results)); // [ 'All good!', 'All good here too!' ]如果參數(shù)中 promise 有一個(gè)失敗(rejected)，此實(shí)例回調(diào)失敗(reject)，失敗的原因是第一個(gè)失敗 promise 的結(jié)果。
const promise1 = Promise.resolve("All good!"); const promise2 = Promise.reject(Error("No good, sorry!")); const promise3 = Promise.reject(Error("Bad day ...")); Promise.all([promise1, promise2, promise3]) .then(results => console.log(results)) .catch(error => console.error(error.message)); // No good, sorry!同樣，無論P(yáng)romise.all的結(jié)果如何運(yùn)行函數(shù)，finally 都會(huì)被執(zhí)行：
Promise.all([promise1, promise2, promise3]) .then(results => console.log(results)) .catch(error => console.error(error.message)) .finally(() => console.log("Always runs!"));使用 Promise.any 來處理錯(cuò)誤
Promise.any() (Firefox > 79, Chrome > 85) 接收一個(gè) Promise 可迭代對(duì)象，只要其中的一個(gè) promise 成功，就返回那個(gè)已經(jīng)成功的 promise 。如果可迭代對(duì)象中沒有一個(gè) promise 成功(即所有的 promises 都失敗/拒絕)，就返回一個(gè)失敗的 promise 和AggregateError類型的實(shí)例，它是 Error 的一個(gè)子類，用于把單一的錯(cuò)誤集合在一起。本質(zhì)上，這個(gè)方法和Promise.all()是相反的。
const promise1 = Promise.reject(Error("No good, sorry!")); const promise2 = Promise.reject(Error("Bad day ...")); Promise.any([promise1, promise2]) .then(result => console.log(result)) .catch(error => console.error(error)) .finally(() => console.log("Always runs!"));在這里，我們使用catch處理錯(cuò)誤，輸出如下：
AggregateError: No Promise in Promise.any was resolved Always runs!
AggregateError對(duì)象具有與基本Error相同的屬性，外加errors屬性：
// .catch(error => console.error(error.errors)) //
此屬性是由reject產(chǎn)生的每個(gè)單獨(dú)錯(cuò)誤的數(shù)組
[Error: "No good, sorry!, Error: "Bad day ..."]
使用 Promise.race 來處理錯(cuò)誤
Promise.race(iterable) 方法返回一個(gè) promise，一旦迭代器中的某個(gè)promise解決或拒絕，返回的 promise就會(huì)解決或拒絕。
const promise1 = Promise.resolve("The first!"); const promise2 = Promise.resolve("The second!"); Promise.race([promise1, promise2]).then(result => console.log(result)); // The first!這里說明，第一個(gè) Promise 比第二個(gè)行執(zhí)行完。那包含拒絕的情況又是怎么樣的?
const promise1 = Promise.resolve("The first!"); const rejection = Promise.reject(Error("Ouch!")); const promise2 = Promise.resolve("The second!"); Promise.race([promise1, rejection, promise2]).then(result => console.log(result) ); // The first!如果把reject放在第一個(gè)又會(huì)怎么樣?
const promise1 = Promise.resolve("The first!"); const rejection = Promise.reject(Error("Ouch!")); const promise2 = Promise.resolve("The second!"); Promise.race([rejection, promise1, promise2]) .then(result => console.log(result)) .catch(error => console.error(error.message)); // Ouch!使用 Promise.allSettled 來處理錯(cuò)誤
Promise.allSettled()方法返回一個(gè)在所有給定的promise都已經(jīng)fulfilled或rejected后的promise，并帶有一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象表示對(duì)應(yīng)的promise結(jié)果。
考慮下面示例：
const promise1 = Promise.resolve("Good!"); const promise2 = Promise.reject(Error("No good, sorry!")); Promise.allSettled([promise1, promise2]) .then(results => console.log(results)) .catch(error => console.error(error)) .finally(() => console.log("Always runs!"));我們傳遞給Promise.allSettled一個(gè)由兩個(gè)Promise組成的數(shù)組：一個(gè)已解決，另一個(gè)被拒絕。
這種情況 catch 不會(huì)被執(zhí)行， finally 永遠(yuǎn)會(huì)執(zhí)行。
[ { status: 'fulfilled', value: 'Good!' }, { status: 'rejected', reason: Error: No good, sorry! } ]使用 async/await 來處理錯(cuò)誤
為了簡單起見，我們使用前面的同步函數(shù)toUppercase，并通過在function關(guān)鍵字前放置async來將其轉(zhuǎn)換為異步函數(shù)
async function toUppercase(string) { if (typeof string !== "string") { throw TypeError("Wrong type given, expected a string"); } return string.toUpperCase(); }只要在函數(shù)前面加上async，該函數(shù)就會(huì)返回一個(gè)Promise。這意味著我們可以在函數(shù)調(diào)用之后進(jìn)行then、catch和finally 操作
async function toUppercase(string) { if (typeof string !== "string") { throw TypeError("Wrong type given, expected a string"); } return string.toUpperCase(); } toUppercase("abc") .then(result => console.log(result)) .catch(error => console.error(error.message)) .finally(() => console.log("Always runs!"));當(dāng)從 async 函數(shù)拋出異常時(shí)，我們就可以使用 catch 來捕獲。
最重要的是，除了這種方式外，我們可以還使用try/catch/finally，就像我們使用同步函數(shù)所做的一樣。
async function toUppercase(string) { if (typeof string !== "string") { throw TypeError("Wrong type given, expected a string"); } return string.toUpperCase(); } async function consumer() { try { await toUppercase(98); } catch (error) { console.error(error.message); } finally { console.log("Always runs!"); } } consumer();輸出：
Wrong type given, expected a string Always runs!
使用 async generators 來處理錯(cuò)誤
JavaScript中的async generators是能夠生成 Promises 而不是簡單值的生成器函數(shù)。
async function* asyncGenerator() { yield 33; yield 99; throw Error("Something went wrong!"); // Promise.reject }基于 Promise，此處適用于錯(cuò)誤處理的相同規(guī)則。在異步生成器中 throw 將會(huì)觸發(fā) Promise 的reject，我們可以使用catch對(duì)其進(jìn)行攔截。
為了使用異步生成器的 Promise，我們可以這樣做：
then 方法
異步遍歷
從上面我們知道，在兩次調(diào)用 yield之后，下一次會(huì)拋出一個(gè)異常：
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));
輸出結(jié)果：
{ value: 33, done: false } { value: 99, done: false } Something went wrong!別一種是使用 異步遍歷與for await...of:
async function* asyncGenerator() { yield 33; yield 99; throw Error("Something went wrong!"); // 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("Something went wrong!"); // Promise.reject } async function consumer() { try { for await (const value of asyncGenerator()) { console.log(value); } } catch (error) { console.error(error.message); } } consumer();輸出結(jié)果：
33 99 Something went wrong!
從異步生成器函數(shù)返回的迭代器對(duì)象也具有throw()方法，非常類似于其同步副本。在此處的迭代器對(duì)象上調(diào)用throw()不會(huì)引發(fā)異常，但是會(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("Let's reject!")); go.next().then(value => console.log(value)); // value is undefined要從外部處理這種情況，我們可以做：
go.throw(Error("Let's reject!")).catch(reason => console.error(reason.message));Node 中的錯(cuò)誤處理
Node 中的同步錯(cuò)誤處理
Node.js 中的同步錯(cuò)誤處理與到目前為止所看到的并沒有太大差異。對(duì)于同步，使用 try/catch/finally 就可以很好的工作了。
Node.js 中的異步錯(cuò)誤處理：回調(diào)模式
對(duì)于異步代碼，Node.js 主要使用這兩種方式：
回調(diào)模式
event emitters
在回調(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); // do stuff with the data }); }我們可以看到，這里處理錯(cuò)誤的方式是使用了回調(diào)：
// function(error, data) { if (error) console.error(error); // do stuff with the data } //如果使用fs.readFile讀取給定路徑而引起任何錯(cuò)誤，我們將獲得一個(gè)錯(cuò)誤對(duì)象。
在這一點(diǎn)上，我們可以：
簡單的把對(duì)象錯(cuò)誤打出來
拋出錯(cuò)誤
把錯(cuò)誤傳到另一個(gè)回調(diào)
我們可以拋出一個(gè)異常
const { readFile } = require("fs"); function readDataset(path) { readFile(path, { encoding: "utf8" }, function(error, data) { if (error) throw Error(error.message); // do stuff with the data }); }但是，與 DOM 中的事件和定時(shí)器一樣，此異常將使程序崩潰。通過try/catch捕獲它是不起作用的：
const { readFile } = require("fs"); function readDataset(path) { readFile(path, { encoding: "utf8" }, function(error, data) { if (error) throw Error(error.message); // do stuff with the 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); // do stuff with the data }); }這里的errorHandler顧名思義，是一個(gè)用于錯(cuò)誤處理的簡單函數(shù):
function errorHandler(error) { console.error(error.message); // do something with the error: // - write to a log. // - send to an external logger. }Node.js 中的異步錯(cuò)誤處理：event emitters
在 Node.js 中所做的大部分工作都是基于事件的。大多數(shù)情況下，emitter object 和一些觀察者進(jìn)行交互以偵聽消息。
Node.js中的任何事件驅(qū)動(dòng)模塊(例如net)都擴(kuò)展了一個(gè)名為EventEmitter的根類。
Node.js中的EventEmitter有兩種基本方法：on和emit。
考慮以下簡單的 HTTP 這里我們來聽兩個(gè)事件:listening 和connection。除了這些事件之外，event emitters 還公開一個(gè) error 事件，以防發(fā)生錯(cuò)誤。 如果在端口80上運(yùn)行這段代碼，而不是在前面的示例上偵聽，將會(huì)得到一個(gè)異常： 輸出： 要捕獲它，我們可以注冊(cè)一個(gè)error事件處理程序： 輸出結(jié)果： 以上就是關(guān)于“JavaScript錯(cuò)誤處理如何實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。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!"); });events.js:291 throw er; // Unhandled 'error' event ^ Error: listen EACCES: permission denied 127.0.0.1:80 Emitted 'error' event on Server instance at: ...
server.on("error", function(error) { console.error(error.message); });listen EACCES: permission denied 127.0.0.1:80
新聞標(biāo)題：JavaScript錯(cuò)誤處理如何實(shí)現(xiàn)
網(wǎng)頁URL：http://m.jiaotiyi.com/article/iishsc.html