당신은 들여진 약속을 들었을 수도 있고, 많은 사람들이 그것에 대해 이야기하고 있지만, 왜 그렇게 특별한 지 모르겠습니다. 콜백을 사용할 수 없습니까? 특별한 것은 무엇입니까? 이 기사에서는 약속이 무엇이며 더 우아한 JavaScript 코드를 작성하는 방법을 살펴 보겠습니다.
읽기 쉬운 약속
예를 들어, Hipsterjesus API에서 일부 데이터를 가져 와서이 데이터를 페이지에 추가하려고합니다. 이 API의 응답 데이터는 다음과 같습니다.
{ "text": "<p> lorem ipsum ... </p>", "params": { "paras": 4, "type": "hipster-latin"}}콜백을 사용하려면 일반적으로 다음과 같은 것을 씁니다.
$ .getJson ( 'http://hipsterjesus.com/api/', function (data) {$ ( 'body'). Append (data.text);});jQuery를 사용한 경험이 있다면 GET 요청을 생성하고 응답이 JSON이되기를 원한다는 것을 알게됩니다. 또한 콜백 함수를 전달하여 응답의 JSON을 수락하여 문서에 데이터를 추가합니다.
글을 쓰는 또 다른 방법은 getjson 메소드에 의해 반환 된 약속 객체를 사용하는 것입니다. 이 반환 객체에 콜백을 직접 바인딩 할 수 있습니다.
var promise = $ .getJson ( 'http://hipsterjesus.com/api/'); promise.done (function (data) {$ ( 'body'). Append (data.text);});위의 콜백 예제에서 응답이 성공할 때 API 요청 결과를 문서에 추가합니다. 그러나 응답이 실패하면 어떻게됩니까? 우리는 약속에 실패한 프로세서를 바인딩 할 수 있습니다.
var promise = $ .getJson ( 'http://hipsterjesus.com/api/'); promise.done (function (data) {$ ( 'body'). Append (data.text);}); promise () {$ ( 'body').대부분의 사람들은 약속 변수를 삭제하는데, 이는 더 간결하고 코드의 기능을 한눈에 볼 수 있습니다.
$ .getJson ( 'http://hipsterjesus.com/api/') .done (function (data) {$ ( 'body'). Append (data.text);}). 실패 (function () {$ ( 'body').JQuery에는 항상 발생하는 이벤트 핸들러가 포함되어 있으며 요청 성공 또는 실패에 관계없이 호출됩니다.
$ .getJson ( 'http://hipsterjesus.com/api/') .done (function (data) {$ ( 'body'). Append (data.text);}). 실패 (function () {$ ( 'body'). Append ( '<p> 오, 뭔가 잘못되었다! </p>').). 이게 항상 추가 될 것입니다!. </p> ');약속을 사용함으로써 콜백 순서는 예상대로입니다. 일반 콜백이 먼저 호출 된 다음 실패한 콜백 및 마지막으로 계속되는 콜백을 확인할 수 있습니다.
더 나은 API
예를 들어, Hipsterjesus API의 캡슐화 된 객체를 작성하려고합니다. API에서 HTML 데이터를 반환하는 메소드 -HTML을 추가합니다. 요청을 구문 분석하기 위해 콜백 프로세서를 설정하는 것과 달리 메소드가 약속 객체를 반환 할 수 있습니다.
var hipsterjesus = {html : function () {return $ .getJson ( 'http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }};이것은 시원하기 때문에 그 가치를 구문 분석 할 때 또는 방법에 대해 걱정하지 않고 약속 대상을 우회 할 수 있습니다. 약속 반환 값이 필요한 모든 코드는 성공적인 응답 콜백으로 등록 할 수 있습니다.
당시 방법을 사용하면 약속의 결과를 수정하여 체인의 다음 프로세서로 전달할 수 있습니다. 이것은 이제 다음과 같은 새로운 API를 사용할 수 있음을 의미합니다.
hipsterjesus.html (). done (function (html) {$ ( "body"). Append (html);});최근까지 AngularJS는 킬러 기능을 가지고 있으며, 여기서 템플릿은 약속에 직접 구속 될 수 있습니다. Angular의 컨트롤러에서 : 다음과 같습니다.
$ scope.hipsteripsum = $ http.get ( 'http://hipsterjesus.com/api/');
이런 식으로 템플릿에 {{hipsteripsum.text}}을 쓰는 것은 매우 쉽습니다. 약속이 해결되면 Angular는보기를 자동으로 업데이트 할 필요가 없습니다. 불행히도, Angular 팀은이 기능을 포기했습니다. 이제 $ parseprovider.unwrompiss (true)를 호출하여 활성화 할 수 있습니다. Angular에 이미 다른 프레임 워크 에이 기능이 포함되어 있기를 바랍니다 (계속 주시하겠습니다).
체인 호출
약속의 가장 중요한 부분은 당신이 그것들을 함께 묶을 수 있다는 것입니다. 예를 들어, 배열을 반환하는 API에 메소드를 추가하려고합니다.
var hipsterjesus = {html : function () {return $ .getJson ( 'http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, 단락 : function () {return this.html (). }};위의 방법 에서이 HTML 메소드를 사용합니다. 단락 메소드에서 사용합니다. 약속 콜백 함수의 반환 값은 체인의 다음 콜백으로 전달되므로 데이터를 통과 할 때 데이터를 변경할 수있는 작고 기능적인 방법을 자유롭게 만들 수 있습니다.
필요에 따라 약속을 연결할 수 있습니다. 하나를 추가합시다.
var hipsterjesus = {html : function () {return $ .getJson ( 'http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, 단락 : function () {return this.html (). }, sentences : function () {return this.paragraphs (). 그런 다음 (함수 (단락) {return [] .concat.apply ([]], 단락 (function (paragraph) {return paragraph.split ( /.);}); }};여러 통화
아마도 약속의 가장 두드러진 특징은 다중 API를 호출하는 능력 일 것입니다. 콜백을 사용할 때 동시에 두 개의 API 통화를 만들어야하는 경우 어떻게됩니까? 당신은 이것을 쓸 수 있습니다 :
var firstData = null; var secondData = null; var responseCallback = function () {if (! firstData ||! secondData) return; // SAME 일} $. get ( "http://example.com/first", function (data) {firstData = data; responeecallback ();}); $ .get ( "http://example.com/second", function (data) {seconddata = data; responsecallback ();});약속을 사용하기가 훨씬 쉽습니다.
var firstPromise = $ .get ( "http://example.com/first"); var SecondPromise = $ .get ( "http://example.com/second"); $. (FirstPromise, sec
여기서 우리는 When Method를 사용하여 두 요청이 완료 될 때 호출되는 프로세서에 바인딩합니다.
결론적으로
이것은 약속입니다. 약속으로 성취 할 수있는 몇 가지 끔찍한 것들을 즉시 생각하길 바랍니다. 당신은 그들을 사용하는 것에 대해 가장 좋아하는 점은 무엇입니까? 의견에 말해줘!
*참고 : 단순화를 위해이 기사는 jQuery의 지연된 실행을 사용합니다. jQuery 지연 대상과 약속/A+ 사양 사이에는 미묘한 차이가 있습니다.
위의 기사보다 우아한 JavaScript 코드를 작성하기 위해 약속을 사용하는 방법은 내가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.