React开发（273）:异步调用的方式

Posted 2021-12-28 前端小歌谣

1、回调函数方式

doFirstThing((err, data) => 
    if (err) 
        console.log(err);
        return;
    
    doSecondThing(data, function(err, data)
        if (err) 
            console.log(err);
            return;
        
        doThirdThing(data, function(err, data)
            if (err) 
                console.log(err);
                return;
            
        )
    )
)

2、Promise 方式

function takeLongTime(n) 
    return new Promise(resolve => 
        setTimeout(() => 
            resolve(n + 200)
        ,)
    )
    

function doThing (n) 
    return takeLongTime(n);

const time1 = 200;
doThing(time1)
.then(time2 => doThing(time2))
.then(time3 => doThing(time3))
.catch(err => 
    console.log(err)
)
复制代码

上面的代码每次异步调用递进200ms，并把下次需要延迟的时间传给下个异步函数

3、async & await

async function doThings () 
    try 
        const data1 =  await doThing(200);
        const data2 = await doThing(data1);
        const data3 = await doThing(data2);
     catch (err => 
        console.log(err)
    )