분류 javascript

Callbacks, Promises 및 Async-Await

컨텐츠 정보

  • 조회 207 (작성일 )

본문

소개 


JavaScript는 비동기 프로그래밍을 기능으로 선전합니다. 즉, 조치가 오래 걸리면 조치가 완료되는 동안 프로그램이 다른 작업을 계속 수행 할 수 있습니다. 해당 조치가 완료되면 결과로 무언가를 수행 할 수 있습니다. 이것은 데이터 가져 오기와 같은 기능을 위한 훌륭한 기능이지만, 신규 사용자에게는 혼란스러울 수 있습니다. 자바 스크립트에는 비 동시성을 처리하는 몇 가지 방법 (콜백 함수, 약속 및 async-await)이 있습니다.


https://nick.scialli.me/callbacks-promises-and-async-await/ 


콜백 함수 


콜백 함수는 비동기 작업이 완료된 후 실행될 기능입니다. 가짜 사용자 데이터 가져 오기 도구를 만들고 콜백 함수를 사용하여 결과로 무언가를 해 봅시다.


가짜 데이터 가져 오기 


먼저 콜백 함수를 사용하지 않는 가짜 데이터 페처를 만듭니다. fakeData는 300 밀리 초 동안 존재하지 않기 때문에 동기식으로 액세스 할 수 없습니다.


const fetchData = userId => {
  setTimeout(() => {
    const fakeData = {
      id: userId,
      name: 'George',
    };
    // Our data fetch resolves
    // After 300ms. Now what?
  }, 300);
};

실제로 fakeData로 무언가를 할 수 있도록, 데이터를 처리 할 함수에 대한 참조를 fetchData에 전달할 수 있습니다!


const fetchData = (userId, callback) => {
  setTimeout(() => {
    const fakeData = {
      id: userId,
      name: 'George',
    };
    callback(fakeData);
  }, 300);
};


기본 콜백 함수를 만들어 테스트 해 보겠습니다.


const cb = data => {
  console.log("Here's your data:", data);
};

fetchData(5, cb);


300ms 후에 다음이 기록됩니다.


Here's your data: {id: 5, name: "George"}


Promises 


Promise 객체는 JavaScript에서 최종적으로 작업이 완료되었음을 나타냅니다. 약속은 resolve하거나 reject 할 수 있습니다. Promise가 해결되면 반환 된 값을 처리 한 다음 메소드로 처리 할 수 ​​있습니다. 약속이 거부되면 오류를 잡아서 처리 할 수 ​​있습니다.


Promise 개체의 구문은 다음과 같습니다.


new Promise(fn);


fn은 resolve함수와 선택적으로 reject 함수를 취하는 함수입니다.


fn = (resolve, reject) => {};


가짜 데이터 가져 오기 (Promises 있음) 


이전과 동일한 가짜 데이터 인출기를 사용합시다. 콜백을 전달하는 대신 300ms 후에 사용자 데이터로 해결 된 새로운 Promise 객체를 반환합니다. 보너스로, 우리는 또한 그것을 거부 할 작은 기회를 줄 수 있습니다.


const fetchData = userId => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.1) {
        reject('Fetch failed!');
      }
      const fakeData = {
        id: userId,
        name: 'George',
      };
      resolve(fakeData);
    }, 300);
  });
};


새로운 fetchData 함수는 다음과 같이 사용할 수 있습니다.


fetchData(5)
  .then(user => {
    console.log("Here's your data:", user);
  })
  .catch(err => {
    console.error(err);
  });


fetchData가 성공적으로 해결되면 (90 %의 시간이 소요됨) 콜백 솔루션과 마찬가지로 사용자 데이터를 기록합니다. 거부되면 console.error 만든 오류 메시지 ( "Fetch failed!")


약속에 대한 한 가지 좋은 점은 체인을 연결하여 후속 약속을 실행할 수 있다는 것입니다. 예를 들어 다음과 같이 할 수 있습니다.


fetchData(5)
  .then(user => {
    return someOtherPromise(user);
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

또한 모든 약속이 해결 된 후에만 ​​조치를 취하기 위해 약속의 배열을 Promise.all에 전달할 수 있습니다.


Promise.all([fetchData(5), fetchData(10)])
  .then(users => {
    console.log("Here's your data:", users);
  })
  .catch(err => {
    console.error(err);
  });


이 경우 두 약속이 성공적으로 해결되면 다음이 기록됩니다.


Here's your data:
[{ id: 5, name: "George" }, { id: 10, name: "George" }]


Async-Await 


Async-await는 약속을 작성하기 위한 다른 구문을 제공합니다. async-await를 사용하면 비동기 기능을 만들 수 있습니다. 해당 비동기 함수 내에서 후속 코드를 실행하기 전에 약속 결과를 기다릴 수 있습니다! 데이터 가져 오기 예를 살펴 보겠습니다.


const fetchUser = async userId => {
  const user = await fetchData(userId);
  console.log("Here's your data:", user);
};
fetchUser(5);


꽤 좋아요? : 약속 거부 사례를 처리하지 않습니다. 우리는 try / catch로 이것을 할 수 있습니다.


const fetchUser = async userId => {
  try {
    const user = await fetchData(userId);
    console.log("Here's your data:", user);
  } catch (err) {
    console.error(err);
  }
};
fetchUser(5);


브라우저 / 노드 지원 


콜백 함수는 다른 함수로 전달되는 일반 함수일 뿐이므로 지원에 대해 걱정할 필요가 없습니다. 약속은 ECMAScript 2015 이후 표준이었으며 제대로 지원되지만 Internet Explorer에서는 지원되지 않습니다. Async-await는 최신 버전이며 (ECMAScript 2017 이후 표준) 최신 브라우저 버전에서 잘 지원됩니다. 다시 한 번 Internet Exporer에서 지원되지 않습니다.