[Javascript] 비동기 API 호출 (async/await, fetch)

예시 코드

1. index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="./main.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container">
      <h4 class="text-center">게시판 - Main</h4>

      <div class="input-group mb-3">

      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일시</th>
            <th>조회수</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ board.boardId }}</td>
            <td>{{ board.title }}</td>
            <td>{{ board.userName }}</td>
            <td>{{ board.regDt.date | makeDateStr(".") }}</td>
            <td>{{ board.readCount }}</td>
          </tr>
        </tbody>
      </table>
      <div style="color: red;" class="btn btn-sm btn-primary">
        <a href='javascript:void(0);' onclick="test();">test</a>
        <a href="javascript:getHello();">글쓰기</a>
        <a href="javascript:getHello2();">HelloPOST</a>
      </div>
    </div>
  </body>
</html>

2. main.js

function init() {
  console.log("===init===");
}
init();

async function test() {
  console.log("===test===");
}

function getData(url) {
  return fetch(url).then(function (data) {
    return data.json();
  });
}

async function getHello() {
  const url = "http://localhost:8080/hello";
  const result = await getData(url);
  console.log(result);
  document.write(result.name);
  console.log(result.name);
  return result;
}

// JSON.stringify() : JSON객체로 직렬화 (js객체 => JSON)
// JSON.parse() : Javascript 객체로 역직렬화 (JSON => js객체)
async function getHello2() {
  param = {
    test: "[test param]",
  };
  const url = "http://localhost:8080/hello2";
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    // body: JSON.stringify({
    //   test: "[test param]",
    // }),
    body: JSON.stringify(param),
  })
    // 첫 번째 then: 아직 body도착 전, promise 객체
    // 비동기로 처리된 fetch 함수의 결과 값이 들어오면 then 메소드의 액션을 실행한다.
    // fetch함수는 서버에서 전달받은 Promise 객체를 리턴, 리턴된 객체를 then메소드에서 인자로 받는다. => 헤더는 도착, 바디는 도착 전
    // .json()은 Promise 객체를 리턴한다.
    // Promise 작동방식: fetch 후 날아오는 response객체는 일단 header먼저 도착함. 모든 header 도착하자마자 return됨
    // 아직 body가 안 온 상태인 Promise객체를 바로 반환하는 것임.
    // 중간에 기다렸다가 body까지 다 온 Promise객체를 리턴하고 싶지만 그건 불가능함.
    // 때문에 .then으로 chaining(체이닝)해서 실행해야 한다.
    .then((result) => {
      return result.json();
    })
    .then((result) => {
      console.log(result);
      document.write(result.name);
      console.log(result.name);
    })
    .catch((error) => {
      console.log(error);
      alert("error가 발생하였습니다.");
    });
}

HTTP 메소드에 따른 API 호출

- GET

async function getHello() {
  const url = "http://localhost:8080/hello";
  const result = await getData(url);
  console.log(result.name);
  return result;
}

- POST

Promise 객체 체이닝X

/**
 * Promise 체이닝X
 */
async function getHello3() {
  param = {
    test: "[test param]",
  };
  const url = "http://localhost:8080/hello2";
  const res = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(param),
  });

  const result = await res.json();

  console.log(result.name);
}

Promise 객체 체이닝O

async function getHello2() {
  param = {
    test: "[test param]",
  };
  
  const url = "http://localhost:8080/hello2";
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(param),
  })
    .then((result) => {
      return result.json(); //여기서 Promise 객체가 나옴
    })
    .then((result) => {
      console.log(result.name);
    })
    .catch((error) => {
      console.log(error);
      alert("error가 발생하였습니다.");
    });
}

1. then을 2번 쓰는 이유

- Promise의 작동 방식 때문이다.

- .json을 해도 json객체가 아닌 Promise객체가 리턴된다.

* 비동기로 처리된 fetch()는 결과 값을 받으면 then메소드의 액션을 실행한다.

* fetch()를 하면 서버로부터 전달받은 response 객체를 리턴한다. 리턴된 객체는 then메소드의 인자로 받는다.

- 서버로부터 response 객체를 받을 때, 모든 header가 도착하면 바로 return한다.

=> 아직 body가 오지 않은 상태, body를 기다리고 있는 상태인 Promise 객체를 리턴하는 것이다.

- 중간에 기다려서 body까지 도착한 Promise 객체를 리턴하는 것은 불가능하다. 애초에 header가 도착하자마자 바로 리턴해버리기 때문에, .then으로 chaining(체이닝) 하여 body값을 받아야 한다.

Promise 객체란?

- 비동기 함수 호출이 완료됐을 때 처리하기 위한 함수를 설정하는 모듈
- 비동기 연산의 결과를 나타내는 객체
- 사용이유 : 기존의 콜백함수 사용 시 콜백지옥 발생, 가독성 떨어지고 유지보수성 낮았음.

Promise Chaining (여러 Promise 연결)이란?

- .then을 나열하여 제어하는 방식.
- then에서 return해주고 다음 then에서 이를 받아 사용하는 방식.

2. Javascript 객체와 JSON 객체

- JSON.stringify() : Javascript => JSON 객체로 직렬화

- JSON.parse() : JSON => Javascipt 객체로 직렬화

'Web > Javascript' 카테고리의 다른 글

[Javascript] 변수, 연산자, 조건문, 반복문, 함수, 배열 (0)	2023.12.17

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

악깡버👩🏻‍🌾