面试官js如何实现异步编程

❶ 怎样用js实现异步转同步

源起

小飞是一名刚入行前端不久的新人，因为进到了某个大公司，俨然成为了学弟学妹眼中'大神'，大家遇到js问题都喜欢问他，这不，此时他的qq弹出了这样一条消息

"hi,大神在吗？我有个问题想问，现在我们的代码里面有这样的东西,可是得不到正确的返回结果

1234567functiongetDataByAjax () {return$.ajax(...postParam)}vardata = getDataByAjax()if(data) {console.log(data.info)}

"哦，你这里是异步调用，不能直接获得返回值，你要把if语句写到回调函数中",小飞不假思索的说到，对于一个‘专业’的fe来说，这根本不是一个问题。
“可是我希望只是改造getDataByAjax这个方法，让后面的代码成立。”
“研究这个没有意义，异步是js的精髓，同步的话会阻塞js调用，超级慢的，但是你要一再坚持的话，用async:true就好了”
“不愧是大神，我回去立刻试一试，么么哒”

两天后，她哭丧着脸登上了qq
“试了一下你的方法，但是根本行不通，哭~~”
“别急，我看看你这个postParam的参数行吗”

123456{...dataType:'jsonp',async:true...}

"这是一个jsonp请求啊，老掉牙的东西了，，jsonp请求是没有办法同步的"
“我知道jsonp请求的原理是通过script标签实现的，但是，你看，script也是支持同步的呀，你看tags/attscriptasync.asp”
“额，那可能是jquery没有实现吧，哈哈”
“大神，你能帮我实现一个jsonp的同步调用方式嘛，拜托了(星星眼)”
虽然他有点奇怪jquery为什么没有实现，但是既然w3school的标准摆在那里，码两行代码又没什么，

