JavaScript에서 Promise.allSettled() 및 async-await를 설명하시겠습니까?

Promise.allSettled()는 Promise의 iterable을 매개변수로 취하고 iterable의 모든 Promise가 해결되면 이행되는 Promise를 반환하는 메서드입니다. 즉, Promise가 구현되었거나 거부되었습니다.

반환된 Promise가 이행되면 이행되거나 거부된 Promise에 대한 정보가 포함된 객체 배열을 통해 해결됩니다. 각 객체에는 상태 속성(완료 또는 거부됨)과 값 또는 이유 속성이 있습니다.

예를 들어 네트워크 요청을 나타내는 Promise 세트가 있고 각 요청의 상태(성공 여부)를 알고 싶다면 Promise.allSettled()를 사용하여 모든 요청이 완료될 때까지 기다릴 수 있습니다. 결과를 처리하기 전에.

Promise.allSettled

Promise.allSettled() 사용은 이행 여부에 관계없이 여러 Promise의 결과를 처리하려는 경우 유용합니다. 이는 모든 Promise가 충족될 때만 해결되고 Promise가 거부되면 거부하는 Promise.all()과는 다릅니다.

문법

Promise.allSettled()를 사용하는 구문은 다음과 같습니다. -

으아아아

Iterable은 promise.allSettled()에 제공되는 입력입니다. Iterable 객체는 약속을 포함하는 배열입니다.

비동기 대기

JavaScript의 async 및 wait 키워드는 비동기 코드를 처리하는 데 사용됩니다. async는 함수 정의 앞에 사용되어 함수가 비동기식이며 Promise를 반환함을 나타냅니다.

문법

으아아아

await는 지정된 약속이 충족될 때까지 실행을 일시 중지하기 위해 비동기 함수 내에서 사용됩니다.

으아아아

Promise.allSetlled 및 async-await

async/await 구문은 비동기 코드를 동기 코드처럼 보이고 동작하도록 만들어 더 쉽게 읽고 쓸 수 있도록 하는 방법입니다. 콜백이나 then() 메서드 없이도 동기 코드처럼 보이고 느껴지는 비동기 코드를 작성할 수 있습니다.

async/await 구문을 사용하여 결과에 액세스하기 전에 Promise.allSettled() 메서드가 해결될 때까지 기다릴 수 있습니다.

이것은 async/await와 함께 Promise.allSettled()를 사용하는 예입니다 -

으아아아

실제 세계에서 Promise.allSettled()를 사용할 수 있는 두 가지 사례는 다음과 같습니다.

• 네트워크 요청 처리

• 양식에서 사용자 입력 처리

예 1

네트워크 요청(예: HTTP 요청)이 있고 성공 여부에 관계없이 모든 요청의 결과를 처리하려는 경우 Promise.allSettled()를 사용하여 처리하기 전에 모든 요청이 완료될 때까지 기다릴 수 있습니다. 결과.

으아아아

입력 필드가 있는 양식이 있고 양식을 제출하기 전에 모든 필드의 유효성을 검사한다고 가정해 보겠습니다. 이 경우 양식 제출 여부를 결정하기 전에 Promise.allSettled()를 사용하여 모든 검증 약속이 완료될 때까지 기다릴 수 있습니다.

따라야 할 단계는 다음과 같습니다.

• 1단계 - HTML 문서에서 입력 필드가 있는 양식을 작성합니다. ID를 입력으로 사용합니다.

• 2단계 - 양식이 제출될 때 호출될 validateForm() 함수를 정의합니다.

• 3단계 - validateForm() 함수 내에서 document.getElementById() > 메서드를 사용하여 입력 필드의 값을 검색합니다.

• 4단계 - validateInput() 함수를 사용하여 검증 프라미스 배열을 생성하고 입력 필드 값을 매개변수로 전달합니다.

• 5단계 - Promise.allSettled()를 사용하여 모든 검증 Promise가 완료될 때까지 기다립니다.

• 6단계 - Promise.allSettled()의 결과를 반복하고 각 결과 개체의 상태 속성을 확인합니다. Promise가 거부되면 hasErrors 플래그를 true로 설정하고 오류 메시지를 기록합니다.

• 7단계 - hasErrors 플래그가 거짓이면 양식이 유효한 것으로 간주되어 제출될 수 있습니다. hasErrors 플래그가 true이면 양식에 오류가 있으므로 제출해서는 안 됩니다.

• 8단계 - HTML 양식의 양식 요소에 onsubmit 속성을 추가하고 validateForm() 함수를 호출하도록 설정합니다. validateForm() 함수가 false를 반환하는 경우 return false 문을 사용하여 양식이 제출되지 않도록 합니다.

예 2

으아아아

Promise.allSettled()는 네트워크 요청 처리, 사용자 입력 유효성 검사 등 다양한 상황에서 사용할 수 있으며 async/await 구문 또는 then() 메서드와 함께 사용하여 Promise의 완료된 값을 처리할 수 있습니다. .

위 내용은 JavaScript에서 Promise.allSettled() 및 async-await를 설명하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!