JavaScript에서 Promise의 사용법을 예시와 함께 자세히 설명_기본지식

발췌 – Parse JavaScript SDK는 이제 대부분의 비동기 메서드를 지원하는 jquery 호환 Promises 모드를 제공하므로 이것이 무엇을 의미하는지 다음을 읽고 나면 이해하게 될 것입니다.

"Promises"는 JavaScript 프로그래밍의 차세대 패러다임을 대표하지만 이것이 왜 그렇게 훌륭한지 이해하는 것은 간단하지 않습니다. 핵심은 약속이 완료될 수도 있고 완료되지 않을 수도 있는 작업 결과를 나타낸다는 것입니다. Promise 모드에 필요한 유일한 인터페이스는 Promise가 완료되거나 실패할 때 호출되는 콜백 함수를 등록하는 데 사용할 수 있는 then 메서드를 호출하는 것입니다. 이는 일반적으로 CommonJS Promises/A 제안. 예를 들어, Prase.Object 객체를 저장하고 싶습니다. 이는 비동기 작업입니다. 이전 콜백 패러다임에서는 다음과 같이 코드를 작성할 수 있습니다.

object.save({ key: value }, {
 success:function(object) {
  // the object was saved.
 },
 error:function(object, error) {
  // saving the object failed.
 }
});
在新的Promise范式中，同样的代码你可以这样写:
 
object.save({ key: value }).then(
 function(object) {
  // the object was saved.
 },
 function(error) {
  // saving the object failed.
 });

별로 차이가 없나요? 그래서 큰 문제는 무엇입니까? Promise의 진정한 힘은 여러 개의 Promise를 연결하는 것입니다. promise.then(func)이 호출되면 이전 Promise가 완료될 때까지 실행되지 않는 새로운 Promise가 반환됩니다. 하지만 여기에는 특별한 경우가 있습니다. 내 콜백이 그때까지 새로운 Promise를 반환하면 그때까지 반환된 Promise는 콜백 실행이 완료될 때까지 실행되지 않습니다. 자세한 내용은 Promises/A를 참조하세요. 이는 예제를 통해 더 명확하게 이해할 수 있습니다.

객체를 찾은 다음 업데이트하는 로그인 코드를 작성한다고 가정해 보겠습니다. 이전 콜백 패러다임에서는 피라미드 코드 완성을 사용할 수 있습니다.

Parse.User.logIn("user","pass", {
 success:function(user) {
  query.find({
   success:function(results) {
    results[0].save({ key: value }, {
     success:function(result) {
      // the object was saved.
     }
    });
   }
  });
 }
});

벌써 말도 안 되는 소리지만, 더 말도 안되는 것은 오류 처리조차 없다는 점입니다. 하지만 Promise 체인 구조로 인해 코드가 더욱 편안해 보입니다.

Parse.User.logIn("user","pass").then(function(user) {
 returnquery.find();
}).then(function(results) {
 returnresults[0].save({ key: value });
}).then(function(result) {
 // the object was saved.
});

와! 정말 많아요!

오류 처리
위 코드는 간단할 때 오류 처리를 추가하지 않았지만 추가하고 나면 이전 콜백 코드가 엉망이라는 것을 알 수 있습니다.

Parse.User.logIn("user","pass", {
 success:function(user) {
  query.find({
   success:function(results) {
    results[0].save({ key: value }, {
     success:function(result) {
      // the object was saved.
     },
     error:function(result, error) {
      // An error occurred.
     }
    });
   },
   error:function(error) {
    // An error occurred.
   }
  });
 },
 error:function(user, error) {
  // An error occurred.
 }
});

Promise는 처리 완료 여부를 알기 때문에 오류가 발생할 때까지 콜백을 실행하지 않고 오류를 전달할 수 있습니다. 예를 들어 위 코드는 다음과 같이 축약될 수 있습니다.

Parse.User.logIn("user","pass").then(function(user) {
 returnquery.find();
}).then(function(results) {
 returnresults[0].save({ key: value });
}).then(function(result) {
 // the object was saved.
},function(error) {
 // there was some error.
});

일반적으로 개발자는 비동기 Promise 실패가 예외 발생과 동일하다고 생각합니다. 실제로 콜백에서 오류가 발생하면 Promise는 실패 메시지를 반환합니다. 사용 가능한 다음 오류 처리기에 오류를 전달하는 것은 오류가 발견될 때까지 예외를 발생시키는 것과 같습니다.

jQuery, 백본 및 구문 분석
개발자가 사용할 약속을 구현하는 라이브러리가 많이 있습니다. jQuery의 Deferred, Microsoft의 WinJS.Promise, when.js, q 및 dojo.Deferred와 같습니다.

그런데, 알아두면 흥미로운 사실이 있습니다. 여기에서 길고 흥미로운 jQuery 풀 요청 토론을 읽을 수 있습니다. jQuery의 구현은 Promises/A의 규칙을 완전히 따르지 않습니다. 다른 구현 방법은 여러 곳에서 사용됩니다. 실험을 통해 한 가지 차이점만 발견했습니다. 오류 처리기가 단순히 약속을 반환하는 것 이외의 다른 정보를 반환하는 경우 대부분의 구현에서는 오류를 전파하지 않고 오류를 처리하는 것을 고려합니다. 그러나 jquery는 여기서 이 오류를 처리하지 않고 대신 전달합니다. 서로 다른 시스템의 Promise가 원활하게 혼합되어야 하지만 여전히 주의해야 합니다. 한 가지 잠재적인 문제는 Promise가 동일하게 처리되기 때문에 오류 처리기에서 Promise가 반환(원래 값 대체)된다는 것입니다.

doFailingAsync().then(function() {
 // doFailingAsync doesn't succeed.
},function(error) {
 // Try to handle the error.
 return"It's all good.";
}).then(function(result) {
 // Non-jQuery implementations will reach this with result === "It's all good.".
},function(error) {
 // jQuery will reach this with error === "It's all good.".
});

Backbone 0.9.10의 최신 버전에서 비동기 메소드는 이제 jQuery Promise 유형인 jqXHR을 반환합니다. Parse JavaScript SDK의 목표 중 하나는 Backbone과 최대한 호환되는 것입니다.

Cloud Code
와 잘 작동하지 않기 때문에 jqXHR을 반환할 수 없습니다. Parse.Promise 클래스를 추가하세요. jQuery Deferred 표준을 따릅니다. Parse JavaScript SDK최신 버전에서는 이러한 새로운 객체를 지원하기 위해 모든 비동기 메서드가 업데이트되었으며 이전 콜백 메서드를 계속 사용할 수 있습니다. 그러나 위에 나열된 예를 보면 귀하는 새로운 방식을 선호한다고 생각합니다. 그러니 약속을 시도해 보세요!