JavaScript 비동기 프로그래밍 코드 작성 사양 Promise 연구 노트_javascript 기술

요즘 일이 좀 편해졌는데, 예전에 늘 보던 약속이라는 단어가 생각나서 한동안 참으면서 공부했어요.

1: 약속이란 무엇인가요? 왜 이런 것이 있습니까?

먼저 Promise는 자바스크립트 비동기 프로그래밍에서 코드 작성 문제를 해결하기 위해 만들어졌습니다.
JavaScript가 개발되면서 비동기식 시나리오가 점점 더 많아지고 있습니다. 프런트엔드에는 AJAX, setTimeout 등이 있고 백엔드 노드는 더 비동기적입니다. 전통적인 접근 방식에 따르면 콜백에는 다양한 콜백이 포함되어 있습니다. 코드는 혼란스러울 수 있습니다.
이때 CommonJS 커뮤니티에서는 비동기 코드를 구성하기 위해 when/then/resolve 등을 사용하는 것을 포함하여 비동기 코드 작성 방법을 정의하는 Promise/A라는 사양을 제안했습니다.
이 사양은 매우 우아하기 때문에 브라우저에서 기본적으로 지원되고 jQuery, when.js 등에서 지연되는 Promise()를 포함하여 많은 사람들이 이를 구현했습니다.
이들 라이브러리는 모두 이 사양을 준수하므로 하나만 학습해도 충분합니다. 저는 jQuery의 deferred를 주로 배웠기 때문에 이번 글에서는 주로 이 구현에 대해 이야기하겠습니다.

둘: jQuery의 연기

우선, 연기된 객체에 관해 Ruan Yifeng 선생님이 매우 상세한 글을 작성해 주셨는데요, 주소는 여기입니다. 그의 글을 먼저 읽고 나서 계속해서 읽어보시길 권합니다.
위에서 언급했듯이 Promise는 ajax와 같은 비동기 문제를 해결하는 데 사용되므로 차이점을 비교해 보겠습니다.
고전적인 jQuery AJAX 작성 방법은

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

$.ajax({
유형: "get",
URL: "",
성공: 함수 () {},
오류; 함수() {}
});

success 및 error 매개변수는 성공/실패 발생 시 콜백 함수입니다.

이제 jQuery의 AJAX 작성 방법이

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

$.ajax({
"get"을 입력하세요.
URL: ""
}).done(함수 () {}).fail(함수 () {});

성공 후에는 done 함수가 호출되고, 실패하면 실패 함수가 호출됩니다.

이 내용을 보면 어떤 객체에 완료/실패 메소드가 있는지 궁금하실 것입니다. $.ajax()는 어떤 객체를 반환하며 왜 이 두 가지 메소드가 있습니까?
대답은 아래에 소개된 Deferred 객체에 있습니다.

jQuery는 새로운 유형의 Deferred를 제공합니다. $.Deferred()를 통해 생성됩니다. 예를 들어

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

var def = $.Deferred();

이 정의는 완료/실패/해결/거부 등을 포함한 다양한 메소드를 상속합니다.
따라서 여기서 우리는 위의 $.ajax()가 실제로 이 객체를 반환한다는 것을 알고 있습니다.

지연된 객체에는 여러 가지 메소드가 있습니다. 자세한 내용은 API
를 참조하세요.
첫 번째는 자연스럽게 def 객체를 생성하는 것입니다. 여기에는 다음과 같은 다양한 방법이 있습니다.

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

var def = $.Deferred(); // 직접 생성
$.ajax({}); // ajax 메소드는 def 객체도 반환합니다
$.when(); // 메소드가 def 객체도 반환하는 경우

여기서 $.when()은 별도로 논의될 수 있습니다. 이 메서드는 일반적으로 하나 이상의 지연된 개체를 받은 다음 이러한 지연된 개체의 상태에 따라 $.when()에서 반환된 개체의 상태를 결정합니다. 한 가지 사용 시나리오는 여러 ajax 요청입니다. 그 중 하나가 실패하면 모두 실패로 간주됩니다. 그러면 $.when($.ajax(), $.when()과 같은 여러 ajax 메서드를 전달할 수 있습니다. 아약스()). 그런 다음 $.when은 def 객체를 반환합니다(이 두 요청의 결과에 따라 판단됨).

그런 다음 def 객체를 얻은 후 이 객체의 상태를 변경하는 일련의 메서드가 있습니다

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

def.resolve(); // def 객체를 완료로 설정하면 def.done()에 바인딩된 함수가 즉시 실행됩니다.
def.reject(); // def 객체를 실패로 설정하면 def.fail()에 바인딩된 함수가 즉시 실행됩니다.
def.notify(); // def 객체가 실행될 때 해당 콜백은 def.progress()입니다.

다음 단계는 콜백 방법을 설정하는 것입니다. 순서는 위에 해당합니다. 즉, 어떤 상태에서 어떤 콜백이 호출될 것인지입니다.

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

def.done(); // def.resolve()에 해당;
def.fail(); // def.reject()에 해당;
def.progress(); // def.notify()에 해당;
// 스페셜
def.always(); // 성공 또는 실패 시 호출됩니다
def.then(); // 성공(done), 실패(fail), 진행(progress) 순으로 여러 함수를 허용합니다.

사실 현시점에서 deferred object의 사용법은 거의 같습니다. 그러나 jQuery는 여러 API도 제공합니다

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

// 현재 상태 클래스 확인
def.isRejected();
def.isResolved();
def.state();

이러한 API의 이름에서 알 수 있듯이 자세한 내용은 위에 제공된 jQuery API 문서를 확인하세요.

또 다른 방법이 있습니다. 즉, 때때로 외부 def 객체를 제공하고 싶은데 이 객체는 다양한 상태에 대한 콜백을 설정할 수 있지만 상태를 변경할 수는 없습니다. 그런 다음

을 사용할 수 있습니다.

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

def.promise();

지연된 개체의 하위 집합인 약속 개체를 반환합니다. 완료/실패 및 기타 메서드를 사용할 수 있습니다. 이는 주로 def 개체의 상태를 보호하는 것입니다. 외부에서 수정했습니다.

이제 약속에 대한 이야기를 마쳤습니다. 이제 여러분의 프로젝트에 사용할 수 있습니다. 그리고 여러분 모두 새해 복 많이 받으시고 양의 해를 기원합니다^ ^.