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 사양에서도 이 문제를 언급하고 있습니다.
- “이 API는 타이밍이 예상대로 정확하게 실행된다는 것을 보장하지 않습니다. CPU 로드, 기타 작업 등으로 인한 지연이 예상됩니다.”
흥미롭게도 동일한 세그먼트의 나머지 코드가 모두 실행을 완료할 때까지 시간 초과가 발생하지 않습니다. 따라서 시간 초과가 설정되고 장기 실행 기능이 실행되면 기능이 완료될 때까지 시간 초과가 시작되지 않습니다. 실제로 setTimeout 및 setInterval과 같은 비동기 함수는 이벤트 루프라는 대기열에 푸시됩니다.
이벤트 루프는 콜백 함수 대기열입니다. 비동기 함수가 실행되면 콜백 함수가 이 대기열로 푸시됩니다. JavaScript 엔진은 비동기 함수 실행이 완료될 때까지 이벤트 루프 처리를 시작하지 않습니다. 이는 JavaScript 코드가 유사하게 동작하더라도 다중 스레드가 아니라는 것을 의미합니다. 이벤트 루프는 FIFO(선입선출) 대기열입니다. 즉, 콜백이 대기열에 추가된 순서대로 실행됩니다. JavaScript는 그러한 코드를 작성하는 것이 얼마나 쉽기 때문에 Node의 개발 언어로 선택되었습니다.
아약스
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 );
로그인 후 복사
가장 흔한 실수는 $.ajax를 호출한 후 바로 데이터를 사용하는 것이지만 실제로는 이렇습니다.
xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
if ( xmlhttp.readyState === 4 ) {
console.log( data );
}
};
xmlhttp.send( null );
로그인 후 복사
기본 XmlHttpRequest 객체는 요청을 시작하고 XHR의 Readystatechnage 이벤트를 처리하기 위한 콜백 함수를 설정합니다. 그런 다음 XHR의 send 메소드를 실행하십시오. XHR이 실행 중일 때 ReadyState 속성이 변경되면 ReadyStatechange 이벤트가 트리거되고 XHR이 원격 서버로부터 응답 수신을 종료할 때만 콜백 함수가 실행을 트리거합니다.
비동기 코드 처리
비동기 프로그래밍은 흔히 "콜백 지옥"이라고 부르는 상황에 쉽게 빠질 수 있습니다. 실제로 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
}
});
}
}
});
}
}
});
로그인 후 복사
중첩된 콜백은 매우 불쾌할 수 있지만 이러한 코딩 스타일에 대한 몇 가지 솔루션이 있습니다.
중첩된 콜백은 쉽게 코드에 "악취"를 가져올 수 있지만 다음 스타일을 사용하여 이 문제를 해결할 수 있습니다
문제는 언어 자체에 있는 것이 아니라 프로그래머가 언어를 사용하는 방식인 Async Javascript에 있습니다.-
나쁜 언어는 없습니다. 오직 나쁜 프로그래머만 있습니다 - 비동기 JavaScript
이름이 지정된 함수
중첩된 콜백을 지우는 편리한 솔루션은 두 수준 이상의 중첩을 피하는 것입니다. 익명 함수를 전달하는 대신 명명된 함수를 콜백 매개변수로 전달합니다.
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.js 라이브러리는 여러 Ajax 요청/응답을 처리하는 데 도움이 될 수 있습니다.
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表示一个操作独立完成后返回的最终结果。
有很多库都包含了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 );
});
로그인 후 복사
这允许你执行两个异步函数后，等待它们的结果，之后再用先前两个调用的结果来执行另外一个函数。
- promise表示一个操作独立完成后返回的最终结果。
在这段代码里，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)
