ES7中await如何優(yōu)雅的捕獲異常詳解
本篇文章介紹的是
ES7中await語法糖在調(diào)用的時候出現(xiàn)異常如何捕獲?
傳統(tǒng)方式
try {
const res = await getUser(id)
}catch(err){
console.log(err)
}await讓我們使用異步方式開發(fā)的代碼簡便不少,但是每次使用如果都用try..catch來捕獲異常反而埋沒了它的優(yōu)勢。
[ err, user ] = await to(UserModel.findById(1));
如果我們使用await同時還能捕獲異常,那顯然是很完美的實(shí)現(xiàn)方式。await-to-js出場~~
await-to-js
安裝
npm i await-to-js --save
使用
要求Node 7.6 (或以上),需要
ES7的轉(zhuǎn)義器,支持TypeScript
import to from 'await-to-js';
// 如果是Node環(huán)境,應(yīng)該這樣使用
// const to = require('await-to-js').default;
async function asyncFunctionWithThrow() {
const [err, user] = await to(UserModel.findById(1));
if (!user) throw new Error('User not found');
}TypeScript的使用方式
interface ServerResponse {
test: number;
}
const p = Promise.resolve({test: 123});
const [err, data] = await to<ServerResponse>(p);
console.log(data.test);源碼
"main": "dist/await-to-js.umd.js",
/**
* @param { Promise } promise對象
* @param { Object= } 附加的錯誤
* @return { Promise }
*/
export function to<T, U = Error> (
promise: Promise<T>,
errorExt?: object
): Promise<[U, undefined] | [null, T]> {
return promise
.then<[null, T]>((data: T) => [null, data])
.catch<[U, undefined]>((err: U) => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt);
return [parsedError, undefined];
}
return [err, undefined];
});
}
export default to;這段代碼很簡單,定義了一個函數(shù)to,傳入的參數(shù)兩個:promise對象和附加信息。 返回一個promise。 如果promise沒有異常走的then方法,則返回一個null和data組成的數(shù)組,否則返回錯誤信息合并上傳入的附加信息 和undefined組成的數(shù)組。
測試用例
目錄src/await-to-js.test.ts
測試用例分別測試了沒有異常的單值,有異常的單值,傳入了附加信息的異常,沒有異常的對象。
結(jié)束語
看到如此優(yōu)雅的能在一行實(shí)現(xiàn)了異步編程還能返回其錯誤對象,比try..catch優(yōu)雅很多。我們開發(fā)盡量讓自己的代碼如藝術(shù)一樣優(yōu)雅。不僅能賞心悅目,還能易于維護(hù)。我們也能成為編程界的藝術(shù)家。
到此這篇關(guān)于ES7中await如何優(yōu)雅的捕獲異常的文章就介紹到這了,更多相關(guān)ES7 await捕獲異常內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ES6中的class是如何實(shí)現(xiàn)的(附Babel編譯的ES5代碼詳解)
這篇文章主要介紹了ES6中的class是如何實(shí)現(xiàn)的?(附Babel編譯的ES5代碼詳解),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
手淘flexible.js框架使用和源代碼講解小結(jié)
手淘框架是一個用來適配移動端的js框架,這篇文章主要介紹了手淘flexible.js框架使用和源代碼講解小結(jié),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-10-10
javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-03-03
JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能,結(jié)合具體案例形式詳細(xì)對比分析了JS面向過程與面向?qū)ο髮?shí)現(xiàn)的拖拽功能相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
JavaScript實(shí)現(xiàn)動態(tài)生成表格
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動態(tài)生成表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08
Bootstrap實(shí)現(xiàn)帶動畫過渡的彈出框
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)帶動畫過渡的彈出框,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08
javascript實(shí)現(xiàn)添加附件功能的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)添加附件功能的方法,在我們編輯信息時,有時候需要附加文件、圖片實(shí)現(xiàn)上傳功能,通過本文了解javascript是如何實(shí)現(xiàn)附加功能的,請閱讀。2015-11-11
JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-04-04

