Promise是什么蘑险?
1滴肿、主要用于異步計(jì)算
2、可以將異步操作隊(duì)列化佃迄,按照期望的順序執(zhí)行泼差,返回符合預(yù)期的結(jié)果
3、可以在對(duì)象之間傳遞和操作promise呵俏,幫助我們處理隊(duì)列
為什么會(huì)有Promise堆缘?
同步:一個(gè)任務(wù)執(zhí)行完畢才會(huì)執(zhí)行下一個(gè)任務(wù)
異步:可以將A任務(wù)交付給系統(tǒng),繼續(xù)做下一個(gè)任務(wù) 再通過回調(diào)函數(shù) 繼續(xù)做A剩余任務(wù), AB工作的順序 和 時(shí)間順序無關(guān) 所以叫“異步”普碎。
Promise的作用:
1吼肥,主要是用來解決回調(diào)嵌套(執(zhí)行完后再去執(zhí)行某一些操作,這時(shí)候容易形成嵌套再嵌套的問題)的問題麻车,也就是常見的"回調(diào)地獄"缀皱;
?2,執(zhí)行多并發(fā)請(qǐng)求獲取數(shù)據(jù)动猬;
Promise的使用:
(1)使用new實(shí)例化一個(gè)Promise對(duì)象啤斗,Promise的構(gòu)造函數(shù)中傳遞一個(gè)參數(shù)。這個(gè)參數(shù)是一個(gè)函數(shù)枣察,該函數(shù)用于處理異步任務(wù)争占。
(2)并且傳入兩個(gè)參數(shù):resolve和reject燃逻,分別表示異步執(zhí)行成功后的回調(diào)函數(shù)和異步執(zhí)行失敗后的回調(diào)函數(shù);
(3)通過 promise.then() 處理返回結(jié)果臂痕。這里的 p 指的是 Promise實(shí)例伯襟。
?//?第一步:model層的接口封裝
????????const?promise?=?new?Promise((resolve,?reject)?=>?{
????????????//?這里做異步任務(wù)(比如ajax?請(qǐng)求接口。這里暫時(shí)用定時(shí)器代替)
????????????setTimeout(function?()?{
????????????????var?data?=?{?retCode:?0,?msg:?'hello'?};?//?接口返回的數(shù)據(jù)
????????????????if?(data.retCode?==?0)?{
????????????????????//?接口請(qǐng)求成功時(shí)調(diào)用
????????????????????resolve(data);
????????????????}?else?{
????????????????????//?接口請(qǐng)求失敗時(shí)調(diào)用
????????????????????reject({?retCode:?-1,?msg:?'network?error'?});
????????????????}
????????????},?100);
????????});
????????//?第二步:業(yè)務(wù)層的接口調(diào)用握童。這里的?data?就是?從?resolve?和?reject?傳過來的姆怪,也就是從接口拿到的數(shù)據(jù)
????????promise.then(data?=>?{
????????????//?從?resolve?獲取正常結(jié)果
????????????console.log(data);
????????}).catch(data?=>?{
????????????//?從?reject?獲取異常結(jié)果
????????????console.log(data);
promise對(duì)象的3個(gè)狀態(tài)
初始化狀態(tài)(等待狀態(tài)):pending
成功狀態(tài):fullfilled
失敗狀態(tài):rejected
promise 的基本用法
?let?promise?=?new?Promise((resolve,?reject)?=>?{
????????????resolve()
????????}).then(res?=>?{?console.log(res)?})//undefined
Promise構(gòu)造函數(shù)接收一共函數(shù)作為參數(shù),該函數(shù)有兩個(gè)參數(shù)分別為resolve和reject澡绩,調(diào)用resolve則會(huì)代表成功稽揭,調(diào)用reject則會(huì)代表失敗。
then 方法
function?greet()?{
????????????let?promise?=?new?Promise((resolve,?reject)?=>?{
????????????????let?data?=?'hello?world'
????????????????resolve(data)
????????????})
????????????return?promise
????????}?greet().then(res?=>?{?console.log(res)?})//hello?world
then方法是處理resolve和reject的回調(diào)肥卡,分別有兩個(gè)參數(shù)溪掀,參數(shù)分別是(resolve)=>{},(reject)=>{}。then方法的返回值也是一個(gè)promise步鉴,因此可以不斷的進(jìn)行鏈?zhǔn)秸{(diào)用then方法揪胃。
all方法
Promise的all方法提供了并行執(zhí)行異步操作的能力,它可以將promise數(shù)組作為參數(shù)氛琢,只有當(dāng)時(shí)所有promise都成功后喊递,才會(huì)獲取到成功結(jié)果,否則會(huì)報(bào)錯(cuò)阳似。
???function?p1()?{
????????????var?promise1?=?new?Promise(function?(resolve,?reject)?{
????????????????console.log("p1的第一條輸出語句");
????????????????resolve("p1完成");
????????????})
????????????return?promise1;
????????}
????????function?p2()?{
????????????var?promise2?=?new?Promise(function?(resolve,?reject)?{
????????????????console.log("p2的第一條輸出語句");
????????????????resolve("p2完成");
????????????})
????????????return?promise2;
????????}
????????function?p3()?{
????????????var?promise3?=?new?Promise(function?(resolve,?reject)?{
????????????????console.log("p3的第一條輸出語句");
????????????????resolve("p3完成")
????????????});
????????????return?promise3;
????????}
????????Promise.all([p1(),?p2(),?p3()]).then(function?(data)?{
????????????console.log(data);
????????})?
打印結(jié)果:
p1的第一條輸出語句
p2的第一條輸出語句
p3的第一條輸出語句
['p1完成','p2完成','p3完成']
race方法
在all中的回調(diào)函數(shù)中骚勘,等到所有的Promise都執(zhí)行完,再來執(zhí)行回調(diào)函數(shù)撮奏,race則不同它等到第一個(gè)Promise改變狀態(tài)就開始執(zhí)行回調(diào)函數(shù)俏讹。
let?P1?=?new?Promise(resolve?=>?{
????????????setInterval(()?=>?{
????????????????resolve("I\'m?P1");
????????????},?1000)
????????});
????????let?P2?=?new?Promise(resolve?=>?{
????????????setInterval(()?=>?{
????????????????resolve("I\'m?P2");
????????????},?1500)
????????});
????????Promise.race([P1,?P2])
????????????.then(value?=>?{
????????????????console.log(value)
????????????})
????????console.log('value')//value 與Promise是一起執(zhí)行的,沒有時(shí)間先后順序