js promise chain_javascript 기술에 대한 심층적인 이해

새 표준에는 기본 Promise가 추가되었습니다.

여기에서는 체인의 사용에 대해서만 논의하고 세부 사항에 대해 생각합니다.

1. then()과 catch() 복습

콜백 함수는 Promise의 최종 결과를 수신하기 위해 then() 및 catch()의 매개변수에 배치될 수 있습니다.

then()은 매개변수를 받을 수 있으며, 이 콜백은 Promise가 해결()할 때만 호출됩니다.

then()은 두 번째 매개변수를 받을 수도 있으며, 두 번째 콜백은 Promise Reject() 상황을 처리하는 데 사용됩니다.

catch()는 Promise Reject() 상황을 구체적으로 처리합니다.

즉, then()은 양방향으로 사용될 수 있고 catch()는 Reject() 상황만 처리할 수 있습니다. 하지만, resolve()를 처리하려면 then()을 사용하고, Reject()를 처리하려면 catch()를 사용하는 것이 좋습니다.

두 번째로 말씀드리고 싶은 것은 위의 내용이 아닌 기본적인 사용법에 대한 것입니다. 여기서는 then()과 catch()의 반환 값과 체인 사용에 대한 세부 사항에 대해 이야기하기 시작합니다.

공식 문서에는 then()과 catch() 모두 Promise를 반환한다고 나와 있는데, 이는 매우 흥미롭습니다. (저는 js를 처음 접했고, 이전에 Promise에 노출된 적이 없습니다.)

우선 새로 반환된 Promise는 원래 Promise가 아닙니다.

둘째, 새로 반환된 Promise의 상태 변경(resolve()인지 거절()인지 여부)은 이전 Promise의 상태 및 then()이 사용되는 방식과 관련이 있습니다.

먼저 then()의 상황을 설명해주세요: (catch와 유사)

var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

참고: 위의 task1과 task2는 모두 콜백입니다.

여기서 p1은 생성된 Promise이고 직접 해결()입니다.

p2는 then()을 사용하여 얻은 Promise이고, p3도 then()을 사용하여 얻은 Promise입니다.

그럼 p2의 상태는 어떻게 변하나요?

이 개념을 설명하기 위해 다음 그림을 사용하겠습니다.

그 중

1. 팔각형은 Promise 객체를 나타냅니다.

2. 원은 Promise의 내부 상태를 나타내고, 검은색 화살표는 상태 변경을 나타냅니다.

3. 오른쪽 화살표는 then 함수 호출을 나타냅니다.

4. 즉, then 함수가 호출되는 동안 새로운 Promise 객체가 생성됩니다.

5. then 함수를 호출할 때 이전 Promise 객체의 상태가 무엇인지 알 수 없습니다. 보류 중인가요, 아니면 확정인가요? 이것은 가정할 수도 없고 외부 세계에서 볼 수도 없습니다.

6. then 함수 호출은 차단되지 않습니다. 즉, p1이 여전히 천천히 자체 상태를 마이그레이션하는 경우에도 p2와 p3이 거의 즉시 생성됩니다.

우리는 p1의 상태가 해결되었음을 알고 있습니다(위 코드 참조). 그러나 여기서는 p2 및 p3의 상태가 어떻게 변경되는지 설명하지 않았습니다. 해결 또는 거부됩니까? 아래에서 새로운 이미지를 확인해 보세요.

더 많은 다이아몬드 모양을 보실 수 있습니다.

다이아몬드는 호출 시 전달된 콜백 함수를 나타냅니다. 위쪽 다이아몬드는 [해결된 이전 Promise 개체에 대한] 들어오는 처리를 나타내고 아래쪽 다이아몬드는 [거부된 이전 Promise 개체에 대한] 들어오는 처리를 나타냅니다.

참고: 이 예에서는 거부 처리가 없습니다. 즉, 위 그림에서는 아래쪽 마름모를 그려서는 안 됩니다. 여기서는 위쪽 및 아래쪽 마름모만 그려야 합니다. then을 사용하거나 잡는 방법은 우리에게만 적용됩니다. 샘플 코드를 다시 살펴보세요.

<span>var</span> p1 = Promise.resolve("Success"<span>);</span><span>var</span> p2 =<span> p1.then(task1);//产生了向上的菱形</span><span>var</span> p3 = p2.then(task2);//产生了向上的菱形

보시다시피 당시 두 번째 매개변수를 제공하지 않았는데, 이는 거부 상황을 처리하지 못했다는 의미입니다.

또한 거부를 처리하려면 then을 사용하거나 catch를 사용하면 거부를 처리하는 데 특별히 사용됩니다.

1. p1의 최종 상태(해결 또는 거부)가 올바르게 처리되면(호출 시 해당 콜백이 전달됩니다. 즉, 해당 다이아몬드가 있음) p2의 상태가 해결로 변경됩니다. .

2. p1의 최종 상태(해결 또는 거부)가 올바르게 처리되지 않으면(호출 시 해당 콜백이 누락됩니다. 즉, 해당 다이아몬드가 없음) p1의 상태는 다음으로 라우팅됩니다. p2(p1 상태 수신).

3. 이렇게 전달하세요.

4. 이 글에서는 콜백에서 이전 Promise의 최종 데이터를 얻는 방법, 즉 데이터를 전송하는 방법에 대해서는 설명하지 않습니다.

세 번째, 이 기사를 요약하기 위해 아래에 몇 가지 예가 나와 있습니다.

사진 속 P1의 상태가 주어지고, 해결 또는 거부가 모두 사용자가 부여합니다. 목표는 P2와 P3의 최종 상태를 추론하는 것입니다.

위는 서로 아무런 연관이 없는 4개의 독립적인 예입니다.

X는 P3가 then 또는 catch 기능을 사용하지 않으므로 해결 또는 거부를 처리할 방법이 없음을 의미합니다.

마지막으로, 오류가 있으면 제때에 수정해주세요. 감사합니다! ~! ! @~~

JS Promise Chain에 대한 위의 심층적인 이해는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.