loadJsonpSync = (url) => {varresult;window.callback1 = (data) => (result = data)lethead = window.document.getElementsByTagName('head')[0]letjs = window.document.createElement('script')js.setAttribute('type','text/javascript')js.setAttribute('async','sync')// 这句显式声明强调src不是按照异步方式调用的js.setAttribute('src', url)head.appendChild(js)returnresult}

额，运行起来结果竟然是undefined！w3cshool的文档竟然也不准，还权威呢，我看也不怎么着，小飞暗自想到。

“刚才试了一下，w3school文档上写的有问题，这个异步属性根本就是错的”
“可是我刚还试过一次这个，我确认是好的呀”

12<script src="loop50000 && put('frist').js"></script><script src="put('second').js"></script>

(有兴趣的同学可以实现以下两个js，并且加上async的标签进行尝试。)
“这个，我就搞不清楚了”，小飞讪讪的说到
对方已离线

抽象

关于这个问题，相信不只是小飞，很多人都难以解答。为什么ajax可以做到同步，但jsonp不行，推广到nodejs上，为什么readFile也可以做到同步(readFileSync)，但有的库却不行。
（至于script的async选项我们暂时避而不谈，是因为现在的知识维度暂时还不够，但是不要着急，下文中会给出明确的解释）
现在，让我们以计算机科学的角度抽象这个问题：

我们是否可以将异步代码转化为同步代码呢？(ASYNCCALL => SYNCCALL)

既然是抽象问题，那么我们就可以不从工程角度/性能角度/实现语言等等等方面来看(同步比异步效率低下),每增加一个维度，复杂程度将以几何爆炸般增长下去。

首先，我们来明确一点，==在计算机科学领域==同步和异步的定义

同步（英语：Synchronization），指对在一个系统中所发生的事件（event）之间进行协调，在时间上出现一致性与统一化的现象。在系统中进行同步，也被称为及时（in time）、同步化的（synchronous、in sync）。--摘自网络
异步的概念和同步相对。即时间不一致，不统一

明确了这一点，我们可以借助甘特图来表示同步和异步

注意看我们标红的地方，如果你完成了小测验1，就会得到和这张图一致的顺序

==同步执行的代码片段必然在异步之前。==

所以，无论从理论还是实际出发，我们都不得不承认，在js中，把异步方法改成同步方法这个命题是水月镜花

哦对了，最后还需要解释一下最开始我们埋下的坑， 为什么jsonp中的async没有生效，现在解释起来真的是相当轻松，即document.appendChild的动作是交由dom渲染线程完成的，所谓的async阻塞的是dom的解析，而非js引擎的阻塞。实际上，在async获取资源后，与js引擎的交互依旧是push taskQueue的动作，也就是我们所说的async call

推荐阅读： 关于dom解析请大家参考webkit技术内幕第九章资源加载部分

峰回路转

相信很多新潮的同学已经开始运用切了async/await语法，在下面的语法中，getAjax1和console之间的具有同步的特性

1234asyncfunction() {vardata = await getAjax1()console.log(data)}

讲完了event loop和异步的本质，我们来重新审视一下async/await。
老天，这段代码亲手推翻了==同步执行的代码片段必然在异步之前。== 的黄金定律！
惊不惊喜，意不意外，这在我们的模型里如同三体里的质子一样的存在。我们重新审视了一遍上面的模型，实在找不到漏洞，找不到任何可以推翻的点，所以真的必须承认，async/await绝对是一个超级神奇的魔法。
到这里来看我们不得不暂时放弃前面的推论，从async/await本身来看这个问题
相信很多人都会说，async/await是CO的语法糖，CO又是generator/promise的语法糖，好的，那我们不妨去掉这层语法糖，来看看这种代码的本质, 关于CO，读的人太多了，我实在不好老生常谈，可以看看这篇文章，咱们就直接绕过去了,这里给出一个简易的实现
/5800210.html

functionwrap(wait) {variteriter = wait()const f = () => {const { value } = iter.next()value && value.then(f)}f()}function*wait() {varp = () =>newPromise(resolve => {setTimeout(() => resolve(), 3000)})yieldp()console.log('unlock1')yieldp()console.log('unlock2')console.log('it's sync!!')}

终于，我们发现了问题的关键，如果单纯的看wait生成器(注意，不是普通的函数)，是不是觉得非常眼熟。这就是我们最开始提出的spinlock伪代码！！！
这个已经被我们完完全全的否定过了，js不可能存在自旋锁，事出反常必有妖，是的，yield和*就是表演async/await魔法的妖精。
generator和yield字面上含义。Gennerator叫做生成器，yield这块ruby，python，js等各种语言界争议很大，但是大多数人对于‘让权’这个概念是认同的(以前看到过maillist上面的争论，但是具体的内容已经找不到了)

扩展阅读---ruby元编程 闭包章节yield(ruby语义下的yield)

所谓让权，是指cpu在执行时让出使用权利，操作系统的角度来看就是‘挂起’原语，在eventloop的语义下，似乎是暂存起当时正在执行的代码块(在我们的eventloop里面对应runPart)，然后顺序的执行下一个程序块。
我们可以修改eventloop来实现让权机制

小测验2 修改eventloop使之支持yield原语

至此，通过修改eventloop模型固然可以解决问题，但是，这并不能被称之为魔法。

和谐共存的世界

实际上通过babel，我们可以轻松的降级使用yield,（在es5的世界使用让权的概念！！）
看似不可能的事情，现在，让我们捡起曾经论证过的
==同步执行的代码片段必然在异步之前。== 这个定理，在此基础上进行进行逆否转化

==在异步代码执行之后的代码必然不是同步执行的(异步的)。==

这是一个圈子里人尽皆知的话，但直到现在他才变得有说服力（我们绕了一个好长的圈子）
现在，让我们允许使用callback，不使用generator/yield的情况下完成一个wait generator相同的功能！！！

functionwait() {const p = () => ({value:newPromise(resolve => setTimeout(() => resolve(), 3000))})letstate = {next: () => {state.next = programPartreturnp()}}functionprogramPart() {console.log('unlocked1')state.next = programPart2returnp()}functionprogramPart2() {console.log('unlocked2')console.log('it's sync!!')return{value: void 0}}returnstate}

太棒了，我们成功的完成了generator到function的转化(虽然成本高昂)，同时，这段代码本身也解释清楚了generator的本质，高阶函数，片段生成器，或者直接叫做函数生成器！这和scip上的翻译完全一致,同时拥有自己的状态(有限状态机)

推荐阅读 计算机程序的构造和解释 第一章generator部分
小测验3 实际上我们提供的解决方式存在缺陷，请从作用域角度谈谈

其实，在不知不觉中，我们已经重新发明了计算机科学中大名鼎鼎的CPS变换
Continuation-passing_style

最后的最后，容我向大家介绍一下facebook的CPS自动变换工具--regenerator。他在我们的基础上修正了作用域的缺陷，让generator在es5的世界里自然优雅。我们向facebook脱帽致敬！！egenerator

后记

同步异步 可以说是整个圈子里面最喜欢谈论的问题，但是，谈来谈去，似乎绝大多数变成了所谓的‘约定俗称’，大家意味追求新技术的同时，却并不关心新技术是如何在老技术上传承发展的，知其然而不知其所以然，人云亦云的写着似是而非的js。

==技术，不应该浮躁==

PS: 最大的功劳不是CO，也不是babel。regenerator的出现比babel早几个月，而且最初的实现是基于esprima/recast的，关于resprima/recast,国内似乎了解的并不多，其实在babel刚刚诞生之际， esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator几大族系围绕着react产生过一场激烈的斗争，或许将来的某一天，我会再从实现细节上谈一谈为什么babel笑到了最后~~~~

❷ nodeJS中，异步的具体实现者是什么

在JS中，异步的实现依靠AJAX。
在底层实现中，实现ajax的源头是XMLHttpRequest对象，通过创建XMLHttpRequest对象并使用其方法传递请求，接收数据来实现异步操作。

❸ 关于generator异步编程的理解以及如何动手写

关于generator异步编程的理解以及如何动手写一个co模块

generator出现之前，想要实现对异步队列中任务的流程控制，大概有这么一下几种方式：

• 回调函数

• 事件监听

• 发布/订阅

• promise对象

第一种方式想必大家是最常见的，其代码组织方式如下：



我们把函数放到run的执行器里面，便实现了同步操作异步代码的过程

❹ Node.js 的面试题是怎么样的

我的面试题：
1. 启动一个Node Server，通过这个Server访问一个php文件，怎么输出运行解析php后的结果？
2. 怎么在Node里实现一个类似php里的sleep()函数？
3. Node 自诩异步编程是它的优势，为什么在引用外部包的时候（require()函数）是同步方法，而非异步方法
4. Node 里有readFile和对应的同步方法readFileSync，但http.get() 却没有 http.getSync()，如果要实现一个http.getSync()，怎么做？

这些问题都是开放式，甚至你可以理解没有标准答案，主要看怎么回答，比如说第二题，如果能把NodeJS中多数用到阻塞的场景说清楚以及怎么模拟sleep()，就大概能知道他写NodeJS有多深了。还有第三题，根本无解，但如果讲出对同步异步编程的优缺点、或者说出NodeJS在同步异步API设计中不一致和缺陷，也算比较了解NodeJS了。

❺ 如何在一个类中实现异步

开个线程池，为每个方法的执行分配一个线程，创建一个hashmap结果集，每个方法执行完，将其存入hashmap中，最后通过判断hashmap的大小，判断所有方法线程是否执行完毕，执行完毕则返回该hashmap。
异步编程其实很常见，特别是在出线Node.js之后，异步编程更是让很多开发者受益。那么回到最初的地方，传统的前端开发中如何实现异步编程呢？下面列举了js实现异步编程的四种方式。方法一：使用回调函数方法二：事件监听可以定义一个事件，并为这个事件设定处理函数。这样只有当这个时间发生的情况下，对应的处理函数才会被执行。方法三：事件的发布/订阅这个模式在NodeJS以及其他JS框架中都有实现，是一个非常常用的异步编程方式。
方法四：Promise模式ES6中提供了原生的Promise对象，这个模式最开始只是一个构想，后来由一些框架库实现。Promise对象代表了未来才会知道结果的事件。Promise的基本思路就是，将需要异步执行的事件储存起来，然后根据异步事件之行后的结果状态执行下一步的操作。具体的Promise对象的原理和ES6中的使用方法将在下一篇文章中更加深入的进行介绍。
多线程实现。
过程如下
创建一下对象：
robot对象
avi保存对象
行走对象
在robot里使用多线程，2个线程就够，1个执行avi保存对象，1个执行行走对象。
之所以要创建3个对象，主要是考虑到软件工程的分而治之的思想。
另外如果你真是要制作机器人的话
可以做2个系统一个是运动控制系统，一个是avi存储系统，系统间不互联。这样互相不会有干扰，而且容易实现，不会让功能混乱。

❻ javascript同步和异步的区别与实现方式

举个生活中的示例就会很明白：

如：

早上起床,先刷牙,再烧水,等水烧开了洗脸,再整理发型.是同步

先刷牙,再烧水,再整理发型,等水壶滴的一声通知我水烧开了,我再取刚烧开的水洗脸,是异步.

<script>
varflag=false;
functionfuncTest(t,func){
setTimeout(function(){
(function(param){
console.log(param);
func();
}(t));
},t*1000);
}
varfuncList=[];
funcList.push(function(){funcTest(4,function(){
flag=true;//同步标记量
})});//不同的异步函数添加进队列
funcList.push(function(){funcTest(3,function(){
flag=true;
})});//不同的异步函数添加进队列
funcList.push(function(){funcTest(2,function(){
flag=true;
})});//不同的异步函数添加进队列
dealFuncSync(funcList);
functiondealFuncSync(funcList){
functioncallBackSync(){
if(!funcList||funcList.length==0){
console.log('end');
return;
}
flag=false;
funcList.shift()();
setTimeout(function(){
if(flag){//控制队列函数同步
callBackSync();
}else{
setTimeout(arguments.callee,100);
}
},100);
}
callBackSync();
}
</script>

❼ 如何进行nodejs异步编程

更新下，我之所以让您玩一下AJAX，是希望您体验一下异步，并不是希望您了解AJAX这机制的实现方法，因为AJAX是一个特别典型且简单的异步场景，比如：
执
行某个函数 -> 执行语句A,B,C,D -> 在D语句发起异步请求，同时向引擎注册一个回调事件 -> 执行E,F,G
->退出函数块 ，引擎Loop...Loop...Loop，此时异步的请求得到了Response，之前注册的回调被执行。

@VILIC VANE
也提到了，实际上Node.js主要是为了应对主流web
app存在大量I/O等待而CPU闲置的场景所衍生的解决方案，而在架构上，它的后端有一个底层的worker封装，每当你有一个诸如addUser这样
的I/O操作时，它们都会被交由worker去执行从而达到让出尽快让出当前函数的执行权的目的，在向引擎注册完回调后，内部会通过事件轮询去检查该I
/O事件的句柄，当句柄显示该事件操作完成后，则注册的回调则被执行。

所以，假设有人（按题设，简化一下场景，有且只有2个人）同时请求
addUser(A)和userList(B)，B的请求会在执行完A的请求内部所有同步代码后被执行，而哪怕worker此时仍然在进行addUser
这一 I/O操作，用户B也并不会被引擎挂起或者等待。这就是为什么Node.js单节点却一样可以拥有高负载能力的原因。

至于什么样的代码是异步的，你看看node文档里fs模块的使用方法就知道了，大概的形式就是如下这种。
mole.method( args [,callback] )

当然还有一种比较极端的情况，假设您使用的数据库是山寨的，驱动是基于同步实现的，那么B就该等多久等多久把，树荫底下喝杯茶，下个棋，和后面的C,D,E,F,G打个招呼呗~
我推荐您先去玩一下前端的AJAX了解一下 异步编程方式，体验一下异步的“感觉”，然后看一本叫《JavaScript异步编程》的书。

Node.js

是一款基于Event-driven的模型构建的Framework，它典型的特征就是通过内置的事件轮询来调度事件，通常来说node.js的数据库驱
动都是基于异步实现的，所以在实际情况中，A提交博客和B注册用户这两个请求是可以同时由Node.js
来handle，并按照实际操作的处理事件分别调度给予浏览器响应。

当然，假设您在业务代码里写了一个耗时很久的同步代码（比如直接写一
个while(true)的loop，Node就死了），由于JavaScript本身单线程的限制，所以整个App就会被block住，后续的事件/程
序只有等到该段代码执行完成之后才会被处理，这也是为什么我们通常不建议在Node.js层做大规模计算（JS本身的计算效率太低，会导致Node吞吐量
会大大降低），而倾向由C++的拓展去实现。