> 웹 프론트엔드 > JS 튜토리얼 > 실제 예제를 통한 콜백 함수 이해

실제 예제를 통한 콜백 함수 이해

王林
풀어 주다: 2024-07-19 12:21:28
원래의
376명이 탐색했습니다.

Understanding Callback Functions with a Practical Example

당신이 요리사이고 도우미가 있다고 상상해 보세요. 당신의 임무는 저녁 식사를 요리하는 것이지만, 먼저 상점에서 특별한 재료를 구해야 합니다. 도우미에게 가게에 가라고 했더니 돌아오면 계속 요리할 수 있도록 재료가 있다고 하더군요.

우리에게 필요한 것:

  • 컴퓨터에 Node.js가 설치되어 있습니다.
  • 인터넷에서 데이터를 가져오는 데 도움이 되는 node-fetch 패키지.

Node.js 및 node-fetch 설치

먼저 Node.js가 설치되어 있는지 확인하세요. 그렇지 않은 경우 nodejs.org에서 다운로드하여 설치할 수 있습니다.

그런 다음 터미널을 열고 다음 명령을 실행하여 node-fetch 패키지를 설치합니다. npm install node-fetch

예: 콜백 함수를 사용하여 실제 데이터 가져오기

다음 예에서는 콜백 함수를 사용하여 API에서 실제 데이터를 가져오는 방법을 보여줍니다.

// Function that fetches data from the API and then calls the helper (callback)
const fetchData = async (callback) => {
  console.log('Fetching ingredients from the store...');
  try {
    const fetch = (await import("node-fetch")).default;
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log('Ingredients have been fetched.');
    callback(data); // Calling the helper (callback) with the fetched ingredients
  } catch (error) {
    console.error('Error fetching ingredients:', error);
  }
};

// Implementing and passing the helper (callback) to fetchData
fetchData((data) => {
  console.log('Processing the fetched ingredients:', data);
});
로그인 후 복사

코드 설명:

1/ fetchData 함수:

  • 재료를 사러 가게에 가는 도우미 역할이라고 생각해보세요.
  • 이 함수는 비동기(async)입니다. 즉, 데이터 가져오기와 같은 작업을 기다릴 수 있습니다.
  • 특별한 재료를 얻기 위해 상점에 가는 것과 같이 URL https://jsonplaceholder.typicode.com/posts/1에서 데이터를 가져옵니다.
  • 성공적으로 데이터를 가져온 후 마치 매장에서 재료를 가지고 돌아오는 것처럼 JSON 형식으로 변환합니다.
  • 마지막으로 가져온 데이터로 도우미(콜백 함수)를 호출합니다.

2/ 콜백 함수:

  • 이 기능은 요리사가 재료를 기다리는 것과 같습니다.
  • 도우미가 재료를 가져오면 셰프(콜백 함수)가 이를 이용해 요리를 계속합니다.
  • 우리의 경우 이 함수는 가져온 데이터를 콘솔에 기록합니다.

코드 실행

VS Code에서 터미널을 열고(또는 명령줄을 사용하여) fetchDataExample.js 파일이 있는 디렉터리로 이동합니다. 그런 다음 Node.js를 사용하여 node fetchDataExample.js

명령으로 이 파일을 실행하세요.

당신이 봐야 할 것:

이 코드를 실행하면 다음과 같은 내용이 표시됩니다.

Fetching ingredients from the store...
Ingredients have been fetched.
Processing the fetched ingredients: { userId: 1, id: 1, title: '...', body: '...' }
로그인 후 복사

요약:

  • 당신은 요리에 필요한 재료가 필요한 셰프입니다.
  • 도우미(콜백 함수)가 재료를 가져오기 위해 매장으로 이동합니다(node-fetch를 사용하여 인터넷에서 데이터를 가져옵니다).
  • 도우미가 재료를 가져와서 알려줍니다(가져온 데이터로 콜백 함수 호출).
  • 이 재료를 사용하여 요리를 계속합니다(가져온 데이터 처리).

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

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