예제를 사용하여 JavaScript의 Async/Await를 살펴보겠습니다.

이 기사의 저자는 JavaScript에서 Async/Await의 예를 검토합니다. 전반적으로 Async/Await는 비동기 코드를 작성하는 편리한 방법입니다. 이 기능이 나타나기 전에는 콜백과 프라미스를 사용하여 이러한 코드가 작성되었습니다. 원문의 저자는 다양한 예시를 분석하여 Async/Await의 장점을 밝혀냈습니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 교육용 온라인 과정 "자바 개발자".

콜백

콜백은 호출이 무한정 지연되는 함수입니다. 이전에는 결과를 즉시 얻을 수 없는 코드 영역에서 콜백이 사용되었습니다.

다음은 Node.js에서 파일을 비동기적으로 읽는 예입니다.

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

여러 비동기 작업을 동시에 수행해야 할 때 문제가 발생합니다. Arfat 사용자 데이터베이스에 대한 요청이 이루어지면 해당 profile_img_url 필드를 읽고 someserver.com 서버에서 이미지를 다운로드해야 하는 시나리오를 상상해 봅시다.
다운로드 후 이미지를 다른 형식(예: PNG에서 JPEG로 변환)으로 변환합니다. 변환이 성공하면 사용자의 이메일로 편지가 전송됩니다. 그런 다음 이벤트에 대한 정보가 변환.log 파일에 입력되어 날짜를 표시합니다.

코드의 마지막 부분에 있는 콜백의 중복과 많은 수의 })에 주의할 가치가 있습니다. 콜백 지옥(Callback Hell) 또는 파멸의 피라미드(Pyramid of Doom)라고 합니다.

이 방법의 단점은 명백합니다.

• 이 코드는 읽기 어렵습니다.
• 또한 오류를 처리하기가 어려워 코드 품질이 저하되는 경우가 많습니다.

이 문제를 해결하기 위해 JavaScript에 Promise가 추가되었습니다. 콜백의 깊은 중첩을 .then이라는 단어로 바꿀 수 있습니다.

Promise의 긍정적인 측면은 왼쪽에서 오른쪽이 아닌 위에서 아래로 코드를 훨씬 더 읽기 쉽게 만든다는 것입니다. 그러나 Promise에도 문제가 있습니다.

• .then을 많이 추가해야 합니다.
• try/catch 대신 .catch를 사용하여 모든 오류를 처리합니다.
• 하나의 루프 내에서 여러 Promise를 사용하는 것이 항상 편리한 것은 아니며 어떤 경우에는 코드가 복잡해집니다.

마지막 요점의 의미를 보여주는 문제는 다음과 같습니다.

무작위 간격(0~n초)으로 10부터 0까지의 숫자 시퀀스를 인쇄하는 for 루프가 있다고 가정합니다. promise를 사용하면 숫자가 0부터 10까지 순서대로 인쇄되도록 이 루프를 변경해야 합니다. 따라서 6을 인쇄하는 데 2초가 걸리고 XNUMX을 인쇄하는 데 XNUMX초가 걸리면 XNUMX이 먼저 인쇄되고 그 다음에는 XNUMX이 인쇄됩니다. 인쇄 카운트다운이 시작됩니다.

물론 이 문제를 해결하기 위해 Async/Await 또는 .sort를 사용하지 않습니다. 예제 솔루션은 끝에 있습니다.

비동기 기능

ES2017(ES8)에 비동기 기능이 추가되면서 Promise 작업 작업이 단순화되었습니다. 비동기 함수는 Promise의 "상위"에서 작동한다는 점에 주목합니다. 이러한 기능은 질적으로 다른 개념을 나타내지 않습니다. 비동기 함수는 약속을 사용하는 코드의 대안으로 사용됩니다.

Async/Await를 사용하면 비동기 코드로 작업을 동기 스타일로 구성할 수 있습니다.

따라서 Promise를 알면 Async/Await의 원리를 더 쉽게 이해할 수 있습니다.

구문

일반적으로 async와 wait라는 두 개의 키워드로 구성됩니다. 첫 번째 단어는 함수를 비동기식으로 바꿉니다. 이러한 함수를 사용하면 대기를 사용할 수 있습니다. 그 외의 경우에는 이 기능을 사용하면 오류가 발생합니다.

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

Async는 함수 선언의 맨 처음에 삽입되며, 화살표 함수의 경우 "=" 기호와 괄호 사이에 삽입됩니다.

