Promise的基礎學習

2022-03-09 13:48:06 字數 3514 閱讀 9415

主要用於非同步計算

可以將非同步操作佇列化,按照期望的順序執行,返回符合預期的結果

可以在物件之間傳遞和操作promise,幫助我們處理佇列

處理非同步操作

非同步:則是將耗時很長的a交付的工作交給系統之後,就去繼續做b交付的工作,。等到系統完成了前面的工作之後,再通過**或者事件,繼續做a剩下的工作。ab工作的完成順序,和交付他們的時間順序無關,所以叫「非同步」。

事件監聽

document.getelementbyid('#start').addeventlistener('click', start, false);

function start()

// jquery on 監聽

$('#start').on('click', start)

**函式

// 比較常見的有ajax

$.ajax('',

})// 或者在頁面載入完畢後**

$(function() )

非同步**的問題

new promise(

function (resolve, reject)

).then(

(res) => , // 成功

(err) => // 失敗

)

pending[待定]初始狀態

fulfilled[實現]操作成功

rejected[被否決]操作失敗

示例:

new promise(resolve => , 2000)

}).then(res => )

分兩次執行:

new promise(resolve => , 2000)

}).then(val => , 2000)

})}).then(val => )

promise之後的then:

let pro = new promise(resolve => , 2000)

}) settimeout(() => )

}, 2000)

promise作為佇列最為重要的特性,我們在任何乙個地方生成了乙個promise佇列之後,我們可以把他作為乙個變數傳遞到其他地方。

接收兩個函式作為引數,分別代表fulfilled(成功)和rejected(失敗)

then()返回乙個新的promise例項,所以它可以鏈式呼叫

當前面的promise狀態改變時,.then()根據其最終狀態,選擇特定的狀態響應函式執行

狀態響應函式可以返回新的promise,或其他值,不返回值也可以我們可以認為它返回了乙個null;

如果返回新的promise,那麼下一級.then()會在新的promise狀態改變之後執行

如果返回其他任何值,則會立即執行下一級.then()

因為.then()返回的還是promise例項

會等裡面的then()執行完,再執行外面的

new promise(resolve=>,1000)

}).then((value)=>,1000)

})}).then((value) => ).then((value) => ).then((value) => )

promise會自動捕獲內部異常,並交給rejected響應函式處理

第一種:

new promise(resolve=>,1000)

}).then(val=>).catch(err => )

//uncaught error: bye at 01.html:36

//第二種

new promise(function(resolve, reject) , 1000)

}).then(()=>,(err)=>)

//error:bye

//切菜

function cutup() , 1000);

})return p

} //燒水

function boil(params) , 1000);

})return p

} //彙總,切好菜 燒好水才做下一步

promise.all([cutup(),boil()])

.then(results => )

//開始切菜

//開始燒水

//切菜完畢

//燒水完畢

//準備工作完畢

// ["切好的菜", "燒好的水"]

類似於promise.all() ,區別在於它有任意乙個完成就算完成

let p1=new promise(resolve=>,1000)

}) let p2=new promise(resolve=>,500)

}) promise.race([p1,p2]).then(value=>)

實戰:

/***

第一步:找到北京的id

第二步:根據北京的id -> 找到北京公司的id

第三步:根據北京公司的id -> 找到北京公司的詳情

目的:模擬鏈式呼叫、**地獄

***/

//請求第乙個api: 位址在北京的公司的id

$.ajax(

})[0].id

// 請求第二個api: 根據上乙個返回的在北京公司的id 「findcityid」,找到北京公司的第一家公司的id

$.ajax(

})[0].id

// 請求第三個api: 根據上乙個api的id(findpostionid)找到具體公司,然後返回公司詳情

$.ajax(

})[0]

console.log(cominfo)}})

}})}})

//promise寫法

//第一步獲取城市列表

const citylist = new promise((reslove, reject) =>

})})

//第二步 找到城市是北京的id

citylist.then(res =>

})[0].id

})// 第四步(2):傳入公司的id

companyinfo(findpostionid)

// 第三步(1):根據北京的id -> 找到北京公司的id

function findcompanyid()

})})

return aaa

} findcompanyid().then(res =>

})[0].id

function companyinfo(id)

})[0]

console.log(cominfo)}})

})}

promise基礎用法

created by liyinghao on 2016 11 6.const fs require fs 新建乙個promise物件,promise就是乙個容器,裡面放置乙個非同步執行的api const p1 newpromise resolve reject 容器中的非同步任務成功之後呼叫re...

Promise學習筆記

promise 表示乙個非同步操作的最終結果,與之進行互動的方式主要是then方法,該方法註冊了兩個 函式,用於接收 promise 的終值或本 promise 不能執行的原因。乙個 promise 的當前狀態必須為以下三種狀態中的一種 等待態 pending 執行態 fulfilled 和拒絕態 ...

promise學習總結

promise是非同步程式設計的一種解決方案,它有三種狀態,分別是pending 進行中 resolved 已完成 rejected 已失敗 當promise的狀態又pending轉變為resolved或rejected時,會執行相應的方法,並且狀態一旦改變,就無法再次改變狀態,這也是它名字prom...