콜백, 콜백 지옥, 약속, 비동기/대기-JS 튜토리얼-php.cn

콜백, 콜백 지옥, 약속, 비동기/대기

WBOY

풀어 주다： 2024-08-29 11:05:33

원래의

1101명이 탐색했습니다.

Callbacks, Callback Hell, Promises, Async/Await

“코딩은 때로 예상치 못한 우여곡절이 가득한 서스펜스 영화처럼 느껴질 수 있습니다. 하지만 잘 연출된 장면처럼 코드 흐름을 원활하게 만들 수 있다면 어떨까요? 콜백, 프라미스, 비동기/대기의 세계에 오신 것을 환영합니다!”

1. 콜백

콜백은 다른 함수에 인수로 전달한 다음 해당 함수가 완료된 후 실행되는 함수입니다. 다음과 같이 생각해보세요. 온라인으로 영화 티켓을 주문하고 티켓이 준비되면 이메일(콜백 기능)을 보내라고 지시합니다.

예:
온라인으로 영화 '스파이더맨 4' 티켓을 주문한다고 가정해 보세요.

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    // Simulate a delay with setTimeout
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();  // Notify when the ticket is ready
    }, 2000);
}

function notifyUser() {
    console.log('Your ticket is ready! Enjoy the movie!');
}

orderTicket('Spider-Man 4', notifyUser);

로그인 후 복사

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Your ticket is ready! Enjoy the movie!

로그인 후 복사

여기서 informUser는 티켓 주문 후 호출되는 콜백 함수입니다.

2. 콜백 지옥

콜백 지옥은 여러 콜백이 서로 중첩되어 코드를 읽고 유지하기 어렵게 만들 때 발생합니다. 피라미드나 계단처럼 보여서 무슨 일이 일어나는지 따라가기가 어렵습니다.

예:
이제 티켓 주문, 팝콘 구매, 좌석 찾기 등 여러 작업을 순서대로 수행하고 싶다고 상상해 보세요.

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();
    }, 2000);
}

function getPopcorn(callback) {
    console.log('Getting popcorn...');
    setTimeout(() => {
        console.log('Popcorn ready!');
        callback();
    }, 1000);
}

function findSeat(callback) {
    console.log('Finding your seat...');
    setTimeout(() => {
        console.log('Seat found!');
        callback();
    }, 1500);
}

orderTicket('Spider-Man 4', function() {
    getPopcorn(function() {
        findSeat(function() {
            console.log('All set! Enjoy the movie!');
        });
    });
});

로그인 후 복사

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

로그인 후 복사

이것은 콜백 지옥입니다. 코드가 어떻게 더 중첩되고 읽기 어려워지는지 확인할 수 있습니다.

3. 약속

promise는 비동기 작업의 최종 완료(또는 실패)를 나타내는 개체입니다. 콜백 지옥에 빠지지 않고 더 깔끔한 코드를 작성하고 비동기 작업을 더 쉽게 처리할 수 있습니다.

예:
Promise
를 사용하여 위의 예를 단순화해 보겠습니다.

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

orderTicket('Spider-Man 4')
    .then(getPopcorn)
    .then(findSeat)
    .then(() => {
        console.log('All set! Enjoy the movie!');
    });

로그인 후 복사

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

로그인 후 복사

Promise를 사용하면 .then() 메서드를 연결하여 중첩 문제를 방지하여 코드를 더 쉽게 읽을 수 있습니다.

4. 비동기/대기

Async/await는 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있는 최신 구문입니다. Promise를 기반으로 구축되었으며 코드를 더욱 깔끔하고 이해하기 쉽게 만듭니다.

예:
동일한 시나리오를 처리하기 위해 async/await를 사용해 보겠습니다

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

async function watchMovie() {
    await orderTicket('Spider-Man 4');
    await getPopcorn();
    await findSeat();
    console.log('All set! Enjoy the movie!');
}

watchMovie();

로그인 후 복사

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

로그인 후 복사

async/await를 사용하면 코드가 더 간단해 실제 프로세스를 설명하는 방식과 유사합니다. Wait 키워드는 Promise가 해결될 때까지 실행을 일시 중지하여 작업 흐름을 쉽게 따라갈 수 있도록 합니다.