JavaScript의 약속 유형-JS 튜토리얼-php.cn

JavaScript의 약속 유형

Barbara Streisand

풀어 주다： 2024-09-19 14:30:03

원래의

818명이 탐색했습니다.

Types of Promises in JavaScript

오타와 문법적 실수를 용서하세요. 저는 아직 배우는 중입니다. ?

약속이란 무엇입니까?

Promise는 JavaScript에서 비동기 작업을 처리하는 방법입니다. 이는 현재 또는 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다. 약속에는 보류, 이행, 거부의 세 가지 상태가 있습니다.

약속의 유형

보류 중: Promise의 초기 상태입니다. 아직 작업이 진행 중이고 완료되지 않았음을 나타냅니다.
이행됨: 작업이 성공적으로 완료된 경우 약속의 상태입니다. 약속에는 가치가 있으며, 사용할 수 있습니다.
거부됨: 작업이 실패했을 때 Promise의 상태입니다. Promise에는 실패 이유가 있으며, catch 메소드를 사용하여 처리할 수 있습니다.

약속은 왜 중요한가요?

더 깔끔하고 읽기 쉬운 비동기 코드를 작성하는 데 도움이 될 것이라고 약속합니다.
더 구조화된 방식으로 비동기 작업을 처리하는 방법을 제공합니다.
Promise를 서로 연결하여 여러 비동기 작업을 순차적으로 수행할 수 있습니다.
데이터 가져오기, 여러 작업 처리, 빠른 결과를 위한 경주 등 최신 JavaScript에서는 약속이 필수적입니다.

1. 단순한 약속

const promise = new Promise((resolve, reject) => {
    // Imagine fetching user data from an API
    const user = {
        name: "Aasim Ashraf",
        age: 21,
    };

    user ? resolve(user) : reject("User not found");
});

promise
    .then((user) => console.log(user))
    .catch((error) => console.log(error));

로그인 후 복사

API 호출이나 비동기 작업에 자주 사용되는 해결 또는 거부 약속입니다.

사용 시기: API에서 데이터를 가져오는 것과 같은 단일 비동기 작업에 사용됩니다.
장점 : 성공과 실패를 한 블록에서 깔끔하게 처리합니다.

2. Promise.all 다중 작업

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

로그인 후 복사

모든 약속이 해결되기를 기다립니다. 하나가 실패하면 전체 체인이 실패합니다. 함께 해결해야 하는 여러 비동기 작업에 가장 적합합니다.

사용 시기: 서로 의존하지 않는 여러 비동기 작업에 사용
장점 : 여러 데이터를 한 번에 가져와 함께 처리합니다.
단점 : 하나가 실패하면 모두 실패한다.

Promise.all에서 하나의 약속이 실패하면 어떻게 되나요?

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

로그인 후 복사

Promise.all의 문제점은 하나의 Promise가 실패하면 전체 체인이 실패한다는 것입니다. 이를 방지하려면 Promise.allSettled를 사용하면 됩니다.

3. Promise.allSettled

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.allSettled([fetchUser, fetchPosts])
    .then((results) => {
        results.forEach((result) => {
            if (result.status === "fulfilled") {
                console.log("User Data:", result.value);
            } else {
                console.log("Error:", result.reason);
            }
        });
    });

로그인 후 복사

Promise.allSettled는 해결 또는 거부 여부에 관계없이 모든 약속이 확정되기를 기다립니다. 상태와 값 또는 이유가 포함된 객체 배열을 반환합니다.

사용시기 :실패까지 모든 결과를 알고 싶을 때.
장점 : 여러 데이터를 한 번에 가져와 함께 처리합니다.
단점 : 하나라도 실패하면 체인이 멈추지 않는다

4. Promise.race 가장 빠른 결과

const fast = new Promise(resolve => setTimeout(resolve, 1000, "Fast"));

const slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log(error));

로그인 후 복사

해결 여부에 관계없이 해결하겠다는 첫 번째 약속의 결과를 반환합니다. 첫 번째 응답을 로드하는 등 속도가 필요할 때 유용합니다.

사용 시기 : 모든 결과를 기다리는 것보다 속도가 더 중요한 경우.
한도: 가장 빠른 약속이 실패할 경우 오류가 발생할 수 있습니다.

Promise.race의 약속이 실패하면 어떻게 되나요?

const error = new Promise((resolve) => {
    setTimeout(() => resolve("Error"), 1000);
});

const success = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

Promise.race([error, success])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log("First Rejected",error));

로그인 후 복사

첫 번째 약속이 실패하면 전체 체인이 실패합니다. 이를 방지하려면 Promise.any를 사용할 수 있습니다.

5. Promise.any 첫 번째 성공적인 결과

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise(resolve => setTimeout(resolve, 3000, "Promise 2"));

Promise.any([promise1, promise2])
    .then((result) => {
        console.log("First Success",result);
    })
    .catch((error) => console.log("All Rejected",error));

로그인 후 복사

Promise 중 하나라도 해결되면 해결됩니다. 모든 Promise가 거부될 때까지 모든 거부를 무시합니다. 나머지에 관계없이 첫 번째 성공적인 결과가 필요할 때 유용합니다.