我要加入

巴哈程式競技、電資社團

會長:N0983658212 / 美好的過去漸行漸遠開設日:2020-11-27 22:44:16

  • EXP

  • 資金226803  
  • 招募制度:審核制
  • 成員:310 人
  • 昨日人氣:0

JavaScript相關

推上精選編輯

近期編輯:ItisCaleb ...看更多

隨便寫些廢文
以下都可以直接打開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的語法糖,有空再補

公會首頁

主選單
程式相關
  教學
  小作品
  程式範例
競技程式(競程)
  一些網站
  學習資源
資安相關
年會介紹
公會 Rule
  Wiki 百科
關聯資料

目前沒有資料連到「JavaScript相關」。