이러한 함수는 객체에 메서드로 배치되거나 클래스 선언에 사용될 수 있습니다.

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

주의! 클래스 생성자와 getter/setter는 비동기적일 수 없다는 점을 기억해 두는 것이 좋습니다.

의미론 및 실행 규칙

비동기 함수는 기본적으로 표준 JS 함수와 유사하지만 예외가 있습니다.

따라서 비동기 함수는 항상 약속을 반환합니다.

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

특히 fn은 hello 문자열을 반환합니다. 음, 이것은 비동기 함수이기 때문에 문자열 값은 생성자를 사용하여 Promise에 래핑됩니다.

비동기가 없는 대체 디자인은 다음과 같습니다.

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

이 경우 Promise는 "수동으로" 반환됩니다. 비동기 함수는 항상 새로운 Promise로 래핑됩니다.

반환 값이 프리미티브인 경우 비동기 함수는 값을 Promise로 래핑하여 반환합니다. 반환 값이 Promise 객체인 경우 해당 해결 방법이 새 Promise로 반환됩니다.

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

하지만 비동기 함수 내부에 오류가 있으면 어떻게 될까요?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

처리되지 않으면 foo()는 거부된 Promise를 반환합니다. 이 상황에서는 Promise.resolve 대신 오류가 포함된 Promise.reject가 반환됩니다.

비동기 함수는 반환되는 내용에 관계없이 항상 Promise를 출력합니다.

비동기 함수는 대기할 때마다 일시 중지됩니다.

Wait는 표현식에 영향을 미칩니다. 따라서 표현식이 약속인 경우 약속이 이행될 때까지 비동기 함수가 일시 중지됩니다. 표현식이 Promise가 아닌 경우 Promise.resolve를 통해 Promise로 변환된 후 완료됩니다.

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

다음은 fn 함수의 작동 방식에 대한 설명입니다.

• 이를 호출한 후 첫 번째 줄은 const a = wait 9;에서 변환됩니다. const a = Promise.resolve(9);를 기다립니다.
• Await를 사용한 후에는 a가 해당 값을 얻을 때까지(현재 상황에서는 9임) 함수 실행이 일시 중지됩니다.
• DelayAndGetRandom(1000)은 fn 함수가 자체적으로 완료될 때까지(1초 후) fn 함수의 실행을 일시 중지합니다. 이렇게 하면 fn 기능이 1초 동안 효과적으로 중지됩니다.
• 해결을 통해 DelayAndGetRandom(1000)은 임의의 값을 반환한 다음 변수 b에 할당됩니다.
• 음, 변수 c의 경우는 변수 a의 경우와 유사합니다. 그 후 모든 것이 잠시 중지되지만 이제 필요하지 않기 때문에 DelayAndGetRandom(1000)은 아무것도 반환하지 않습니다.
• 결과적으로 값은 a + b * c 공식을 사용하여 계산됩니다. 결과는 Promise.resolve를 사용하여 Promise로 래핑되고 함수에 의해 반환됩니다.

이러한 일시 중지는 ES6의 생성기를 연상시킬 수 있지만 여기에는 뭔가가 있습니다. 당신의 이유.

문제 해결

자, 이제 위에서 언급한 문제에 대한 해결책을 살펴보겠습니다.

FinishMyTask 함수는 Await를 사용하여 queryDatabase, sendEmail, logTaskInFile 등과 같은 작업의 결과를 기다립니다. 이 솔루션을 Promise가 사용된 솔루션과 비교해 보면 유사점이 분명해질 것입니다. 그러나 Async/Await 버전은 모든 구문 복잡성을 크게 단순화합니다. 이 경우 .then/.catch와 같은 콜백 및 체인 수가 많지 않습니다.

다음은 숫자를 출력하는 솔루션입니다. 두 가지 옵션이 있습니다.

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

그리고 여기에 비동기 기능을 사용하는 솔루션이 있습니다.

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

오류 처리

처리되지 않은 오류는 거부된 Promise로 래핑됩니다. 그러나 비동기 함수는 try/catch를 사용하여 오류를 동기적으로 처리할 수 있습니다.

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn()은 성공("완벽한 숫자")하거나 오류("죄송합니다. 숫자가 너무 큽니다")와 함께 실패하는 비동기 함수입니다.

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

