ES6的Promise解決js的回撥地獄
阿新 • • 發佈:2018-12-18
- Promise是一個建構函式,new Promise()得到一個Promise的例項
- 在Promise中有兩個函式,resolve(成功之後的回撥函式)和reject(失敗後的回撥函式)
- 在Promise 建構函式的Prototype屬性上,有一個.then() 的方法,只要是Promise建構函式建立的例項,都可以訪問到.then()方法
- Promise表示一個非同步操作;每當我們new 一個Promise的是咧,這個例項就表示一個具體的非同步操作
- 既然Promise建立的例項是一個非同步操作,那麼這個非同步操作的結果只有兩種狀態:
- 非同步執行成功了,使用resolve返回
- 非同步執行失敗了,使用reject返回
- 由於Promise的例項是一個非同步操作,內部拿到的操作結果後,無法使用return把操作結果返回呼叫者,這時候非同步執行成功了,非同步執行失敗了,由於Promise的例項是一個非同步操作,內部拿到的操作結果後,無法使用return把操作結果返回呼叫者,這時候使用函式把結果返回給呼叫者。
- 我們可以在new 出來的Promise例項上,呼叫.then()方法,為這個Promise預先指定成功(resolve)和失敗(reject)回撥函式
- 如:
// 每當new一個Promise例項的時候,就會立即執行這個 非同步操作的程式碼 var promise = new Promise(function(){ fs.readFile('./2.txt','utf-8',(err,dataStr)=>{ if(err)throw err console.log(dataStr) }) })
const fs = require('fs'); function getFIleByPath(fpath) { var promise = new Promise(function (resolve, reject) { fs.readFile(fpath, 'utf-8', (err, dataStr) => { if (err) return reject(err); resolve(dataStr); }) }) return promise; } getFIleByPath('./2.txt').then(function (data) { console.log("succ" + data) }, function (err) { console.log(err + "err") })
回撥地獄解決方案:
const fs = require('fs')
function getFileByPath(fpath) {
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
}
// 先讀取檔案1,在讀取2,最後讀取3
// 注意: 通過 .then 指定 回撥函式的時候,成功的 回撥函式,必須傳,但是,失敗的回撥,可以省略不傳
// 這是一個 錯誤的示範,千萬不要這麼用; 硬是把 法拉利,開成了 拖拉機;
/* getFileByPath('./files/1.txt')
.then(function (data) {
console.log(data)
getFileByPath('./files/2.txt')
.then(function (data) {
console.log(data)
getFileByPath('./files/3.txt')
.then(function (data) {
console.log(data)
})
})
}) */
// 讀取檔案1
// 在上一個 .then 中,返回一個新的 promise 例項,可以繼續用下一個 .then 來處理
// 如果 ,前面的 Promise 執行失敗,我們不想讓後續的Promise 操作被終止,可以為 每個 promise 指定 失敗的回撥
/* getFileByPath('./files/11.txt')
.then(function (data) {
console.log(data)
// 讀取檔案2
return getFileByPath('./files/2.txt')
}, function (err) {
console.log('這是失敗的結果:' + err.message)
// return 一個 新的 Promise
return getFileByPath('./files/2.txt')
})
.then(function (data) {
console.log(data)
return getFileByPath('./files/3.txt')
})
.then(function (data) {
console.log(data)
}).then(function (data) {
console.log(data)
}) */
// console.log('OKOKOK')
// 當 我們有這樣的需求: 哪怕前面的 Promise 執行失敗了,但是,不要影響後續 promise 的正常執行,此時,我們可以單獨為 每個 promise,通過 .then 指定一下失敗的回撥;
// 有時候,我們有這樣的需求,個上面的需求剛好相反:如果 後續的Promise 執行,依賴於 前面 Promise 執行的結果,如果前面的失敗了,則後面的就沒有繼續執行下去的意義了,此時,我們想要實現,一旦有報錯,則立即終止所有 Promise的執行;
getFileByPath('./files/1.txt')
.then(function (data) {
console.log(data)
// 讀取檔案2
return getFileByPath('./files/22.txt')
})
.then(function (data) {
console.log(data)
return getFileByPath('./files/3.txt')
})
.then(function (data) {
console.log(data)
})
.catch(function (err) { // catch 的作用: 如果前面有任何的 Promise 執行失敗,則立即終止所有 promise 的執行,並 馬上進入 catch 去處理 Promise中 丟擲的異常;
console.log('這是自己的處理方式:' + err.message)
})
在JQuery中也ajax中的應用:
$(function () {
$('#btn').on('click', function () {
$.ajax({
url: './data.json',
type: 'get',
dataType: 'json'
})
.then(function (data) {
console.log(data)
})
})
});