AJAX??? 이해하기, Fetch API

Code note/자바스크립트

AJAX??? 이해하기, Fetch API

코드노트 2023. 1. 13. 16:43

AJAX (Asynchronous JavaScript And XML)

음...

서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술?

서버와 통신하기 위해 XML객체를 사용하는 것!

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청

-> 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

* XML (XMLHttpRequest)

- 서버와 상호작용을 할 때 사용

- 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다.

HTTP요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방법

5가지 요청 메서드 CRUD ( Create(생성), Read(읽기), Update(갱신), Delete(삭제) )

HTTP 요청 메서드	종류	목적	페이로드
GET	index/retrieve	모든 / 특정 리소스 취득	X
POST	create	리소스 생성	O
PUT	replace	리소스의 전체 교체	O
PATCH	modify	리소스의 일부 수정	O
DELETE	delete	모든 / 특정 리소스 삭제	X

- GET : 데이터를 URL의 일부분인 쿼리 문자열로 서버에 전송

- POST : 데이터 ( 페이로드 )를 요청 몸체에 담아 전송

* 페이로드 : 전송되는 데이터

서버로 데이터를 요청하는 경우에서 알아보려고 한다.

예전에 사용하던 ~~onreadystatechange프로퍼티~~는 그냥 넘어가자..

Fetch

GET

// URL요청
fetch('url')
  // Fetch 응답 객체를 받아온다.
  .then((response) => {
    return response.json()
  })
  // 응답 객체가 JSON -> 순수 JS 객체로 변환
  .then((json) => {
    console.log(json)
  })
  .catch((에러) => {
    console.log(에러)
  })

- fetch() 함수는 기본값으로 GET방식으로 작동

- 옵션은 따로 달지 않아도 된다.

- {status: 200} 확인

- json형태의 데이터를 응답하기 때문에 response 객체는 json()메서드를 사용

단순 특정 API에 저장된 데이터를 보여주는 경우에는 GET방식의 HTTP 통신으로 가능하다.

POST

fetch("url", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "Test",
    id: 1,
  }),
}).then((response) => console.log(response));

- API에서 데이터를 생성해야한다면 POST방식을 사용

- method : "POST"로 지정

- headers 옵션에서는 json포멧을 사용하는걸 지정

- body 에는 JSON.stringify를 통해서 정보를 작성

- {status:201} 확인

PUT, DELETE

fetch("url", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "test",
    id: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

- 데이터의 수정 및 삭제를 위해서는 PUT과 DELETE방식의 HTTP 호출을 해야한다.

- method 방식을 PUT으로 지정하는거 외에는 POST방식과 비슷하다.

fetch("url", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data));

- method 방식을 DELETE로 지정

- 보낼 데이터가 따로 필요 없기 때문에 headers, body 옵션은 없어도 된다.

Tip

async function post(url, path, body, headers = {}) {
  const url = `https://${url}/${path}`;
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify(body),
  };
  const res = await fetch(url, options);
  const data = await res.json();
  if (res.ok) {
    return data;
  } else {
    throw Error(data);
  }
}

post("jsonplaceholder.typicode.com", "posts", {
  title: "Test",
  body: "test",
  id: 1,
})
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

- 같은 내용들을 반복할 수 있기 때문에 별도의 함수나 모듈로 사용할 수 있다.

- async/await키워드를 이용해서 HTTP 방식들을 비동기 함수로 작성하여 사용 가능!

- fetch API는 브라우저에서만 가능하다.

- node js에서 node-fetch, unfetch 라이브러리를 통해서 사용 가능

async는 프라미스에 대하여 포스팅하면서 자세하게 정리하려고 한다.

간단하게만 알아보자!

async

async function getData() {
  let response = await fetch("url")
  if (!response.ok) {
    throw new Error("에러")
  }
  let res = await response.json();
  console.log(res)
}
getData().catch(() => {
    console.log("에러")
  })

- function앞에 async 를 붙이게 되면 해당 함수는 프라미스를 반환한다.

- 프라미스가 아닌 값을 반환하더라도, 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 한다.

- await 키워드를 만나게 되면 프라미스가 처리될때까지 기다린다. 결과는 그 이후에 반환

- then으로 결과값을 받을 수 있지만 await를 통해서 가독성이 좋은 장점도 있다.

그외에도

jquery...

리엑트, 뷰?에서는 axios라이브러리가 있다. 다음 포스팅에서 자세하게 정리하도록 해봐야겠다.!

axios.get("url").then((result) => {
  console.log(result.data)
}).catch(() => {
  console.log("에러")
})

그리고 비동기를 사용하다가 자주 만나게 되는 CORS 에러가 나는 이유는?

네이버에서 카카오로 요청하게 된다면? 당연히 거절하게 된다. 거절..하게 되면 뜨는거다!

let cors = require('cors')
app.use(cors())

- 이렇게 해결해보자!

- 모든 도메인에서 제한없이 해당 서버에 요청을 보내고 응답을 받을 수 있다.