JavaScript의 장점 중 하나는 비동기 코드를 처리하는 방식입니다. 비동기 코드는 이벤트 큐에 배치되고 스레드를 차단하지 않고 다른 모든 코드가 실행될 때까지 기다립니다. 그러나 초보자에게는 비동기 코드 작성이 어려울 수 있습니다. 그리고 이 기사에서는 여러분이 가질 수 있는 모든 혼란을 해소할 것입니다.
비동기 코드 이해
JavaScript에서 가장 기본적인 비동기 함수는 setTimeout과 setInterval입니다. setTimeout은 일정 시간이 지나면 주어진 함수를 실행합니다. 콜백 함수를 첫 번째 매개변수로, 밀리초 시간을 두 번째 매개변수로 받아들입니다. 다음은 사용 예입니다.
console.log( "a" );
setTimeout(function() {
console.log( "c" )
}, 500 );
setTimeout(function() {
console.log( "d" )
}, 500 );
setTimeout(function() {
console.log( "e" )
}, 500 );
console.log( "b" );
예상대로 콘솔은 먼저 "a"와 "b"를 출력하고 약 500밀리초 후에 "c", "d" 및 "e"가 표시됩니다. setTimeout은 실제로 예측할 수 없기 때문에 "대략"을 사용합니다. 실제로 HTML5 사양에서도 이 문제를 언급하고 있습니다.
흥미롭게도 동일한 세그먼트의 나머지 코드가 모두 실행을 완료할 때까지 시간 초과가 발생하지 않습니다. 따라서 시간 초과가 설정되고 장기 실행 기능이 실행되면 기능이 완료될 때까지 시간 초과가 시작되지 않습니다. 실제로 setTimeout 및 setInterval과 같은 비동기 함수는 이벤트 루프라는 대기열에 푸시됩니다.
아약스
AJAX(비동기 Javascript 및 XML)는 Javascript 언어의 환경을 영구적으로 변화시켰습니다. 갑자기, 웹 페이지를 업데이트하기 위해 브라우저를 더 이상 다시 로드할 필요가 없습니다. 다양한 브라우저에서 Ajax를 구현하는 코드는 길고 지루할 수 있습니다. 그러나 jQuery(및 기타 라이브러리)의 도움으로 쉽고 우아한 방식으로 클라이언트-서버 통신을 달성할 수 있습니다.jQuery 크로스 브라우저 인터페이스인 $.ajax를 사용하여 쉽게 데이터를 검색할 수 있지만 그 뒤에서 무슨 일이 일어나고 있는지 보여줄 수는 없습니다. 예:
var data;
$.ajax({
url: "some/url/1",
success: function( data ) {
// But, this will!
console.log( data );
}
})
// Oops, this won't work...
console.log( data );
xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
if ( xmlhttp.readyState === 4 ) {
console.log( data );
}
};
xmlhttp.send( null );
비동기 코드 처리
비동기 프로그래밍은 흔히 "콜백 지옥"이라고 부르는 상황에 쉽게 빠질 수 있습니다. 실제로 JS의 거의 모든 비동기 함수는 콜백을 사용하기 때문에 여러 비동기 함수를 지속적으로 실행한 결과는 중첩된 콜백 함수의 레이어와 그에 따른 복잡한 코드입니다.node.js의 많은 기능도 비동기식입니다. 따라서 다음 코드는 기본적으로 매우 일반적입니다.
var fs = require( "fs" );
fs.exists( "index.js", function() {
fs.readFile( "index.js", "utf8", function( err, contents ) {
contents = someFunction( contents ); // do something with contents
fs.writeFile( "index.js", "utf8", function() {
console.log( "whew! Done finally..." );
});
});
});
console.log( "executing..." );
GMaps.geocode({
address: fromAddress,
callback: function( results, status ) {
if ( status == "OK" ) {
fromLatLng = results[0].geometry.location;
GMaps.geocode({
address: toAddress,
callback: function( results, status ) {
if ( status == "OK" ) {
toLatLng = results[0].geometry.location;
map.getRoutes({
origin: [ fromLatLng.lat(), fromLatLng.lng() ],
destination: [ toLatLng.lat(), toLatLng.lng() ],
travelMode: "driving",
unitSystem: "imperial",
callback: function( e ){
console.log( "ANNNND FINALLY here's the directions..." );
// do something with e
}
});
}
}
});
}
}
});
중첩된 콜백은 쉽게 코드에 "악취"를 가져올 수 있지만 다음 스타일을 사용하여 이 문제를 해결할 수 있습니다
이름이 지정된 함수
var fromLatLng, toLatLng;
var routeDone = function( e ){
console.log( "ANNNND FINALLY here's the directions..." );
// do something with e
};
var toAddressDone = function( results, status ) {
if ( status == "OK" ) {
toLatLng = results[0].geometry.location;
map.getRoutes({
origin: [ fromLatLng.lat(), fromLatLng.lng() ],
destination: [ toLatLng.lat(), toLatLng.lng() ],
travelMode: "driving",
unitSystem: "imperial",
callback: routeDone
});
}
};
var fromAddressDone = function( results, status ) {
if ( status == "OK" ) {
fromLatLng = results[0].geometry.location;
GMaps.geocode({
address: toAddress,
callback: toAddressDone
});
}
};
GMaps.geocode({
address: fromAddress,
callback: fromAddressDone
});
async.parallel([
function( done ) {
GMaps.geocode({
address: toAddress,
callback: function( result ) {
done( null, result );
}
});
},
function( done ) {
GMaps.geocode({
address: fromAddress,
callback: function( result ) {
done( null, result );
}
});
}
], function( errors, results ) {
getRoute( results[0], results[1] );
});
这段代码执行两个异步函数，每个函数都接收一个名为"done"的回调函数并在函数结束的时候调用它。当两个"done"回调函数结束后，parallel函数的回调函数被调用并执行或处理这两个异步函数产生的结果或错误。
Promises模型
引自 CommonJS/A：
有很多库都包含了promise模型，其中jQuery已经有了一个可使用且很出色的promise API。jQuery在1.5版本引入了Deferred对象，并可以在返回promise的函数中使用jQuery.Deferred的构造结果。而返回promise的函数则用于执行某种异步操作并解决完成后的延迟。
var geocode = function( address ) {
var dfd = new $.Deferred();
GMaps.geocode({
address: address,
callback: function( response, status ) {
return dfd.resolve( response );
}
});
return dfd.promise();
};
var getRoute = function( fromLatLng, toLatLng ) {
var dfd = new $.Deferred();
map.getRoutes({
origin: [ fromLatLng.lat(), fromLatLng.lng() ],
destination: [ toLatLng.lat(), toLatLng.lng() ],
travelMode: "driving",
unitSystem: "imperial",
callback: function( e ) {
return dfd.resolve( e );
}
});
return dfd.promise();
};
var doSomethingCoolWithDirections = function( route ) {
// do something with route
};
$.when( geocode( fromAddress ), geocode( toAddress ) ).
then(function( fromLatLng, toLatLng ) {
getRoute( fromLatLng, toLatLng ).then( doSomethingCoolWithDirections );
});
这允许你执行两个异步函数后，等待它们的结果，之后再用先前两个调用的结果来执行另外一个函数。
在这段代码里，geocode方法执行了两次并返回了一个promise。异步函数之后执行，并在其回调里调用了resolve。然后，一旦两次调用resolve完成，then将会执行，其接收了之前两次调用geocode的返回结果。结果之后被传入getRoute，此方法也返回一个promise。最终，当getRoute的promise解决后，doSomethingCoolWithDirections回调就执行了。
事件
事件是另一种当异步回调完成处理后的通讯方式。一个对象可以成为发射器并派发事件，而另外的对象则监听这些事件。这种类型的事件处理方式称之为 观察者模式 。 backbone.js 库在withBackbone.Events中就创建了这样的功能模块。
var SomeModel = Backbone.Model.extend({
url: "/someurl"
});
var SomeView = Backbone.View.extend({
initialize: function() {
this.model.on( "reset", this.render, this );
this.model.fetch();
},
render: function( data ) {
// do something with data
}
});
var view = new SomeView({
model: new SomeModel()
});
还有其他用于发射事件的混合例子和函数库，例如 jQuery Event Emitter ， EventEmitter ， monologue.js ，以及node.js内建的 EventEmitter 模块。
一个类似的派发消息的方式称为 中介者模式 ， postal.js 库中用的即是这种方式。在中介者模式，有一个用于所有对象监听和派发事件的中间人。在这种模式下，一个对象不与另外的对象产生直接联系，从而使得对象间都互相分离。
绝不要返回promise到一个公用的API。这不仅关系到了API用户对promises的使用，也使得重构更加困难。不过，内部用途的promises和外部接口的事件的结合，却可以让应用更低耦合且便于测试。
在先前的例子里面，doSomethingCoolWithDirections回调函数在两个geocode函数完成后执行。然后，doSomethingCoolWithDirections才会获得从getRoute接收到的响应，再将其作为消息发送出去。
var doSomethingCoolWithDirections = function( route ) {
postal.channel( "ui" ).publish( "directions.done", {
route: route
});
};
这允许了应用的其他部分不需要直接引用产生请求的对象，就可以响应异步回调。而在取得命令时，很可能页面的好多区域都需要更新。在一个典型的jQuery Ajax过程中，当接收到的命令变化时，要顺利的回调可能就得做相应的调整了。这可能会使得代码难以维护，但通过使用消息，处理UI多个区域的更新就会简单得多了。
var UI = function() {
this.channel = postal.channel( "ui" );
this.channel.subscribe( "directions.done", this.updateDirections ).withContext( this );
};
UI.prototype.updateDirections = function( data ) {
// The route is available on data.route, now just update the UI
};
app.ui = new UI();
另外一些基于中介者模式传送消息的库有 amplify, PubSubJS, and radio.js。
结论
JavaScript 使得编写异步代码很容易. 使用 promises, 事件, 或者命名函数来避免“callback hell”. 为获取更多javascript异步编程信息,请点击Async JavaScript: Build More Responsive Apps with Less . 更多的实例托管在github上，地址NetTutsAsyncJS，赶快Clone吧 !
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
