fetch에서의 await

코드 1

export const request = async (url, options = {}) => {
  try {
    const res = await fetch(`${API_END_POINT}${url}`, {
      ...options,
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (res.ok) {
      // 여기에서는 왜 await을 한번 더쓰지? res는 이미 await 하고 받아온 값 아닌가..
      // 이 
      const json = await res.json();
      
      return json;
    }

    throw new Error("API 호출 오류");
  } catch (e) {
    alert(e.message);
  }
};

분명 res를 await 키워드를 붙혀 프로미스 객체를 반환 받아 왔는데 왜 await을 한번 더 써서 res.json()으로 파싱해서 보내주는 걸까 라는 고민을 했다.

해당 fetch 데이터를 받아주는 코드는 다음과 같다

코드 2

 // userList http 요청
  const fetchUserList = async () => {
    const userList = await request(`/users`);
    
    this.setState({
      ...this.state,
      userList,
    });
  };

코드 1에서 await을 붙히지 않은 json을 콘솔에 찍어보면 프로미스 객체가 출력되고, await을 붙히면 해당 데이터를 파싱한 데이터가 출력이 된다.

Promise가 await에 넘겨지면, await은 Promise가 fulfill되기를 기다렸다가 해당 값을 리턴하는데, await을 붙히지 않으면 fulfill되기를 기다리지 않아 프로미스 객체가 그대로 콘솔에 출력이 되는 것이고, await을 붙히면 fulfill되기를 기다렸다가 해당 값을 리턴하기에 파싱된 데이터가 출력이 되었었던 것이다.

async/await을 쓰지 않았다면 response.json().then((res) => return res) 이런식으로 데이터를 리턴해줬어야 했을것이다.

하지만 현재 내 코드에서는 문제는 없다. res를 await으로 감싸서 리턴한다면 받아주는 코드에서 await을 사용하여 넘어온 값을 resolve된 Promise로 변환 하기를 기다리기 때문에 문제가 없고, await으로 감싸서 리턴하지 않아 프로미스 객체가 넘어와도 받아주는 코드의 await이 해당 객체가 fulfill 되기를 기다렸다가 해당 값을 리턴하면 되기 때문이다.