Callback, Promise和Async/Await的对比

zhaokang555

发布于 2023-10-17 09:56:12

12700

代码可运行

文章被收录于专栏：赵康的日常专栏赵康的日常专栏

运行总次数：0

代码可运行

`Callback`, `Promise`和`Async/Await`的对比

`Callback Hell`

getData1(function (data1) {
    console.log('我得到data1了')
    
    getData2(function (data2) {
        console.log('我得到data2了')
        console.log('data1 + data2 = ...')
    })
})

`Promise`

function getData1() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(1111)
        }, 5000)
    })
}

function getData2() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(2222)
        }, 10000)
    })
}

function doSomething() {
    let p1 = getData1().then(function (data) {
        console.log('请求成功: data1 = ' + data)
        return data
    })
    let p2 = getData2().then(function (data) {
        console.log('请求成功: data2 = ' + data)
        return data
    })
    Promise.all([p1, p2]).then(function (data) {
        var sum = data[0] + data[1]
        console.log('data1 + data2 = ' + sum)
    })
}

`Async/Await`

async function getData1() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(1111)
        }, 5000)
    })
}
async function getData2() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(2222)
        }, 5000)
    })
}

async function doSomething() {
    var data1 = await getData1()
    console.log('请求成功: data1 = ' + data1)

    var data2 = await getData2()
    console.log('请求成功: data2 = ' + data2)

    var sum = data1 + data2
    console.log('data1 + data2 = ' + sum)
    
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-01-19，如有侵权请联系 cloudcommunity@tencent.com 删除

async