찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript의 약속: 초보자를 위한 최고의 가이드

JavaScript의 약속: 초보자를 위한 최고의 가이드

PHPz
PHPz원래의
2024-07-28 06:36:23846검색

Promises in JavaScript: The Ultimate Guide for Beginners

소개

JavaScript는 주로 웹 개발에 사용되는 다목적 프로그래밍 언어입니다. JavaScript의 가장 강력한 기능 중 하나는 비동기 작업을 처리하는 능력입니다. 개발자가 비동기 코드를 보다 효율적으로 관리할 수 있도록 하는 약속이 필요한 곳이 바로 여기입니다. 이 가이드는 Promise의 기본 사항을 안내하고, Promise를 효과적으로 이해하고 활용하는 데 도움이 되는 심층적인 지식과 실제 사례를 제공합니다.

목차

Heading Subtopics
What is a Promise in JavaScript? Definition, State of a Promise, Basic Syntax
Creating a Promise Example, Resolving, Rejecting
Chaining Promises then(), catch(), finally()
Handling Errors Common Pitfalls, Error Handling Techniques
Promise.all() Usage, Examples, Handling Multiple Promises
Promise.race() Usage, Examples, First Settled Promise
Promise.any() Usage, Examples, First Fulfilled Promise
Promise.allSettled() Usage, Examples, When All Promises Settle
Async/Await Syntax, Combining with Promises, Examples
Real-World Examples Fetch API, Async File Reading
Common Mistakes Anti-Patterns, Best Practices
Advanced Promise Concepts Custom Promises, Promise Combinators
FAQs Answering Common Questions
Conclusion Summary, Final Thoughts

JavaScript에서 약속이란 무엇입니까?

JavaScript의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 이를 통해 핸들러를 비동기 작업의 최종 성공 값 또는 실패 이유와 연결할 수 있습니다. 이를 통해 비동기 메서드는 동기 메서드와 같은 값을 반환할 수 있습니다. 즉, 최종 값을 즉시 반환하는 대신 비동기 메서드는 미래의 특정 시점에 값을 제공하겠다는 약속을 반환합니다.

약속의 상태

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

  1. 보류 중: 이행도 거부도 아닌 초기 상태입니다.
  2. 완료: 작업이 성공적으로 완료되었습니다.
  3. 거부됨: 작업이 실패했습니다.

약속의 기본 구문 

let promise = new Promise(function(resolve, reject) {
    // Asynchronous operation
    let success = true;

    if(success) {
        resolve("Operation successful!");
    } else {
        reject("Operation failed!");
    }
});

약속 만들기

Promise를 생성하려면 새 Promise 개체를 인스턴스화하고 여기에 함수를 전달해야 합니다. 이 함수는 해결 및 거부라는 두 가지 매개변수를 사용합니다.

예 

let myPromise = new Promise((resolve, reject) => {
    let condition = true;
    if(condition) {
        resolve("Promise resolved successfully!");
    } else {
        reject("Promise rejected.");
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

이 예에서 myPromise는 성공적으로 해결되고 "Promise가 성공적으로 해결되었습니다!"라는 로그를 기록합니다. 콘솔로.

약속을 연결하다

Promise의 강력한 기능 중 하나는 이를 연결하는 기능입니다. 이를 통해 읽기 쉽고 유지 관리 가능한 방식으로 일련의 비동기 작업을 수행할 수 있습니다.

그 다음에()

then() 메소드는 약속 이행을 ​​처리하는 데 사용됩니다.

myPromise.then((message) => {
    console.log(message);
    return "Next step";
}).then((nextMessage) => {
    console.log(nextMessage);
});

잡다()

catch() 메소드는 약속 거부를 처리하는 데 사용됩니다.

myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

마지막으로()

finally() 메소드는 약속의 이행 여부에 관계없이 코드를 실행하는 데 사용됩니다.

myPromise.finally(() => {
    console.log("Promise is settled (either fulfilled or rejected).");
});

오류 처리

Promise의 오류를 처리하는 것은 강력한 코드를 위해 매우 중요합니다.

일반적인 함정

  1. 오류 무시: 항상 catch()를 사용하여 오류를 처리합니다.
  2. 반환 잊어버리기: then() 핸들러에서 약속을 반환하는지 확인하세요.

오류 처리 기술 

myPromise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message);
});

약속.모두()

Promise.all()은 Promise 배열을 가져와 배열의 모든 Promise가 해결될 때 해결되거나 Promise 중 하나라도 거부되면 거부하는 단일 Promise를 반환합니다.

용법 

let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
    console.log(values); // [3, 42, "foo"]
});

약속.경주()

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

용법 

let promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'two');
});

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

약속.아무거나()

Promise.any()는 배열의 Promise 중 하나가 충족되자마자 해결되는 Promise를 반환하거나 모든 Promise가 거부되면 거부하는 Promise를 반환합니다.

