Javascript 비동기 프로그래밍 모델 Promise 모드 세부 소개_javascript 기술

Promise 프로그래밍 모드는 Thenable이라고도 하며 지연된 실행으로 이해될 수 있습니다. 각 Promise에는 Promise가 실패하거나 성공할 때 콜백하는 then이라는 고유한 인터페이스가 있습니다. 이는 장기간 실행될 수 있으며 반드시 완료할 필요가 없는 작업의 결과를 나타냅니다. 이 패턴은 긴 작업이 완료될 때까지 차단하고 기다리는 대신 약속된 결과를 나타내는 개체를 반환합니다.

현재 다수의 JavaScript 라이브러리(예: jQuery, Dojo, AngularJS)는 Promise라는 추상화를 추가합니다. 이러한 라이브러리를 통해 개발자는 실제 프로그래밍에서 Promise 패턴을 사용할 수 있습니다.

아래에서는 JavaScript 라이브러리가 Promise 모드를 사용하여 비동기 처리를 처리하는 방법을 설명하기 위해 jQuery를 예로 들어 실제로 콜백을 통해 내결함성 지원을 제공합니다. 작업이 성공하거나 실패하거나 어떤 상황에서든 해당 콜백을 실행하고 특정 로직에서 발생할 수 있는 모든 상황을 처리해 보세요.

먼저 jQuery가 일반적으로 어떻게 작동하는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var $info = $("#info ");
$.ajax({
url:"/echo/json/",
데이터: { json: JSON.stringify({"name": "someValue"}) },
유형: "POST",
성공: 함수(응답)
{
$info.text(response.name);
}
});

이 예에서는 설정이 성공하면 콜백이 지정되는 것을 볼 수 있는데 이는 좋은 콜백 방법이 아니며 jQuery 공식 문서에서는 더 이상 이 방법을 권장하지 않습니다. .jquery.com/jQuery.ajax/#jqXHR). Ajax 호출이 완료되면 성공 함수가 실행됩니다. 라이브러리에서 사용하는 비동기 작업에 따라 다양한 콜백을 사용할 수 있습니다(즉, 작업 성공 여부에 따라 콜백이 응답하게 됩니다). Promise 패턴을 사용하면 이 프로세스가 단순화되며 비동기 작업은 개체 호출만 반환하면 됩니다. 이 Promise를 사용하면 then이라는 메서드를 호출할 수 있으며, 이를 통해 콜백 함수의 수를 지정할 수 있습니다.

jQuery가 Promise를 생성하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var $info = $("#info");
$.ajax({
url: "/echo/json/",
데이터: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(함수(응답) {
$info.text(응답.이름);
});

jQuery ajax 객체는 xhr 객체를 반환하여 Promise 모드를 구현하므로 then 메소드를 호출할 수 있습니다. 이 방법의 장점은 아래와 같이 호출을 연결하여 독립적인 작업을 수행할 수 있다는 것입니다.

코드 복사 코드는 다음과 같습니다.

var $info = $("#info ");
$.ajax({
url: "/echo/json/",
데이터: {
json: JSON.stringify({
"name": "someValue"
})
},
유형: "POST"
})
.then(함수(응답) {
$info.text(response.name);
})
.then(function () {
$info.append("...자세히");
})
.done(function () {
$info.append (". ..드디어!");
});

많은 라이브러리가 Promise 패턴을 채택하기 시작했기 때문에 비동기 작업이 매우 쉬워질 것입니다. 하지만 반대의 관점에서 생각해보면 Promise는 어떤 모습일까요? 매우 중요한 패턴 중 하나는 함수가 성공 시 콜백과 실패 시 콜백이라는 두 가지 함수를 허용할 수 있다는 것입니다.

코드 복사 코드는 다음과 같습니다.

var $info = $("#info");

$.ajax({
// 오류 발생을 확인하려면 URL 변경
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
유형: "POST"
})
.then(함수(응답) {
// 성공
$info.text(response.name);
},
function () {
// failure
$info.text("좋은 개발자에게는 나쁜 일이 일어납니다");
})
.always(function () {
$info.append("...finally");
});

jQuery에서는 성공이나 실패에 관계없이 호출을 사용하여 호출할 대상을 지정한다는 점에 유의해야 합니다.
사실 이렇게 작성할 수도 있는데, 이는 공식 jQuery 문서에서도 권장하는 방법이기도 합니다.

코드 복사 코드는 다음과 같습니다.

var $info = $("#info ");

$.ajax({
// 오류 발생을 확인하려면 URL 변경
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.done(function (response) {
// 성공
$info.text(response.name);
}).fail(function () {
// failure
$info.text("좋은 개발자에게는 나쁜 일이 일어납니다");
})
.always(function () {
$info.append("...finally");
});

AngularJS가 Promise 패턴을 사용하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var m = angle.module("myApp ", [ ]);

m.factory("dataService", function ($q) {
function _callMe() {
var d = $q.defer();
setTimeout(function () {
d.resolve();
             //defer.reject();
        }, 100) 🎜 > };
});

function myCtrl($scope, dataService) {
$scope.name = "None";
$scope.isBusy = true;
dataService.callMe()

.then(function ( ) {

                                                                                                    > >
JSFiddle에서 이러한 예제를 시도해보고 어떤 일이 일어나는지 확인할 수 있습니다. Promise를 사용하여 비동기적으로 작업하는 것은 매우 간단한 방법이며 코드를 단순화할 수도 있습니다. 이는 실제로 일석이조의 좋은 방법입니다.
Promise에 대한 더 많은 소개와 예시를 보려면 공식 홈페이지(http://www.promisejs.org/)를 방문하세요.