Ajax (비동기)

YEZI🎐·2022년 7월 13일

Javascript

목록 보기

9/13

HTTP 통신

HTTP(HyperText Transfer Protocol)란 HTML(Hypertext Markup Language)를 주고 받는 네트워크에 대한 통신 규약 혹은 원칙이다.
문서를 주고 받는게 HTTP 통신인데 Ajax는 문서를 주고 받지 않는다.
Ajax는 페이지 전환이 일어나지 않고 데이터 통신을 한다.

Today...... I'm going to learn............. about Ajax...

Ajax(Asynchronous Javascript And Xml)

비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라고 부른다.

간단하게 비동기 방식을 설명하자면,
코드1의 실행이 완료될 때 까지 기다리지 않고 코드2를 실행시킨다.
그리고 코드1의 실행이 완료(성공 or 실패)되면 특정 코드를 실행시키는 것이다.

Ajax는 서버로부터 데이터를 가져와서 전체 페이지를 새롭게 로딩하지 않고 원하는 일부분만 로드하는 기법이다.
기존에는 XMLHttpRequest API를 통해 통신을 주고 받았지만 엄청나게 번거로운 작업이었다.

불편함을 개선하기 위해 JQuery를 통해 구현하기 시작하다가 이후 fetch API가 ES6 표준으로 등장하면서 fetch API를 통해 통신하는 것이 주요 방식으로 자리를 잡았다.
서버에서 정보를 가져올 때 리액트처럼 페이지 전체를 새로 고침 하지 않아도 받아올 수 있다.

Fetch API

Promise 기반이며, 브라우저에 내장되어 있는 웹 API이다.
라이브러리를 별도로 다운로드 할 필요 없이 바로 사용할 수 있다.

Fetch API가 제공하는 fetch() 함수로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있다.
fetch()는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

Response

fetch로 받아온 Response 객체는 HTTP 응답 전체를 나타내는 객체로 response에 대한 상태(status), 어디서 호출했는지(url) 등 수 많은 데이터가 담겨있다.
JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 한다.

fetch(url)
 .then((response) => response.json())
 .then((json) => console.dir(json));

JSON ↔ Object

JSON.parse() : JSON을 객체으로 반환 => 서버로 데이터를 가져올 때
JSON.stringify() : 객체를 JSON으로 반환 => 서버로 데이터를 보낼 때

const obj = { x: 1, y: 10 }
const changeJson = JSON.stringify(obj);		// JSON을 객체으로 반환
const changeObj = JSON.parse(changeJson);	// 객체를 JSON으로 반환

네트워크 통신을 통해 받아온 데이터 => json으로 변환 => javascript 객체로 변환하여 사용한다.

Fetch API와 async/await 활용

앞서 배웠듯 fetch()에 첫 번째 인자로 URL을 넣어 데이터를 받아올 수 있다.
API를 제공하는 jsonplaceholder를 이용하여 데이터를 가져와 await가 있고 없고의 차이를 두어 withoutAwait 변수와 Await 변수를 console로 확인해보았다.

async function fetchData() {
    const withoutAwait = fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(withoutAwait);
    const Await = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(Await)
}
fetchData();

결과를 보면 바로 호출 한 withoutAwait는 제대로 된 데이터 즉, Response가 들어오지 않는다.
때문에 then() 이나 async/await를 같이 사용하여 데이터를 받아야 한다.

Axios

Promise 기반이며, 브라우저와 node.js에서 사용할 수 있는 HTTP 클라이언트 라이브러리이다.
fetch()와 다르게 데이터를 JSON으로 자동 변환 된다.
이 외에도 인터셉터, 요청 취소,타임아웃 등 다양한 기능을 제공한다.

설치

# with npm
npm install axios

# with yarn
yarn add axios

Axios 문법 구성

axios({
    url: 'https://test/api/cafe/list/today', // 통신할 웹문서
    method: 'get', // 통신할 방식
    data: { // 인자로 보낼 데이터
        foo: 'diary'
    }
});

요청 메소드 명령어

편의를 위해 지원하는 모든 요청 메소드의 명령어를 제공한다.
객체 옵션을 이것저것 주면 가독성이 떨어지고 너저분하니, 함수형으로 재구성하여 나눠논 것으로 이해하면 된다.

요청 Config

요청을 만드는 데 사용할 수 있는 주요 config 옵션이다.
오직 url만 필수이며 method를 지정하지 않으면 GET방식이 기본값이다.

References

YEZI🎐

까먹지마도토도토잠보🐘

이전 포스트

Promise 객체

다음 포스트