首先需要了解async函數:

async是Generator函數的語法糖:

// 使用Generator依次讀取兩個文件 var fs = require('fs'); var readFile = function (fileName) {return new Promise(function (resolve, reject) {fs.readFile(filename, function(error, data) {if (error) return reject(error)resolve(data);});}); };// Generator var gen = function* () {var f1 = yield readFile('/etc/fatab');var f2 = yield readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString()); };// async var ayncReadFile = async function () {var f1 = await readFile('/etc/fatab');var f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString()); };// async對Generator函數做了以下4點改變: // 1. 內置執行器:async函數自帶執行器,使用方法為 asyncReadFile() // 2. 更好的語義: async表示函數里有異步操作,await表示緊跟再后面的表達式需要等待結果 // 3. 更廣的適用性:yield命令后,只能是Thunk函數或Promise對象,而async函數的await命令后面,可以是Promise對象和原始類型的值 // 4.返回值是Promise對象,可以使用then方法指定下一步操作.// 注:async函數完全可以看作由多個異步操作包裝成的一個Promise,而await命令就是內部then命令的語法糖.

async函數的用法:

// 輸入name返回股票的價格 async function getStockPriceByName(name) {var symbol = await getStockSymbol(name);var stockPrice = await getStockPrice(symbol);return stockPrice; } getStockPriceByName('goog').then(function (result) {console.log(result); }); // 非常同步的寫法! // 從宏觀上來講,執行getStockPriceByName后,輸入名字,會得到一個stockPrice,而stockPrice是一個Promise數據結構, // 其可以使用.then方法調用.// async封裝接口. function timeout(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);}); } async function asyncPrint(value, ms) {await timeout(ms);console.log(value); }asyncPrint("Hello", 50);

async的語法:

// async函數返回一個Promise對象 async function f() {return 'hello world'; } fn().then(v => console.log(v))// async函數內部拋出的錯誤會導致返回的Promise對象變為reject狀態, async function f(){throw new Error('出錯了'); } f().then(v => console.log(v),e => console.log(e) )

async的錯誤處理:

// 如果await后面的異步操作出錯,那么等同于async函數返回的Promise對象被reject. async function f() {await new Promise(function (resolve, reject) {throw new Error('出錯了');}); } f() .then( v => console.log(v)) .catch( e => console.log(e))// async置于try...catch代碼塊中 async function f() {try{await new Promise(function (resolve, reject) {throw new Error('出錯了');});} catch (e) {}return await('hello world'); }// 多個await命令,同一放入try...catch結構中 async function main() {try {var val1 = await firstStep();var val2 = await secondStep(val1);var val3 = await thirdStep(val1, val2);console.log('Final: ', val3);}catch (err) {console.error(err);} }// 使用try...catch結構,多次嘗試連接獲取某個url下的數據 const superagent = require('superagent'); const NUM_RETRIES = 3;async function test() {let i;for (i =0; i < NUM_RETRIES; ++i) {try {await superagent.get('http://google.com/this-throws-an-error');break;} catch(err) {}}cosnole.log(i); // 3 } test();

async使用注意點:

// 1.await命令后面的Promise對象的運行結果可能是rejected,所以最好把await命令放在try...catch代碼塊中 // 寫法一 async function myFunction() {try{await somethingThatReturnsAPromise();} catch (err) {console.log(err);} } // 寫法二 async function myFunction() {try{await somethingThatReturnsAPromise().catch(function(err){console.log(err);});} }// 2.多個await命令后面的異步操作如果不存在繼發關系,最好讓它們同時觸發 // 寫法一 let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 寫法二 // let fooPromise = getFoo(); // let barPromise = getBar(); // let foo = await fooPromise; // let bar = await barPromise;// 3.await命令只能用在async函數之中,如果用在普通函數中就會報錯 async function dbFunc(db) {let docs = [ {}, {}, {] ];// 報錯docs.forEach(function (doc) {await db.post(doc);}); } // 報錯的原因在于,async用在普通函數function(doc)之中. // 考慮forEach的參數改為async 函數, function dbFunc(db) {let docs = [ {}, {}, {} ];docs.forEach(async function(doc) {await db.post(doc);}); } // 注:forEach是并發執行的,因此以上還是會報錯.// 如果想繼發的將doc推入db.post,可以采用for...of... function dbFunc(db) {let docs = [ {}, {}, {} ];for (let doc of docs) {await db.post(doc);} }// 使用Promise.all 執行并發 function dbFunc(db) {let docs = [ {}, {}, {} ];let promises = docs.map( (doc) => db.post(doc));let results = Promise.all(promises);console.log(results); }// 使用for...of的 并發執行 function dbFunc(db) {let docs = [ {}, {}, {} ];let promises = docs.map( (doc) => db.post(doc));let results = [];for (let promise of promises) {results.push(promise);}console.log(results); }

promise與async/await的區別:

// 1.錯誤處理:Async/await使得處理同步 + 異步成為了現實 // 在try/catch中,難以處理JSON.parse拋出的錯誤,原因在于,這個錯誤發生在Promise內部. // 要處理以上錯誤,只能在Promise外面套上一層try...catch // async/await,后面的異步操作若出錯,那么等同于async函數返回的Promise對象被reject// Promise try...catch const makeRequest = () => {try {getJSON().then(result => {const data = JSON.parse(result);console.log(data);})} catch (err) {console.log(err)} } // 使用async/await const makeRequest = () => {try {const data =JSON.parse(await getJSON())console.log(data)} catch (err) {console.log(err)} } // 2.條件判別 (Conditionals):根據得到的數據決定下一步操作 const makeRequest = () => {return getJSON().then(data => {if ( data.needsAnotherRequest) {return makeAnoterReuqest(data).then(moreData => {console.log(moreData)return moreData})} else {console.log(data);return data;}}) } // 以上就2次就嵌套得如此深,要是10次...100次...... // 使用async可以很好的寫出可維護性代碼 const makeRequest = () => {const data = await getJSON();if( data.needsAnotherRequest) {const moreData = await makeAnotherRequest(data);console.log(moreData)return moreData} else {console.log(data);return data;} } // 可讀性和可維護性更強!// 3.對中間的值的使用更簡單] // promise const makeRequest = () => {return promise1().then (value1 => {return promise2(value1).then( value2 => {return promise3 (value1, value2)})}) }// async const makeRequest = () => {const value1 = await promise1()const value2 = await promise2(value1)const value3 = await promise3(value1, value2)return value3 } // 我天,,,同步的寫法,,!! 簡單明了,好維護!

參考《ES6標準入門》(第3版) P375~P385
參考 ES6 Async/Await與Promise區別

總結

以上是生活随笔為你收集整理的es6 --- promise和async/await的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。