[Javascript] HTTP 요청과 응답 처리하는 방법. 프론트 개발자가 알아야 하는

Javascript HTTP 통신 하는 방법

⚡️ XMLHttpRequest  MDN-XMLHttpRequest 객체

짧게 XHR이라고 부릅니다.

XHR은 객체입니다. 서버와 통신을 위해서 사용됩니다.

HTTP 프로토콜 뿐만 아니라 file, ftp 도 지원합니다.

페이지 갱신 없이 필요한 데이터를 받아 올 수 있는 장점이 있습니다.

 

⚡️ fetch() MDN Fetch Web API

ES6에 생긴 기능입니다. Javascript의 Web API의 비동기 네트워크 통신 함수입니다.  XHR 대체제로 나온 기능입니다.

브라우저에 있는 Javascript 엔진을 통신 기능으로 사용합니다.

 

📩 GET 요청 사용 예시

//MDN 코드 사용
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

 

📩 POST 요청 사용 예시

fetch(url, {
  Method: 'POST',
  headers: "Content-Type": "application/json",
  credentials: 'include', // 자격 증명이 포함된 Request 요청 include, same-origin, omit
  body: {
    "TITLE": "KIS's Blog",
    "do":"write"}
})

https://ko.javascript.info/fetch

 

⚡️ Ajax 개발 방식 사용

Asyncronous Javascript And XML

비동기 네트워크 통신 프로그래밍 방식입니다.

순수 Javascript만으로도 Ajax방식으로 비동기 통신 방식을 구현할 수 있습니다.

Ajax도 당연히 HTTP 프로토콜로 서버와 통신하므로, Web API에서 서버 요청 객체인 XMLHttpRequest를 사용합니다.

 

다만, 

JQuery에서는 Ajax를 쉽게 사용하기 위해서 JQuery.Ajax({options...}) 메소드를 지원합니다.

HTTP 요청 관련 메서드인 get(), post() .. 등을 지원합니다.

$.ajax({})	ajax()를 사용해서 HTTP 요청을 전송함. 전송 메소드를 결정해서 사용할 수 있습니다.
$.get({})	파라미터 url로 http method get으로 서버에 요청함.
$.post()	파라미터 url로 http method post로 서버에 요청함.
$.getscript()	웹 페이지에 스크립트를 추가합니다.

 

//JQuery에서 ajax 사용하기
$.ajax({
  url: 'http://...',
  method: "GET",
  dataType: "JSON" // 서버에 전송할 파일 형식
}).done((json) => {
  console.log(json);
})

MDN Ajax

 

⚡️ Axios Axios 개념 잘 정리된 문서

npm axios 페이지

HTTP 통신을 위한 Javascript node package입니다. 사용하려면 npm or yarn 으로 설치하고 사용해야 합니다. 

promise API를 기반으로 하고 있어서 promise 객체를 반환하므로, 동기 처리를 위한 프로그래밍이 가능합니다.

정말 많이 사용되고 있습니다.

패키지만 설치하고 바로 사용하면 되므로 편하게 개발할 수 있습니다. 

 

fetch()보다 좋은 이유

- 응답 데이터 JSON 자동 변환

- CSRF 보호 기능이 내장되어 있습니다.

- 응답 시간 초과 설정 가능

 

참고 블로그 

 

Axios 사용 방법

1. 설치

$ npm i axios

2. 사용

//get 요청
// 비동기 처리 방식을 동기적으로 처리하기위해서 반환된 promise 객체를 then()으로 처리
axios.get('http://...')
.then((response) => {
  console.log(response);
})
.catch((error) => {
  console.log(error);
 })finally(() => {
})

// 비동기 처리 방식을 동기적으로 처리하기위해서 async await를 사용
async function requestPost() {
  const userInfo = await axios.get('http://...');
  console.log(userInfo);
}

 

 

Javasciprt에서 HTTP 통신을 비동기 처리하는 방법

Javascript는 기본적으로 비동기 처리로 로직을 수행합니다.

비동기 처리는 간단한 예로 말하자면, a와 b작업이 순서대로 있는데 a를 실행시키고 완료되는 것을 기다리지 않고 b를 실행하는 처리 방법을 말합니다.

 

이런 특성때문에 서버에서 데이터를 받아온 후에 다음 로직이 순차적으로 실행되게 해야합니다.

비동기를 처리하는 방법은 3가지로 잘 알려져 있습니다.

1. callback 사용

callback지옥에 빠질 수 있습니다.

 

2. promise 사용

promise는 객체입니다.

promise 상태에는 pending, fulfilled 그리고 reject가 있습니다. promise의 이행 단계이기도 합니다.

 

그리고, 이행 상태마다 실행되는 함수가 있습니다.

resolve()- 이행 완료 promise 객체를 반환

reject() - 이행 거절 거부된 promise 객체를 반환

then() - 이행이 완료되고 promise 객체를 반환받은 후의 로직 실행

catch() - 통신 실패했을 경우 로직 실행

 

3. javascript의 async await 사용 MDN async function()

- 비동기 함수에서 순서 보장이 필요한 로직을 간편하게 프로그래밍할 수 있어서 제가 주로 사용합니다.

 

 

async await를 사용해서 http 통신 하는 예시

async function asyncRequestHTTPAPI() {
  const getData = await fetch('http://api.rh');
  console.log(getData);
}