這段時間面了很多公司或链,問的最多的就是promise,每次回答都是支支吾吾档押、遮遮掩掩的??澳盐,恐怕面試官問到我不會的,所以我就百度了一下令宿,發(fā)現(xiàn)講的一知半解叼耙,后來又找到專業(yè)的老師認真聽了一遍,感覺豁然開朗了粒没,所以分享給大家筛婉。
我從三個方面給大家講解:
1.基本概念
2.簡單代碼使用方法
3.使用場景
1.基本概念
Promise:許諾,承諾
var pro =new Promise(function(success,failed){})里面是一個匿名函數(shù)爽撒,success和failed是形參
Promise有三個狀態(tài):pending 進行中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?resolved 已完成
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?rejected 未完成
promise對象的特點:promise對象的狀態(tài)一旦發(fā)生改變就不可逆入蛆,意思就是一旦狀態(tài)變成?resolved 已完成,就不能被改變了,不能最后又變成了?rejected 未完成硕勿,那到底是已完成還是未完成哨毁,所以狀態(tài)一旦確定就不能改變。
promise的兩個操作方法:
1.then() :成功后執(zhí)行的方法源武,參數(shù)是匿名函數(shù)扼褪,參數(shù)可以有一個,也可以有兩個粱栖,表示的含義不同
當(dāng)有一個參數(shù)時话浇,匿名函數(shù)表示成功后執(zhí)行
當(dāng)有兩個參數(shù)時,第一個匿名函數(shù)表示成功后執(zhí)行查排,第二個匿名函數(shù)表示失敗后執(zhí)行
2.Catch() :失敗后執(zhí)行凳枝,參數(shù)是一個匿名函數(shù)
2.簡單代碼使用方法
?很多人說promise的狀態(tài)在哪里看呀,知道他有三個狀態(tài)跋核,在哪里呀
var?pro?=new?Promise( function (success,failed) {?
} )
console.log(pro);? ? ? ? ? ? ? ? //打印這個對象就可以了呀
現(xiàn)在我們可以看到進行中pending這個狀態(tài)
var?pro?=new?Promise(function(success,failed){
????//開始承諾岖瑰,試圖開始完成承諾的事情
? ?success()? ? ? ? //通知promise對象已完成 ,里面也可以傳入?yún)?shù)? ?? ? ??
? })
第二個已完成resolved狀態(tài)
var?pro?=new?Promise(function(success,failed){
????//開始承諾砂代,試圖開始完成承諾的事情
?failed ()? ? ? ? //通知promise對象未完成 蹋订,里面也可以傳入?yún)?shù)? ??
? })
第三個?rejected 未完成狀態(tài)
我們還說到promise對象的狀態(tài)一旦發(fā)生改變就不可逆,來看看代碼在深入理解下
var?pro?=new?Promise(function(success,failed){
?success()?//通知promise對象已完成
? failed()?//通知promise對象未完成
??})
??console.log(pro);
當(dāng)我們成功和失敗一起執(zhí)行刻伊,那最后他的狀態(tài)是什么呢露戒?
控制臺打印是resolved的,也就是已完成,也就是說執(zhí)行了success(),即便最后又執(zhí)行了failed(),但是狀態(tài)還是沒有被改變捶箱,什么智什?你說是位置原因,好的丁屎,我們換一下位置荠锭。
var?pro?=new?Promise(function(success,failed){
? failed()?//通知promise對象未完成
success()?//通知promise對象已完成
})
??console.log(pro);
這次我們把failed()方法放在前面,success()放到后面晨川,控制臺打印未完成rejected狀態(tài)证九,所以狀態(tài)一旦從pending變?yōu)閞eject的或者resolved,狀態(tài)就不能再改變了。
然后我們看看promise的操作方法:
文字有限共虑,大家可以直接粘貼代碼愧怜,運行一下
var?pro?=new?Promise(function(success,failed){
//failed("fail")?//通知promise對象未完成
success(“ok”)?//通知promise對象已完成
})
//這是.then()有兩個參數(shù)的時候,每一個參數(shù)都是匿名函數(shù)
?pro.then(?function(msg){
? ? ?alert("成功后執(zhí)行的"?+msg)
? ?},?function(msg){
? ? alert("失敗后執(zhí)行"+msg)
? })
? pro.catch(?function(msg){
? ?alert("失敗后執(zhí)行"+msg)
?}?)
3.使用場景
主要是解決異步問題妈拌,一般和ajax一起使用拥坛,因為原生js 是單線程的,不用異步的話會導(dǎo)致堵塞。
之前找到和ajax一起用的代碼渴逻,親測可以運行
function??ajaxPromise(url){
??var?pro?=new?Promise(?function(success,failed){
?????var?ajax=?new?XMLHttpRequest();
?????ajax.open("get","./a.json");
?????ajax.send();
?????ajax.onreadystatechange?=?function(){
???????if(ajax.readyState==4&&ajax.status==200){
??????????success(ajax.responseText)
???????}
?????}
?????//經(jīng)過一段時?間后都沒有拿到服務(wù)器返回的結(jié)果疾党,節(jié)本上就是失敗了?
?????setTimeout(function(){
?????????failed("數(shù)據(jù)請求失敗")
?????},3000)
??}?)
??return?pro;
}
var?p?=?new?ajaxPromise("./a.json")
p.then(function(msg){
????//成功后得到服務(wù)器的返回結(jié)果并處理?
????alert(msg)
},function(msg){
???alert(msg)
})
我是用一個json文件模擬后臺數(shù)據(jù),所以json代碼如下:
{
??"pythonlist":[
????{
??????"bookname":"張三",
??????"time":"2019-2-20",
??????"price":30
????},
????{
??????"bookname":"Python金融大數(shù)據(jù)挖掘與分析全流程詳解",
??????"time":"2019-2-20",
??????"price":30
????},
????{
??????"bookname":"Python游戲編程快速上手?第4版",
??????"time":"2019-2-20",
??????"price":30
????}
??]
}
好了惨奕,promise講完了雪位,看起來內(nèi)容有點多,面試的時候我們只要記住promise三個狀態(tài)梨撞,兩個操作方法雹洗,兩個參數(shù),狀態(tài)一旦改變不能逆轉(zhuǎn)就可以了卧波,之所以講這么多就是幫助大家理解的时肿,我也是一個小白,和大家一起分享學(xué)習(xí)??港粱。