Promise 對(duì)象是 ES6 的語(yǔ)法,在Javascript中用來(lái)進(jìn)行一個(gè)異步操作的最終完成(或失敗)及其結(jié)果值的顯示。
new Promise(
/* executor */
function (resolve, reject) {...}
)
定義的Promise對(duì)象中方法參數(shù) resolve,reject 將會(huì)是第一個(gè).then(resolve, reject)和.catch(reject)的參數(shù)將會(huì)執(zhí)行的地方??梢詫?Promise 復(fù)制到一個(gè)普通的變量,以便后續(xù)的操作。
Promise 對(duì)象有以下幾種狀態(tài):
1. pending: 初始狀。
2. fulfilled: 意味著操作成功完成。
3. rejected: 意味著操作失敗
new Promise 的快捷方式
new Promise(resolve => {resolve(42)})
這段代碼等同于:
Promise.resolve(42).then(val => {console.log(val)})
thenable 對(duì)象
具有 .length 方法的非數(shù)組對(duì)象成為 Array like 對(duì)象,thenable 指的是一個(gè)具有 .then 方法的對(duì)象。
可以將 thenable 對(duì)象轉(zhuǎn)換 promise 對(duì)象:
var promise = Promise.resolve($.ajax('/json/comment.json'));// => promise對(duì)象
promise.then(function(value){
console.log(value);
});
Promise.resolve 只使用了共通的方法 then
同步調(diào)用和異步調(diào)用同時(shí)存在導(dǎo)致的混亂
- 絕對(duì)不能對(duì)異步回調(diào)函數(shù)(即使在數(shù)據(jù)已經(jīng)就緒)進(jìn)行同步調(diào)用。
- 如果對(duì)異步回調(diào)函數(shù)進(jìn)行同步調(diào)用的話(huà),處理順序可能會(huì)與預(yù)期不符,可能帶來(lái)意料之外的后果。
- 對(duì)異步回調(diào)函數(shù)進(jìn)行同步調(diào)用,還可能導(dǎo)致棧溢出或異常處理錯(cuò)亂等問(wèn)題。
- 如果想在將來(lái)某時(shí)刻調(diào)用異步回調(diào)函數(shù)的話(huà),可以使用 setTimeout 等異步API。
Vue 中經(jīng)常用到的有關(guān)Promise對(duì)象
- vuex 中調(diào)用的
this.$store.dispatch('xxx')的返回結(jié)果是一個(gè)promise對(duì)象,所以需要有先后語(yǔ)境的時(shí)候可以寫(xiě)成
this.$store.dispatch('xxx').then(() => {/* code here */})
操作完 vuex 后才執(zhí)行then中的方法或者操作。
- 基于promise 的 axios 插件是操作http 請(qǐng)求的插件,很方便整合到vue項(xiàng)目中使用,很容易了解它返回的數(shù)據(jù)也是promise 對(duì)象,也可利用這一點(diǎn)進(jìn)行其他的異步操作。
promise 中的數(shù)據(jù)鏈?zhǔn)絺鬟f
promise 對(duì)象的 then和catch方法都會(huì)返回一個(gè)新的promise 對(duì)象,形成鏈?zhǔn)讲僮鳌?br>
如果需要傳遞數(shù)據(jù)可以在返回值,以便后者使用,如下:
axios.post(xxx).then(data => {
return handle(data)
}).then(data2 => {
/* more code here */
})
data2 便是 上一次return之后的值

white_bear.jpg