용법 

let promise1 = Promise.reject("Error 1");
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success"));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success"));

Promise.any([promise1, promise2, promise3]).then((value) => {
    console.log(value); // "Success"
}).catch((error) => {
    console.log(error);
});

Promise.allSettled()

Promise.allSettled()는 주어진 모든 Promise가 해결되거나 거부된 후에 해결되는 Promise를 각 Promise의 결과를 설명하는 객체 배열과 함께 반환합니다.

용법 

let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");

Promise.allSettled([promise1, promise2]).then((results) => {
    results.forEach((result) => console.log(result.status));
});

비동기/대기

async 및 wait 키워드를 사용하면 보다 동기적인 방식으로 promise를 사용할 수 있습니다.

통사론 

async function myFunction() {
    let myPromise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Done!"), 1000);
    });

    let result = await myPromise; // Wait until the promise resolves
    console.log(result); // "Done!"
}

myFunction();

약속과의 결합 

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error fetching data: ", error);
    }
}

fetchData();

실제 사례

가져오기 API

Fetch API는 Promise의 일반적인 사용 사례입니다.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

비동기 파일 읽기

Promise를 사용하여 Node.js에서 파일 읽기

const fs = require('fs').promises;

async function readFile() {
    try {
        let content = await fs.readFile('example.txt', 'utf-8');
        console.log(content);
    } catch (error) {
        console.error('Error reading file:', error);
    }
}

readFile();

일반적인 실수

안티 패턴

  1. 콜백 지옥: 중첩된 then() 호출을 피하세요.
  2. 오류 무시: 항상 약속 거부를 처리합니다.

모범 사례

  1. 항상 Promise 반환: then() 및 catch() 핸들러에서 Promise를 반환해야 합니다.
  2. 비동기/대기 사용: 비동기 및 대기를 사용하여 약속 처리를 단순화합니다.

고급 약속 개념

맞춤형 약속

특정 비동기 작업을 처리하기 위해 사용자 정의 Promise를 생성할 수 있습니다.

function customPromiseOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Custom operation complete!");
        }, 2000);
    });
}

customPromiseOperation().then((message) => {
    console.log(message);
});

약속 결합자

Promise.all(), Promise.race() 등과 같은 결합자를 사용하여 여러 Promise를 결합하여 복잡한 비동기 흐름을 처리합니다.

자주 묻는 질문

Promise는 비동기 프로그래밍에 어떻게 도움이 되나요?
Promise는 기존 콜백에 비해 비동기 작업을 처리하는 더 깔끔하고 읽기 쉬운 방법을 제공하여 "콜백 지옥"의 위험을 줄입니다.

then()과 `

의 차이점은 무엇인가요?

catch()?
then()은 해결된 Promise를 처리하는 데 사용되고, catch()`는 거부된 Promise를 처리하는 데 사용됩니다.

이전 JavaScript 코드에서 Promise를 사용할 수 있나요?
예, Promise는 이전 JavaScript 코드와 함께 사용할 수 있지만 완전한 호환성을 위해서는 폴리필을 사용해야 할 수도 있습니다.

Promise.all()을 사용하면 어떤 이점이 있나요?
Promise.all()을 사용하면 여러 Promise를 병렬로 실행하고 모든 Promise가 완료될 때까지 기다릴 수 있으므로 여러 비동기 작업을 더 쉽게 관리할 수 있습니다.

async/await는 약속 처리를 어떻게 개선하나요?
async/await 구문을 사용하면 비동기 코드가 동기 코드처럼 보이고 동작하므로 가독성과 유지 관리성이 향상됩니다.

약속이 해결되지도 거부되지도 않으면 어떻게 되나요?
Promise가 해결되거나 거부되지 않으면 무기한 보류 상태로 유지됩니다. 잠재적인 문제를 방지하려면 모든 약속이 결국 해결되거나 거부되도록 하는 것이 중요합니다.

결론

Promise는 개발자가 비동기 작업을 보다 효율적이고 읽기 쉽게 처리할 수 있도록 해주는 최신 JavaScript의 기본 부분입니다. Promise를 마스터하면 비동기 프로그래밍의 복잡성을 효과적으로 처리하는 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다. API에서 데이터를 가져오거나, 파일을 읽거나, 사용자 정의 비동기 작업을 수행하는 등 모든 JavaScript 개발자에게는 Promise를 이해하는 것이 필수적입니다.

위 내용은 JavaScript의 약속: 초보자를 위한 최고의 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript Array Object if for while catch Error using finally JS console function this promise table
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：node-fetch/form-data를 Node.js 네이티브 API로 마이그레이션다음 기사：node-fetch/form-data를 Node.js 네이티브 API로 마이그레이션

관련 기사

더보기