-
비동기 처리를 위한 async와 await 코드Front end/javaScript 2023. 11. 27. 00:40
1. async 란
- 비동기 처리를 위한 문법
- 특정 함수가 Promise를 반환하게 함
- 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능2. await 란
- 비동기 처리 결과를 기다리게 함
- async 함수 내부에서만 사용 가능
- 프로미스 체이닝을 간결하게 개선(가독성 증가)더보기// JavaScript 관련 구글링// 👉 site:developer.mozilla.org {연관_키워드}'use strict';
// 1. async 란// - 비동기 처리를 위한 문법// - 특정 함수가 Promise를 반환하게 함// - 기존 프로미스보다 더 간결한, 직관적인 코드 작성가능
// 비동기 함수, Proimse 활용(군더더기가 많은 코드)function myPromise() {return new Promise((resolve, reject) => {resolve("🍎");});}console.log(myPromise());
// 비동기 함수, async 활용(담백한 코드로 개선)// 프로미스를 반환async function myAsync(){return "🍎"; // resolve("🍎")
}console.log(myAsync());
// 2. await 란// - 비동기 처리 결과를 기다리게 함// - async 함수 내부에서만 사용 가능// - 프로미스 체이닝을 간결하게 개선(가독성 증가)
// 3. try-catch-finally 구문// - 예외 처리를 위한 구문// - 예외란, 특정 코드가 수행에 실패한 것// - 프로미스 체이닝에서, then-catch-finally와 같은 개념
// 비동기 함수function carrotPromise() {return new Promise((resolve, reject) => {setTimeout(() => {if (Math.random() < 0.5) {resolve("🥕");} else {reject("🍉");}}, 1000);});}
// 요리하기: 당근 => 스프// 더 깔끔한 코드는 없을까..?// async와 await로 코드를 개선async function cookCarrotSoup(){try{// try: 정상 수행하길 기대하는 코드const carrot = await carrotPromise(); // await코드 하면 이 해당 carrotPromise() 코드가 실행되기 전까지는 다음으로 넘어가지 않는다.console.log(`[${carrot}] 스프를 만들었어요`);return "당근 스프"; // resolve("당근 스프");} catch(err) {// catch: 예외 발생시, 처리할 코드console.log(`요리 실패: ${err}으로 스프를? 멈춰!`);throw new Error("요리 실패"); // reject("요리 실패");} finally {// finally: 무조건 수행할 코드console.log("== 끝 ==")}}
// 체이닝 호출도 가능? Yes.cookCarrotSoup().then((data) => {console.log(data)}).catch((err) => {console.log(err)}).finally(() => {console.log("== 진짜로 끝 ==")});출저: 홍팍 (https://www.youtube.com/@hongpark)
이 블로그 기록은 개인 공부용 기록입니다.
'Front end > javaScript' 카테고리의 다른 글
Callback Hell 탈출 (0) 2023.11.26 동기 & 비동기 방식 (0) 2023.11.26 API (0) 2023.11.25 DOM & EventHandling (0) 2023.11.24 클래스&객체, 생성자 호출 (1) 2023.11.24