async와 await

• promise를 사용할 때

function fetchAuthorName(postId) {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((response) => response.json())
    .then((post) => post.userId)
    .then((userId) => {
      return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
        .then((response) => response.json())
        .then((user) => user.name);
    });
}

위와 같은 프로미스의 문제점은 에러가 발생할 경우, 몇 번째 then()에서 문제가 발생한 건지 찾아내기가 힘듭니다.

1. async 함수

function 앞에 async가 붙으면 해당 함수는 항상 프라미스를 반환합니다.

async function promise() {
	return 1;
}
promise().then(alert) // 1

2. await 함수

await함수는 async 함수 안에서만 작동

async function f() {
	let promise = new Promise((resolve, reject) => {
    	setTimeout(() => resolve('완료!'), 1000)
    })
    let result = await promise; // 프로미스가 이행될때까지 기다림
}

맨 위의 코드를 async 로 바꾸면

async function fetchAuthorName(postId) {
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  const post = await postResponse.json();
  const userId = post.userId;
  const userResponse = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );
  const user = await userResponse.json();
  return user.name;
}

3.오류 처리

async에서는 try..catch를 이용해서 에러를 잡을 수 있습니다.

1) try...catch

async function promise() {
	try {
       let response = awaif fetch('url')
    }
  catch (err) {
  
  }
}