隨便寫些廢文
以下都可以直接打開f12的console貼上後嘗試
用Promise來做非同步
窩們都知道JavaScript是一種同步語言,也就是說他不會一個函式執行完再執行另一個
他會嘗試兩個同時執行
以往大家都會使用callback function的方式來讓他可以達成非同步
像是下面的例子
function hello(something,cb){
console.log(something);
cb();
}
hello("Starburst",function(){
console.log("Congratulation!");
})
但是如果我需要在執行完這個函式之後接著執行下面的5個函式呢?
也就是說一直callback下去呢?
追蹤程式碼就會變得十分困難
而且很醜
蠻適合拿來混淆別人的
到了ES6
出現了一種新的語法-Promise
他的宗旨就是要結束所謂的callback地獄
一個Promise是什麼呢?
我們可以顧名思義,Promise的中文是約定的意思
也就是約定說完成之後要執行什麼
失敗之後要執行什麼
我們直接來示範一下
function hello(something,times){
return new Promise(function (resolve, reject){
if(times!=16) return reject("This doesn't Starburst at all!");//代表執行失敗
console.log(something);
resolve("YES");//代表執行完成
})
}
hello("starburst",16)
.then(function (res){//執行成功後執行
console.log(res)//YES
console.log("Congratulations!")
})
.catch(function (res){//執行失敗後執行
console.log(res)//This doesn't Starburst at all!
console.log("You Died");
})
而且如果我要執行完一個函是後執行另一個ㄉ話怎麼辦?
我可以直接在.then()或.catch()後面加.then()
下面是範例,請直接丟到f12的console看結果
function hello(something,times){
return new Promise(function (resolve, reject){
if(times!=16) return reject();//代表執行失敗
console.log(something);
resolve();//代表執行完成
})
}
hello("starburst",15)
.then(function (){//執行成功後執行
console.log("Congratulations!")
})
.then(function (){
console.log("OH YES")//YES
})
.catch(function (){//執行失敗後執行
console.log("You Died");
})
.then(function (){
console.log("OH NO")
})
剩下的還有Async跟Await,不過基本上只是Promise的語法糖,有空再補