从小小题目逐步走进 JavaScript 异步调用

AprilJ 发布于2019-08-21 17:15 / 910人阅读

摘要：问题的主要目的是考察对异步调用执行结果的处理，既然是异步调用，那么不可能同步等待异步结果，结果一定是异步的经常用来模拟异步操作。

问题

原题来自 @若泽的提问。

可修改下面的 aa() 函数，目的是在一秒后用 console.log() 输出 want-value

function aa() {
    setTimeout(function() {
        return "want-value";
    }, 1000);
}

但是，有额外要求：

aa() 函数可以随意修改，但是不能有 console.log()

执行 console.log() 语句里不能有 setTimeout 包裹

解答

也许这是个面试题，管它呢。问题的主要目的是考察对异步调用执行结果的处理，既然是异步调用，那么不可能同步等待异步结果，结果一定是异步的

setTimeout() 经常用来模拟异步操作。最早，异步是通过回调来通知（调用）处理程序处理结果的

function aa(callback) {
    setTimeout(function() {
        if (typeof callback === "function") {
            callback("want-value");
        }
    }, 1000);
}

aa(function(v) {
    console.log(v);
});

不过回调在用于稍大型一点的异步应用时，容易出现多层嵌套，所以之后提出了一些对其进行“扁平”化，这一部分可以参考闲谈异步调用“扁平”化。当然 Promise 是非常流行的一种方法，并最终被 ES6 采纳。用 Promise 实现如下：

function aa() {
    return new Promise(resolve => {
        setTimeout(function() {
            resolve("want-value");
        }, 1000);
    });
}

aa().then(v => console.log(v));

就这个例子来说，它和前面回调的例子大同小异。不过它会引出目前更推荐的一种方法——async/await，从 ES2017 开始支持：

function aa() {
    return new Promise(resolve => {
        setTimeout(function() {
            resolve("want-value");
        }, 1000);
    });
}

async function main() {
    const v = await aa();
    console.log(v);
}

main();

aa() 的定义与 Promise 方法中的定义是一样的，但是在调用的时候，使用了 await，异步等待，等待到异步的结果之后，再使用 console.log() 对其进行处理。

这里需要注意的是 await 只能在 async 方法中使用，所以为了使用 await 必须定义一个 async 的 main 方法，并在全局作用域中调用。由于 main 方法是异步的（申明为 async)，所以如果 main() 调用之后还有其它语句，比如 console.log("hello")，那么这一句话会先执行。

async/await 语法让异步调用写起来像写同步代码，在编写代码的时候，可以避免逻辑跳跃，写起来会更轻松。（参考：从地狱到天堂，Node 回调向 async/await 转变）

当然，定义 main() 再调用 main() 这部分可以用 IIFE 封装一下，

(async () => {
    const v = await aa();
    console.log(v);
})();

GPU云服务器云服务器 java中继承小题目同步调用和异步调用实现异步调用异步调用线程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89307.html

2017-10-25 前端日报

摘要：前端日报精选中的生命周期函数浅谈图像优化强推见效表示使用率不断升高认识屏幕加载骨架专题系列二十篇正式完结中文插件使用在中实现下拉加载数据，瀑布流，详细操作前端学习分钟前端国际化掘金周刊盒模型详解掘金，从玩玩具的心态开始，到打 2017-10-25 前端日报精选 React中的async/await生命周期函数浅谈Web图像优化强推 HTTPS 见效？Google 表示 HTTPS 使...

_ipo 2019-08-21 17:15 评论0 收藏0
前后分离模型之封装 Api 调用

摘要：和异步处理调用访问数据采用的方式，这是一个异步过程，异步过程最基本的处理方式是事件或回调，其实这两种处理方式实现原理差不多，都需要在调用异步过程的时候传入一个在异步过程结束的时候调用的接口。 Ajax 和异步处理调用 API 访问数据采用的 Ajax 方式，这是一个异步过程，异步过程最基本的处理方式是事件或回调，其实这两种处理方式实现原理差不多，都需要在调用异步过程的时候传入一个在异...

trilever 2019-08-21 17:40 评论0 收藏0
前端进击的巨人（三）：从作用域走进闭包

摘要：进击的巨人第三篇，本篇就作用域作用域链闭包等知识点，一一击破。在此我们遵照的方式，暂且称是闭包。所以，一名合格的前端，除了会用闭包，还要正确的解除闭包引用。进击的巨人第三篇，本篇就作用域、作用域链、闭包等知识点，一一击破。 showImg(https://segmentfault.com/img/bVburWd?w=1280&h=854); 作用域作用域：负责收集并维护由所有声明的...

Vicky 2019-08-23 14:49 评论0 收藏0
资深前端面试官的建议，助你走进阿里

摘要：适当引导面试官。如果有机会来实习，如何最有效的快速成长淘宝技术部前端内部有针对新同学的前端夜校，有专门的老师授课。阿里巴巴2019前端实习生招聘还剩最后两周，面向2019年11月1日至2020年10月31日之间毕业的同学，在这里分享下阿里前端面试考核的关键点： Q：在面试过程中，前端面试官如何考核面试者？A：会看同学为什么选择前端行业？是因为算法太难？Java、C++太难？还是因为热...

Pluser 2019-08-23 16:50 评论0 收藏0
干货 | 走进Node.js之启动过程剖析

摘要：具体调用链路如图函数主要是解析启动参数，并过滤选项传给引擎。查阅文档之后发现，通过指定参数可以设置线程池大小。原来的字节码编译优化还有都是通过多线程完成又继续深入调查，发现环境变量会影响的线程池大小。执行过程如下调用执行。作者：正龙（沪江Web前端开发工程师）本文原创，转载请注明作者及出处。随着Node.js的普及，越来越多的开发者使用Node.js来搭建环境，也有很多公司开始把...

luck 2019-08-21 16:21 评论0 收藏0