JS异步操作这点事儿

写在最前面

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

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

异步操作

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

为什么使用 Promise

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

Promise

• then 获取 resolve 传递的值

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 功能等于 then
• await 必须放在 async 定义的函数中使用。

使用 then 获取 resolve 的值

(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 ===');
    });
})();

通过 await 把 resolve 值传递给声明的变量

(async () => {
    console.log('=== START ===');
    let p1 = await new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('=== 111 ===');
        }, 1000);
    });
    console.log(p1);

    let p2 = await new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 222 ===');
        }, 1000);
    });
    console.log(p2);

    let p3 = await new Promise(resolve => {
        setTimeout(() => {
            resolve('=== 333 ===');
        }, 1000);
    });
    console.log(p3);
    console.log('=== END ===');
})();

持续更新