更新時間:2022-11-03 來源:黑馬程序員 瀏覽量:
為了解決回調(diào)地獄的問題,ES6(ECMAScript 2015)中新增了 Promise 的概念,Promise 是一個構(gòu)造函數(shù),可以用來創(chuàng)建 Promise 的實例 const p = new Promise(),new 出來的 Promise 實例對象,代表一個異步操作。
Promise.prototype 上包含一個 .then() 方法, 每一次 new Promise() 構(gòu)造函數(shù)得到的實例對象,都可以通過原型鏈的方式訪問到 .then() 方法,例如 p.then()。
同時.then() 方法用來預(yù)先指定成功和失敗的回調(diào)函數(shù)
p.then(成功的回調(diào)函數(shù),失敗的回調(diào)函數(shù))
p.then(result => { }, error => { })
調(diào)用 .then() 方法時,成功的回調(diào)函數(shù)是必選的、失敗的回調(diào)函數(shù)是可選的?;谝陨系睦碚?,我們來看Promise的常見用法。
基于回調(diào)函數(shù)按順序讀取文件內(nèi)容,具體代碼如下:
//讀取文件1.txt fs.readFile('./files/1.txt', 'utf8', (err1, r1) => { if (err1) return console.log(err1.message) //讀取文件1失取 console, log(r1) //讀取文件 1 成功 //讀取文件2.txt fs.readFile('./files/2.txt', 'utf8', (err2, r2) => { //詩取文件 2 失敗 if (err2) return console.log(err2.message) console.log(r2) //讀取文件 2 成功 //讀取文件3.txt fs.readFile('./files/3.txt', 'utf8', (err3, r3) => { if (err3) return console.log(err3.message) //讀取文件 3失敗 console.log(r3) //讀取文件 3 成功 }) }) })
基于 then-fs 讀取文件內(nèi)容
由于 node.js 官方提供的 fs 模塊僅支持以回調(diào)函數(shù)的方式讀取文件,不支持 Promise 的調(diào)用方式。因此,需要先運行如下的命令,安裝 then-fs 這個第三方包,從而支持我們基于 Promise 的方式讀取文件的內(nèi)容。
npm install then-fs
調(diào)用then-fs提供的readFile()方法,可以異步地讀取文件的內(nèi)容,C的返回值是Promise的實例對象。因此可以調(diào)用.then()方法為每個Promise異步操作指定成功和失敗之后的回調(diào)函數(shù)。示例代碼如下:
then-fs 的基本使用
調(diào)用 then-fs 提供的 readFile() 方法,可以異步地讀取文件的內(nèi)容,它的返回值是 Promise 的實例對象。因此可以調(diào)用 .then() 方法為每個 Promise 異步操作指定成功和失敗之后的回調(diào)函數(shù)。示例代碼如下:
/★★ *基于Promise的方式讀取文件 */ impoik: thenFs from 'then-fs' //注意:.then()中的失敗回調(diào)是可選的,可以被省略 thenFs.readFile('./files/1.txt','utf8').then(r1=>{console.log(r1)},err1 =>{console.log(err1.message)}) thenFs.readFile('./files/2.txt','utf8').then(r2 =>{console.log(r2)},err2 =>{console.log(err2.message)}) thenFs.readFile('./files/3.txt','utf8').then(r3 =>{ console.log(r3)},err3 =>{console.log(err3.message)})
注意:上述的代碼無法保證文件的讀取順序,需要做進(jìn)一步的改進(jìn)!
.then() 方法的特性
如果上一個 .then() 方法中返回了一個新的 Promise 實例對象,則可以通過下一個 .then() 繼續(xù)進(jìn)行處理。通過 .then() 方法的鏈?zhǔn)秸{(diào)用,就解決了回調(diào)地獄的問題。
基于 Promise 按順序讀取文件的內(nèi)容
Promise 支持鏈?zhǔn)秸{(diào)用,從而來解決回調(diào)地獄的問題。示例代碼如下:
thenFs.readFile('./files/1.txt','utf8')// 1.返回值是Promise的實例對象 .then((r1)=>{// 2.通過.then為第一個Promise實例指定成功之后的回調(diào)函數(shù) console.log(r1) return thenFs.readFile('./files/2.txt',/utf8')// 3.在第一個.then中返回一個新的Promise實例對象 }) .then((r2)=>{//4.繼續(xù)調(diào)用.then,為上一個.then 的返回值(新的Promise 實例)指定成功之后的回調(diào)函數(shù) console.log(r2) return thenFs.readFile('./files/3.txt','utf8')// 5.在第二個.then中再返回一個新的Promise實例對象 }) .then((r3)=>{// 6.繼續(xù)調(diào)用.then,為上一個.then 的返回值(新的Promise實例)指定成功之后的回調(diào)函數(shù) console.log(r3) })
通過 .catch 捕獲錯誤
在 Promise 的鏈?zhǔn)讲僮髦腥绻l(fā)生了錯誤,可以使用 Promise.prototype.catch 方法進(jìn)行捕獲和處理:
thenFs.readFile('./files/11.txt','utf8')//文件不存在導(dǎo)致讀取失敗,后面的3個.then 都不執(zhí)行 .then(r1 =>{ console.log(r1) return thenFs.readFile('./files/2.txt','utf8') }) .then(r2=> { console.log(r2) return thenFs.readFile('./files/3.txt', 'utf8') }) .then(r3 =>( console.log(r3) }) .catch(err =>{//捕獲第1行發(fā)生的錯誤,并輸出錯誤的消息 console.log(err.message) })
Promise.all() 方法
Promise.all() 方法會發(fā)起并行的 Promise 異步操作,等所有的異步操作全部結(jié)束后才會執(zhí)行下一步的 .then操作(等待機制)。示例代碼如下:
//1.定義一個數(shù)組,存放3個讀文件的異步操作 const promiseArr = [ thets.readFile('./files/11.txt','utf8'). thenFs.readFile('./files/2.txt','utf8'), thenFs.readFile('./files/3.txt','utf8'), ] // 2.將 Promise的數(shù)組,作為Promise.all()的參數(shù) Promise.all(promiseArr) .then(([r1,r2,r3])=>{//2.1所有文件讀取成功(等待機制) console.log(r1, r2, r3) }) .catch(err =>{// 2.2捕獲 Promise異步操作中的錯誤 console.log(err.message) })
注意:數(shù)組中 Promise 實例的順序,就是最終結(jié)果的順序!
Promise.race() 方法
Promise.race() 方法會發(fā)起并行的 Promise 異步操作,只要任何一個異步操作完成,就立即執(zhí)行下一步的 .then 操作(賽跑機制)。示例代碼如下:
//1.定義一個數(shù)組,存放3個讀文件的異步操作 const promiseArr =[ thenFs.readFile('./files/1.txt', 'utf8'), thenFs.readFile('./files/2.txt', 'utf8'). thenFs.readFile('./files/3.txt', 'utf8'). ] // 2.將 Promise 的數(shù)組,作為 Promise.race()的參數(shù) Pronise.race(promiseArr) .then((result)=>{//2.1只要任何一個異步操作完成,就立即執(zhí)行成功的回調(diào)函數(shù)(賽跑機制) console.log(result) }) .catch(err =>{// 2.2捕獲Promise 異步操作中的錯誤 console.log(err.message) })