面試官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++的拓展去實現。