Promise 異步操作按順序執行

 方法1 ES6 promise.then

//    初始化設備
const initVpn = () => {
    return new Promise((resolve)=>{
        setTimeout(item=>{
            console.log('初始化設備成功')
            resolve(true)
        },1000)
    })
}

//    登錄
const loginVpn = () => {
    return new Promise((resolve)=>{
        setTimeout(item=>{
            console.log('登錄成功')
            resolve(true)
        },1000)
    })
}

//    獲取資源
const getVpnResource = () => {
    return new Promise((resolve)=>{
        setTimeout(item=>{
            console.log('獲取資源成功')
            resolve(true)
        },1000)
    })
}

//    開啟VPN
const startService = () => {
    return new Promise((resolve)=>{
        setTimeout(item=>{
            console.log('開啟VPN成功')
            resolve(true)
        },1000)
    })
}

initVpn()
    .then(ok=>{
        if(ok) return loginVpn()
    })
    .then(ok =>{
        if(ok) return getVpnResource()
    }).then(ok =>{
    if(ok) return startService()
})

 

方法2  ES8 async /await

const start = async () => {
    try {
        await initVpn();
        await loginVpn();
        await getVpnResource();
        await startService();
    } catch (err) {
        console.log(
            '%cerr',
            'border-radius:3px;background:#000;color:#f6e387;padding: 2px 5px',
            err
        );
    }
};
start();

 

 

技巧：

 

1.多級嵌套

function A() {
    return new Promise(async (resolve, reject) => {
        const data = await B();
        resolve(data);
    });
}

const B = function () {
    return new Promise((resolve, reject) => {
        resolve({ code: 200 });
    });
};

const C = async () => {
    const data = await A();
    console.log('data', data);
};

C(); // {code: 200}