JavaScript Promise 이해하기: 초보자 가이드-JS 튜토리얼-php.cn

JavaScript Promise 이해하기: 초보자 가이드

PHPz

풀어 주다： 2024-08-29 12:10:43

원래의

373명이 탐색했습니다.

Understanding JavaScript Promises: A Beginner’s Guide

JavaScript는 웹 개발에 널리 사용되는 강력한 언어이며, 현대 JavaScript에서 이해해야 할 필수 개념 중 하나는 Promise입니다. 비동기 코드, 콜백으로 어려움을 겪은 적이 있거나 더 깔끔하고 읽기 쉬운 코드를 작성하고 싶다면 Promise를 이해하는 것이 필수입니다. 이 게시물에서는 Promise가 무엇인지, 어떻게 작동하는지, Promise를 사용하여 비동기 작업을 보다 효과적으로 처리하는 방법에 대해 알아보겠습니다.

약속이란 무엇입니까?

JavaScript에서 Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타내는 객체입니다. 마치 작업이 끝나면 해결될 미래 가치에 대한 자리 표시자와 같습니다.

Promise는 깊게 중첩된 구조와 관리가 어렵기 때문에 종종 "콜백 지옥"이라고도 불리는 기존 콜백 기반 비동기 코드에 비해 크게 개선되었습니다.

약속은 어떻게 작동하나요?

Promise는 다음 세 가지 상태 중 하나일 수 있습니다.

Pending: 약속이 이행되지도 거부되지도 않은 초기 상태입니다.
Fulfilled: 작업이 성공적으로 완료되고 Promise가 값으로 해결된 상태
거부됨: 작업이 실패하고 Promise가 이유(예: 오류)와 함께 거부된 경우의 상태입니다.

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

로그인 후 복사

위의 예에서 "myPromise"는 "success" 변수가 "true"이면 "false"이면 "reject"를 확인합니다. ".then()" 메소드는 이행된 상태를 처리하는 데 사용되며, ".catch()"는 오류를 처리하는 데 사용됩니다.

약속을 연결하다

Promise의 가장 강력한 기능 중 하나는 이들을 서로 연결할 수 있다는 것입니다. 이를 통해 콜백 지옥에 빠지지 않고 여러 비동기 작업을 순차적으로 수행할 수 있습니다.

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

로그인 후 복사

이 예에서 두 번째 ".then()"은 첫 번째 Promise가 이행된 후에 실행되어 비동기 작업의 원활하고 읽기 쉬운 흐름을 허용합니다.

여러 약속 처리하기

여러 비동기 작업이 완료될 때까지 기다려야 하는 경우가 있습니다. 여기서 "Promise.all()"과 "Promise.race()"가 유용하게 사용됩니다.

약속.모두()

이 메소드는 Promise 배열을 가져와서 배열의 모든 Promise가 해결되면 해결되거나 Promise 중 하나라도 거부되면 거부하는 단일 Promise를 반환합니다.

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

로그인 후 복사

약속.경주()

Promise.race()도 Promise 배열을 사용하지만 배열의 Promise 중 하나가 해결되거나 거부되자마자 해결하거나 거부하는 Promise를 반환합니다.

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second operation"
});

로그인 후 복사