JS中的Promise 物件記錄
有時候非同步請求較多時,資料無法及時獲取到,或者希望等上一個請求完成在執行其他操作,可以使用Promise 物件
ECMAscript 6 原生提供了 Promise 物件。
Promise 物件代表了未來將要發生的事件,用來傳遞非同步操作的訊息。
Promise 物件有以下兩個特點:
1、物件的狀態不受外界影響。Promise 物件代表一個非同步操作,有三種狀態:
pending: 初始狀態,不是成功或失敗狀態。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。
只有非同步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來,它的英語意思就是「承諾」,表示其他手段無法改變。
2、一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise 物件的狀態改變,只有兩種可能:
從 Pending 變為 Resolved 和從 Pending 變為 Rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果。就算改變已經發生了,你再對 Promise 物件新增回撥函式,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。
Promise 優缺點
有了 Promise 物件,就可以將非同步操作以同步操作的流程表達出來,避免了層層巢狀的回撥函式。此外,Promise 物件提供統一的介面,使得控制非同步操作更加容易。
Promise 也有一些缺點。
首先,無法取消 Promise,一旦新建它就會立即執行,無法中途取消。其次,如果不設定回撥函式,Promise 內部丟擲的錯誤,不會反應到外部。第三,當處於 Pending 狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。
例子:
var myFirstPromise1 = new Promise(function(resolve, reject){
resolve("成功")
})
//使用:
myFirstPromise1.then(res=>{
console.log(111,res) //輸出成功
})
var myFirstPromise2 = new Promise(function(resolve, reject){
reject("失敗")
})
//使用:
myFirstPromise2.then(res=>{
console.log(220,res) //不輸出
}).catch(err=>{
console.log(222,err) //輸出失敗
})
let result = [myFirstPromise1,myFirstPromise2] //promise物件的陣列
let p = Promise.all(result).then(res =>{
//只有result陣列全部執行成功,完成後p才算成功,所有資料組成一個陣列,返回成功後的陣列
}).catch(err=>{
//有一個失敗p都算失敗,返回第一個失敗的資料
})
相關文章
- JS promise物件JSPromise物件
- JS 中的 PromiseJSPromise
- js中的promise和thenJSPromise
- ES6中的Promise物件Promise物件
- Promise 物件學習筆記Promise物件筆記
- 記錄學習PromisePromise
- 聊一聊Javascript中的Promise物件JavaScriptPromise物件
- JS筆記—— 物件 (原型物件)JS筆記物件原型
- js中的BOM物件JS物件
- JS中的原型物件JS原型物件
- JS 非同步系列 —— Promise 札記JS非同步Promise
- JavaScript Promise 學習記錄(一)JavaScriptPromise
- JS中建立物件的方法JS物件
- js高程物件筆記JS物件筆記
- JavaScript Promise物件JavaScriptPromise物件
- JavaScript Promise 物件JavaScriptPromise物件
- Promise物件概要Promise物件
- 物件方法用途記錄物件
- Js中Math物件JS物件
- js 注意記錄JS
- js 去掉陣列物件中的重複物件JS陣列物件
- ES6的Promise物件Promise物件
- JS 中特殊的物件-陣列JS物件陣列
- 【冰山白皮書】JS中的物件JS物件
- ES6 中 Promise物件使用學習Promise物件
- js中事件物件eventJS事件物件
- Console物件的常用api學習記錄物件API
- JS 中的物件導向 prototype classJS物件
- ES6的Promise物件的使用Promise物件
- 關聯物件(防止自己忘記記錄)物件
- JS每日一題: 如何理解es6中的Promise?JS每日一題Promise
- ES6——Promise 物件Promise物件
- Promise物件,究竟為何物?Promise物件
- 這次聊聊Promise物件Promise物件
- js中bom物件有哪些JS物件
- 返回Promise物件的函式,函式內部記得加try catch!Promise物件函式
- JS中陣列物件的基本結構JS陣列物件
- 理解js中的原型,原型物件,原型鏈JS原型物件