JS异步操作这点事儿

写在最前面

自己老是学了忘记，忘了再学，这次干脆都记录下来！

也当个工具文档随时来使用吧。

异步操作

• JS 中存在很多异步操作，使用 Promise 或者 async await 可以将异步操作队列化。
• 可以按照期望的顺序执行，返回符合预期的结果。
• 当然特别适用于数据请求。

为什么使用 Promise

• 代码更清晰，不用嵌套回调方式或者使用 setTimeout
• 前面的实行完成，发送 resolve 后续才能实行，按照期望的顺序执行，返回符合预期的结果。

Promise

console.log('=== START ===');
new Promise(resolve => {
    setTimeout(() => {
        resolve('=== 111 ===');
    }, 1000);
}).then(msg => {
    console.log(msg);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 222 ===');
        }, 1000);
    })
}).then(msg => {
    console.log(msg);
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 333 ===');
        }, 1000);
    })
}).then(msg => {
    console.log(msg);
    console.log('=== END ===');
});
复制代码

async await

• 是 promise 的语法糖
• async 加在函数前，将返回 promise
• await 必须放在 async 定义的函数中使用

(async () => {
    console.log('=== START ===');
    await new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('=== 111 ===');
        }, 1000);
    }).then(msg => {
        console.log(msg);
    });
    await new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 222 ===');
        }, 1000);
    }).then(msg => {
        console.log(msg);
    });
    await new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 333 ===');
        }, 1000);
    }).then(msg => {
        console.log(msg);
        console.log('=== END ===');
    });
})();
复制代码

持续更新