动手打造自己的 async 和 await

最新推荐文章于 2024-04-10 22:21:00 发布

夏商周

最新推荐文章于 2024-04-10 22:21:00 发布

阅读量249

点赞数

分类专栏： JavaScript权威指南文章标签： javascript

本文链接：https://blog.csdn.net/zhangyingli/article/details/108816485

版权

本文探讨ES7中的async和await，它们基于生成器和Promise实现。通过逐步构建自己的async函数，阐述如何利用生成器解决异步问题，强调其非阻塞特性，并展示如何实现类似await的功能。

摘要由CSDN通过智能技术生成

async和await关键字是ES7中开始引入的，其背后的原理其实就是基于生成器和promise实现的。咱们一步一步打造自己的async 和 await 来更深入地理解这两个关键字。

ES7中的async和await

比如我们想异步从服务器获取一步一步获取多个数据，我们通常都是这么做的：

/**
 * 一个从服务器上异步获取数据的函数，返回一个promise，
 * 这个调用这个函数的地方可以通过promise的相关方法异步
 * 获取结果。
 */
function getServerData(queryParam) {
   
    return new Promise((resolve, reject) => {
   
        setTimeout(()=>{
   
            resolve({
   'result': 'querying ' + queryParam + ' is ok!!!'});
        }, 100); // 设置一个100ms的超时调用模拟从服务器获取结果
    });
};

/**
 * 通常async和await用法就是这样的，把一个函数标记为async，那么这个函数的调用就
 * 不会引起线程阻塞，函数里需要使用await来等待一个promise的许诺结果，await等待的
 * 函数必须返回一个promise。
 */
async function queryMsg() {
   
    try {
   
        const data1 = await getServerData('data1');
        console.log('query data1: ' + JSON.stringify(data1));
        const data2 = await getServerData('data2');
        console.log('query data2: ' + JSON.