Javascript - Callback, Promise and Promise Chaining

// 1. Use callback in an async function, call the callback when necessary during the async call.
const getValueFunc1 = (key, callback) => {
    setTimeout(() => {
        callback(null, "Data from callback")
        // callback('Error from callback', null)
    }, 3000)
}
getValueFunc1("foo", (err, data) => {
    if (err) console.log(err)
    else console.log(data)
})

// 2. Use Promise, call resolve() or reject() when necessary during the async call.
//                 a) resolve() or reject() can only be called once.
//                 b) then() can be called more than once, promise will use the same data again rather than executing the function again.

// Notes: callback and Promise both be used for callback purposes, call them when necessary in async function call.
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data from promise")
        // reject("Error from promise")
    }, 3000)
    console.log("Execute right now");
})

myPromise.then(data => {
    console.log(data);
}).catch(err => {
    console.log('catch' + err);
})

// 3. Promise chain

// 3.1 callback
const getDataCallback = (num, callback) => {
    setTimeout(() => {
        if (typeof num === "number")
            callback(undefined, num * 2);
        else
            callback('Number must be provided', null);
    }, 2000);
}

getDataCallback(2, (err, data) => {
    if (err) {
        console.log(err)
    } else {
        getDataCallback(data, (err, data) => {
            if (err) { console.log(err) }
            else console.log(`Callback data: ${data}`)
        })
    }
})
// 3.2 promise
const getDataPromise = (num) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // if (typeof num === 'number')
            //     resolve(num * 2)
            // else
            //     reject('Number must be provided')
            typeof num === 'number' ? resolve(num * 2) : reject('Number must be provided');
        }, 3000)
    })
}
getDataPromise(2).then(data => {
    getDataPromise(data).then(data => {
        console.log(`Promise data: ${data}`);
    }, err => {
        console.log(err);
    })
}, err => {
    console.log(err);
});

// 3.3 Promise chaining
getDataPromise(2).then(data => {
    return getDataPromise(data);
}).then(data => {
    return getDataPromise(data);
}).then(data => {
    console.log(`Promise chain data: ${data}`);
}).catch(err => {
    console.log(err);
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值