async, await

gusdnr814Β·2021λ…„ 6μ›” 17일
0

Javascript

λͺ©λ‘ 보기
14/20

πŸ“š Reference


javascript.info, https://ko.javascript.info/async-await

μ°Έκ³  μ‚¬μ΄νŠΈμ— λ‚΄μš©μ„ 개인적으둜 λ³΅μŠ΅ν•˜κΈ° νŽΈν•˜λ„λ‘ μž¬κ΅¬μ„±ν•œ κΈ€μž…λ‹ˆλ‹€.
μžμ„Έν•œ μ„€λͺ…은 μ°Έκ³  μ‚¬μ΄νŠΈλ₯Ό μ‚΄νŽ΄λ³΄μ‹œκΈ° λ°”λžλ‹ˆλ‹€.


μ„œλ‘ 


async, await ν‚€μ›Œλ“œλŠ” ν”„λ‘œλ―ΈμŠ€λ₯Ό 더 가독성 있게 ν‘œν˜„ν•΄μ£ΌκΈ° μœ„ν•΄ νƒ„μƒν•œ λ¬Έλ²•μž…λ‹ˆλ‹€.


async


async ν‚€μ›Œλ“œλŠ” λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

async function f() {...};

const af = async () => {...};

async ν‚€μ›Œλ“œκ°€ 뢙은 ν•¨μˆ˜λŠ” λ°˜λ“œμ‹œ ν”„λ‘œλ―ΈμŠ€λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

async function f() {
  return 1;
}

console.log(f());

>> Promise {<fulfilled>: 1}

await


await ν‚€μ›Œλ“œλŠ” async ν‚€μ›Œλ“œκ°€ 뢙은 ν•¨μˆ˜ μ•ˆμ—μ„œλ§Œ μž‘λ™ν•˜λ©° λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

async function f() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("μ™„λ£Œ!"), 1000);
  }
  
  // 이 λΆ€λΆ„μ—μ„œ ν”„λ‘œλ―ΈμŠ€κ°€ 이행될 λ•ŒκΉŒμ§€ κΈ°λ‹€λ¦½λ‹ˆλ‹€.
  const result = await promise;
                              
  console.log(result); // "μ™„λ£Œ"
}

ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κ³ , ν•¨μˆ˜ 본문이 μ‹€ν–‰λ˜λŠ” 도쀑에 await ν‚€μ›Œλ“œλ₯Ό 가진 μ€„μ—μ„œ 싀행이 μž μ‹œ μ€‘λ‹¨λ˜μ—ˆλ‹€κ°€ ν”„λ‘œλ―ΈμŠ€κ°€ 처리되면 싀행이 μž¬κ°œλ©λ‹ˆλ‹€. μ΄λ•Œ ν”„λΌλ―ΈμŠ€ 객체의 result 값이 λ³€μˆ˜ result에 ν• λ‹Ήλ©λ‹ˆλ‹€. λ”°λΌμ„œ μœ„ μ˜ˆμ‹œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 1초 뒀에 'μ™„λ£Œ!'κ°€ 좜λ ₯λ©λ‹ˆλ‹€.

ν”„λ‘œλ―ΈμŠ€κ°€ 처리되길 κΈ°λ‹€λ¦¬λŠ” λ™μ•ˆμ—” 엔진이 λ‹€λ₯Έ 일(λ‹€λ₯Έ 슀크립트λ₯Ό μ‹€ν–‰, 이벀트 처리 λ“±)을 ν•  수 있기 λ•Œλ¬Έμ—, CPU λ¦¬μ†ŒμŠ€κ°€ λ‚­λΉ„λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.


μ—λŸ¬ 핸듀링


ν”„λ‘œλ―ΈμŠ€κ°€ μ •μƒμ μœΌλ‘œ μ΄ν–‰λ˜λ©΄ await promiseλŠ” ν”„λ‘œλ―ΈμŠ€ 객체의 result에 μ €μž₯된 값을 λ°˜ν™˜ν•©λ‹ˆλ‹€. 반면 ν”„λΌλ―ΈμŠ€κ°€ κ±°λΆ€λ˜λ©΄ 마치 throw문을 μž‘μ„±ν•œ κ²ƒμ²˜λŸΌ μ—λŸ¬κ°€ λ˜μ Έμ§‘λ‹ˆλ‹€.

async function f() {
  await Promise.reject(new Error("μ—λŸ¬ λ°œμƒ!"));
}

