ES6 - Promise, Generator, async(非同步操作)使用比較
導讀:
- 分別使用Promise, Generator, async三種非同步操作讀取檔案,async無論是語義化 / 程式碼優雅都有很大優勢。
例子:
const fs = require('fs');
// 簡單封裝 fs封裝成一個Promise
const readFile = function(fileName) {
return new Promise((resolve, reject) =>{
fs.readFile(fileName, (err, data)=> {
if(err) reject(err);
resolve(data);
});
});
}
// promise
readFile('data/1.txt').then(res =>{
console.log(res.toString());
return readFile('data/2.txt');
}).then(res =>{
console.log(res.toString());
return readFile('data/3.txt');
}).then(res =>{
console.log(res.toString());
});
// generator
function* gen() {
yield readFile('data/1.txt'); // 使用next().value返回的是Promise物件,故順序呼叫時方法同Promise
yield readFile('data/2.txt');
yield readFile('data/3.txt');
}
let g1 = gen();
g1.next().value.then(res =>{
console.log(res.toString());
return g1.next().value;
}).then(res =>{
console.log(res.toString());
return g1.next().value;
}).then(res =>{
console.log(res.toString());
})
// async
async function fn() {
let [a, b ,c] = await Promise.all([
// 由於不指定檔案順序,使用Promise.all(),指定順序分開使用await,注意: 使用await最好加上try{}catch(e){}
readFile('data/1.txt'),
readFile('data/2.txt'),
readFile('data/3.txt')
]);
console.log(a.toString());
console.log(b.toString());
console.log(c.toString());
}
fn();
-
執行結果:
總結:
- async特點:
- await只能放到async函式中
- 相比gengerator語義化更強
- await後面可以是promise物件,也可以是數字,字串等
- async函式返回值是一個promise物件
- 只要await語句後面promise狀態變成了reject,整個async函式會中斷執行, 故一般使用try{}catch(e){}包裹
相關文章
- Async & generator & PromisePromise
- ES6 Generator async
- Promise與async/await與GeneratorPromiseAI
- Promise, Generator, async/await的漸進理解PromiseAI
- Promise、Generator、Async有什麼區別?Promise
- 非同步操作系列之Generator函式與Async函式非同步函式
- 深入理解 promise、generator+co、async/await 用法PromiseAI
- [面試專題]JS非同步之Promise,Generator,Async面試JS非同步Promise
- JS非同步程式設計 (2) – Promise、Generator、async/awaitJS非同步程式設計PromiseAI
- ES6學習筆記(六)【promise,Generator】筆記Promise
- ES6中的Promise和Generator詳解Promise
- ES6中的迭代器、Generator函式以及Generator函式的非同步操作函式非同步
- 【理解ES7async/await並實現】手把手進行ES6非同步程式設計:Generator + Promise = Async/AwaitAI非同步程式設計Promise
- Promise(es6)和await,async(es7)PromiseAI
- Callback Promise Generator Async-Await 和異常處理的演進PromiseAI
- Generator與Promise的完美結合 -- async await函式誕生記PromiseAI函式
- ES6中Promise 承諾物件封裝非同步操作解析Promise物件封裝非同步
- 細說 async/await 相較於 Promise 的優勢AIPromise
- ES6 Async/Await 完爆Promise的6個原因AIPromise
- 非同步程式設計解決方案全集—promise、generator+co、async+await非同步程式設計PromiseAI
- 【譯】async 的非同步操作模式非同步模式
- JavaScript async和await 非同步操作JavaScriptAI非同步
- JS 中的 Iterator, Generator, asyncJS
- generator函式與async/await函式AI
- ES6 Promise 應用: 回撥函式方法封裝成 Promise + async/await 同步化Promise函式封裝AI
- 非同步操作系列之Promise物件非同步Promise物件
- ES6 Promise的使用和理解Promise
- ES6的Promise物件的使用Promise物件
- ES6中的Generator
- ES6 - symbol&generatorSymbol
- ES6 Generator函式函式
- [Javascript] Promise question with async awaitJavaScriptPromiseAI
- async/await 和 promise/promise.all 的示例AIPromise
- ES6 中 Promise物件使用學習Promise物件
- ES6 - PromisePromise
- es6—PromisePromise
- es5和es6類的比較
- es6:generator生成器