【JavaScript】Callback和Promise差別在哪？如何實作？

▌Callback和Promise差別在哪

• Javascript有許多非同步的動作，像是click、AJAX、Setinterval
• 但如果我們想要讓他照我們想要的順序怎麼辦？

兩個方法：callback還有promise

早期：callback（函示裡面裝函式) //但缺點是產生callback hell
ES6：Promise解決（回傳resolve或是reject）

▌Callback

目標：我們希望先get api，在use api，可是由於get api是非同步的，所以加入一個callback()讓他強制在get api才執行。

function getapi(callback) { //得到一個函式
    setTimeout(function () {
        console.log("get api");
        callback()   //讓callback只在get api後才要執行
    }, 1000);
}

getapi(function () { //input 一個函式
    console.log("use api") //這行只會在get api後才執行
})

▌Promise

• ES6之後的語法
• getapi = new Promise(function(resolve,reject){ 會異步的函式 resolve() }
• getapi.then(){function(){ api回來才要執行的函式 }}

寫法一

let getapi = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("i m api");
        resolve() //這行不要忘記
    }, 1000);
})
getapi.then(
    function () {
        console.log("use api")
    }
).then(function () {
    console.log("use api again")
})

寫法二

function getapi() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("i m api");
            resolve()
        }, 1000);
    })
}

getapi().then(
    function () {
        console.log("use api")
    }
).then(function () {
    console.log("use api again")
})

​