μœ„ μ½”λ“œλŠ” μ•„λž˜ μ½”λ“œμ™€ λ™μΌν•©λ‹ˆλ‹€.

async function f() {
  throw new Error("μ—λŸ¬ λ°œμƒ!");
}

awaitκ°€ λ˜μ§„ μ—λŸ¬λŠ” throwκ°€ λ˜μ§„ μ—λŸ¬λ₯Ό μž‘μ„ λ•Œμ²˜λŸΌ try..catchλ₯Ό μ‚¬μš©ν•΄ μž‘μ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

async function f() {
  try {
    const response = await fetch('http://μœ νš¨ν•˜μ§€-μ•Šμ€-μ£Όμ†Œ');
  } catch(err) {
    console.log(err); // TypeError: failed to fetch
  }
}

f();

μ—λŸ¬κ°€ λ°œμƒν•˜λ©΄ μ œμ–΄ 흐름이 catch λΈ”λ‘μœΌλ‘œ λ„˜μ–΄κ°‘λ‹ˆλ‹€. μ—¬λŸ¬ μ€„μ˜ μ½”λ“œλ₯Ό try둜 κ°μ‹ΈλŠ” 것도 κ°€λŠ₯ν•©λ‹ˆλ‹€.

async function f() {
  try {
    const response = await fetch('http://μœ νš¨ν•˜μ§€-μ•Šμ€-url');
    const user = await response.json();
  } catch(err) {
    // fetch와 response.jsonμ—μ„œ λ°œν–‰ν•œ μ—λŸ¬ λͺ¨λ‘λ₯Ό μ—¬κΈ°μ„œ μž‘μŠ΅λ‹ˆλ‹€.
    console.log(err);
  }
}

f();

try..catchκ°€ μ—†μœΌλ©΄ μ•„λž˜ μ˜ˆμ‹œμ˜ async ν•¨μˆ˜ f()λ₯Ό ν˜ΈμΆœν•΄ λ§Œλ“  ν”„λ‘œλ―ΈμŠ€κ°€ κ±°λΆ€ μƒνƒœκ°€ λ©λ‹ˆλ‹€. f()에 .catchλ₯Ό μΆ”κ°€ν•˜λ©΄ κ±°λΆ€λœ ν”„λ‘œλ―ΈμŠ€λ₯Ό μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

async function f() {
  const response = await fetch('http://μœ νš¨ν•˜μ§€-μ•Šμ€-url');
}

// f()λŠ” κ±°λΆ€ μƒνƒœμ˜ ν”„λΌλ―ΈμŠ€κ°€ λ©λ‹ˆλ‹€.
f().catch(alert); // TypeError: failed to fetch // (*)

μš”μ•½


ν•¨μˆ˜μ— async ν‚€μ›Œλ“œλ₯Ό μΆ”κ°€ν•˜λ©΄ 두 가지 νš¨κ³Όκ°€ μžˆμŠ΅λ‹ˆλ‹€.

  • ν•¨μˆ˜λŠ” μ–Έμ œλ‚˜ ν”„λΌλ―ΈμŠ€λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

  • ν•¨μˆ˜ μ•ˆμ—μ„œ await ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œλ―ΈμŠ€ μ•žμ— await ν‚€μ›Œλ“œλ₯Ό 뢙이면 μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œλ―ΈμŠ€κ°€ 처리될 λ•ŒκΉŒμ§€ λŒ€κΈ°ν•©λ‹ˆλ‹€. μ²˜λ¦¬κ°€ μ™„λ£Œλ˜λ©΄ 쑰건에 따라 μ•„λž˜μ™€ 같은 λ™μž‘μ΄ μ΄μ–΄μ§‘λ‹ˆλ‹€.

  • μ—λŸ¬ λ°œμƒ – μ˜ˆμ™Έκ°€ 생성됨(μ—λŸ¬κ°€ λ°œμƒν•œ μž₯μ†Œμ—μ„œ throw errorλ₯Ό ν˜ΈμΆœν•œ 것과 동일함)

  • μ—λŸ¬ λ―Έλ°œμƒ – ν”„λΌλ―ΈμŠ€ 객체의 result 값을 λ°˜ν™˜

async, await ν‚€μ›Œλ“œλ₯Ό ν•¨κ»˜ μ‚¬μš©ν•˜λ©΄ 읽고, μ“°κΈ° μ‰¬μš΄ 비동기 μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

profile
Just Do It πŸ’ͺπŸ’’

0개의 λŒ“κΈ€