콜백

JavaScript에서는 비동기 호출을 처리하는 다양한 방법이 있습니다.
이를 통해 서버에서 데이터 가져오기, 파일 읽기, 이벤트 대기 등의 비동기 작업을 처리할 수 있습니다.

콜백

다른 함수를 호출하는 함수입니다.
더 잘 이해할 수 있도록 예를 살펴보겠습니다.

• 사용자 ID, 이름, 이메일을 인쇄하는 ID 및 콜백 함수를 사용하여 getUser()를 호출합니다. 비동기 getUser 작업이 완료되면 콜백이 실행됩니다.

getUser() 함수:

• id: getUser(1, ...) 호출에서 전달된 검색하려는 사용자의 ID입니다.

• 콜백: "사용자 데이터"가 검색된 후 호출되는 함수입니다(여기에서는 setTimeout() 함수로 시뮬레이션됨).

• setTimeout() 함수 내에서 callback() 함수는 지연 후에 호출되어 모의 사용자 객체를 인수로 전달합니다: { id: id, name: 'Diana', email: 'Diana@test. com' }.

실행 흐름:

1. getUser(1, user => { console.log('User', user); }); 라고 합니다.
2. getUser() 내부에서는 setTimeout()을 사용하여 3초 지연이 트리거됩니다.
3. 3초 후: 'DB에서 사용자를 가져오는 중...'이라는 메시지가 콘솔에 기록됩니다. 콜백 함수는 사용자 개체 { id: 1, name: 'Diana', email: 'Diana@test.com' }으로 호출됩니다.
4. 콜백 함수는 사용자와 사용자 개체를 콘솔에 기록합니다.

최종 출력:

콜백 지옥

콜백 지옥 패턴 - 여러 비동기 작업이 서로 의존하여 콜백이 깊게 중첩될 때 발생합니다. 중첩이 증가할수록 코드를 읽고, 유지 관리하고, 디버그하기가 더 어려워집니다. 예를 살펴보겠습니다:

분석해 보겠습니다.

• 사용자 가져오기: 여기서는 데이터베이스에서 사용자 데이터 가져오기를 시뮬레이션하는 첫 번째 비동기 호출인 getUser(1)를 시작합니다. 데이터를 가져오면 콜백 함수가 실행되어 사용자 세부 정보를 콘솔에 기록합니다.

getUser(1, user => {
    console.log('User', user);
    // ...
});

사용자 주문 가져오기:
getUser()에 대한 콜백 내에서 getOrders(user.id)에 대한 또 다른 비동기 호출을 수행하여 데이터베이스에서 사용자 주문을 가져오는 것을 시뮬레이션합니다. 이를 위해서는 첫 번째 콜백 안에 또 다른 콜백을 중첩해야 합니다. 주문을 가져오면 주문이 기록됩니다.

getUser(1, user => {
    console.log('User', user);
    // ...
});

• 주문 세부정보 가져오기: 주문을 가져온 후 특정 주문(주문[1])에 대한 세부 정보를 가져와야 합니다. 이로 인해 getOrdersDetails()가 호출되어 주문 세부 정보를 가져온 다음 이를 콘솔에 기록하는 세 번째 중첩 수준이 발생합니다.

getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

코드 구조(중첩):

각 비동기 작업이 어떻게 이전 작업에 종속되어 구조가 깊게 중첩되는지 확인하세요. 코드를 어렵게 만드는 작업:

1. 읽기: 콜백이 깊게 중첩되면 로직의 흐름을 따라가기가 어렵습니다.

2. 오류 처리: 여러 수준의 콜백에서 오류를 처리하기는 어렵습니다.

3.디버그: 많은 수준의 콜백이 관련되면 오류가 발생한 위치를 식별하는 것이 더 복잡해집니다.

또한 코드를 "긴밀한 결합"으로 만듭니다. 각 기능은 이전 함수의 출력에 따라 달라집니다. 즉, 코드가 긴밀하게 결합되어 재사용성이 떨어집니다.

결과:

콜백 지옥 피하기:
Promises 및 async/await와 같은 최신 JavaScript 기능을 사용하면 콜백 지옥을 피할 수 있습니다. 이러한 방법을 사용하면 비동기 코드를 보다 읽기 쉽고 순차적인 방식으로 작성할 수 있습니다.

위 내용은 콜백의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!