위의 예에서는 canRejectOrReturn이 실행될 것으로 예상하므로 자체 실패로 인해 catch 블록이 실행됩니다. 결과적으로 foo 함수는 정의되지 않은 상태(try 블록에서 아무것도 반환되지 않은 경우) 또는 오류가 발생한 상태로 종료됩니다. 결과적으로 try/catch가 foo 함수 자체를 처리하므로 이 함수는 실패하지 않습니다.

다음은 또 다른 예입니다.

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

이 예에서 canRejectOrReturn이 foo에서 반환된다는 사실에 주목할 가치가 있습니다. 이 경우 Foo는 완전수로 종료되거나 오류("죄송합니다. 숫자가 너무 큽니다")를 반환합니다. catch 블록은 절대 실행되지 않습니다.

문제는 foo가 canRejectOrReturn에서 전달된 Promise를 반환한다는 것입니다. 따라서 foo에 대한 솔루션은 canRejectOrReturn에 대한 솔루션이 됩니다. 이 경우 코드는 다음 두 줄로만 구성됩니다.

try {
    const promise = canRejectOrReturn();
    return promise;
}

Wait와 Return을 함께 사용하면 어떤 일이 발생합니까?

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

위의 코드에서 foo는 완전수와 오류가 발견된 상태로 성공적으로 종료됩니다. 여기서는 거절이 없을 것입니다. 그러나 foo는 정의되지 않은 상태가 아닌 canRejectOrReturn으로 반환됩니다. return wait canRejectOrReturn() 행을 제거하여 이를 확인하겠습니다.

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

일반적인 실수와 함정

경우에 따라 Async/Await를 사용하면 오류가 발생할 수 있습니다.

잊혀진 기다림

이런 일이 자주 발생합니다. 약속 전에 wait 키워드를 잊어버리게 됩니다.

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

보시다시피 코드에는 대기 또는 반환이 없습니다. 따라서 foo는 항상 1초의 지연 없이 undefound로 종료됩니다. 그러나 그 약속은 성취될 것입니다. 오류나 거부가 발생하면 UnhandledPromiseRejectionWarning이 호출됩니다.

콜백의 비동기 함수

비동기 함수는 .map 또는 .filter에서 콜백으로 자주 사용됩니다. 예를 들어 GitHub에서 열린 리포지토리 수를 반환하는 fetchPublicReposCount(username) 함수가 있습니다. 측정항목이 필요한 세 명의 사용자가 있다고 가정해 보겠습니다. 이 작업에 대한 코드는 다음과 같습니다.

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

ArfatSalman, octocat, norvig 계정이 필요합니다. 이 경우 우리는 다음을 수행합니다.

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

.map 콜백의 Await에 주목할 가치가 있습니다. 여기서 counts는 promise의 배열이고 .map은 지정된 각 사용자에 대한 익명 콜백입니다.

Wait를 지나치게 일관되게 사용함

이 코드를 예로 들어보겠습니다.

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

여기서 repo 번호는 count 변수에 배치되고 이 숫자는 counts 배열에 추가됩니다. 코드의 문제점은 첫 번째 사용자의 데이터가 서버에서 도착할 때까지 모든 후속 사용자가 대기 모드에 있다는 것입니다. 따라서 한 번에 한 명의 사용자만 처리됩니다.

예를 들어 한 명의 사용자를 처리하는 데 약 300ms가 걸린다면 모든 사용자의 경우 이미 XNUMX초입니다. 소요 시간은 선형적으로 사용자 수에 따라 달라집니다. 그러나 Repo 수를 얻는 것은 서로 의존하지 않으므로 프로세스를 병렬화할 수 있습니다. 이를 위해서는 .map 및 Promise.all 작업이 필요합니다.

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all은 약속의 배열을 입력으로 받고 약속을 반환합니다. 후자는 배열의 모든 Promise가 완료된 후 또는 첫 번째 거부 시 완료됩니다. 모두 동시에 시작되지 않는 경우가 발생할 수 있습니다. 동시 시작을 보장하려면 p-map을 사용할 수 있습니다.

결론

비동기 기능은 개발에 점점 더 중요해지고 있습니다. 음, 비동기 기능을 적응적으로 사용하려면 다음을 사용해야 합니다. 비동기 반복자. JavaScript 개발자는 이에 대해 잘 알고 있어야 합니다.

Skillbox는 다음을 권장합니다.

• 실기 코스 "모바일 개발자 PRO".
• 온라인 강좌 적용 "Python의 데이터 분석가".
• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".

출처 : habr.com