[JavaScript] AJAX / XMLHttpRequest, axios, fecth

🔗 AJAX란?

 

 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다.

 XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다.

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await

 

---

 

🔗 XMLHttpRequest

 

AJAX는 다양한 라이브러리를 가지고 있는데, 이 라이브러리들은 모두 XMLHttpRequest를 기반으로 한다.

// GET 요청
 
var xhr = new XMLHttpRequest();
 
xhr.onload = function() {
    if (xhr.status === 200 || xhr.status === 201) {
        console.log(xhr.responseText);
    } else {
        console.error(xhr.responseText);
    }
};
xhr.open('GET', 'https://www.zerocho.com/api/get?name=zerocho');
xhr.send();
 
// POST 요청
 
var xhr = new XMLHttpRequest();
var data = {
    property_one: value_one,
    property_two: value_two
};
 
xhr.onload = function() {
    if (xhr.status === 200 || xhr.status === 201) {
        console.log(xhr.responseText);
      } else {
        console.error(xhr.responseText);
      }
};
xhr.open('POST', 'https://someurl.com');
xhr.setRequestHeader('Content-Type', 'application/json'); // 컨텐츠타입을 json으로
xhr.send(JSON.stringify(data)); // 데이터를 stringify해서 보냄

 

 

---

 

🔗 AJAX 라이브러리

 

◾ axios

 

• 대부분의 브라우저를 지원한다.
• 따로 import(설치)가 필요하다.
• HTTP 요청 취소가 가능하다.
• HTTP 요청과 응답을 JSON 형태로 자동 변경한다. (.json() 사용 필요 X)
• 응답시간 초과를 설정하여, 네트워크 에러가 발생했을 때 오래 기다리지 않을 수 있다. (response timeout API 제공 O)
• catch에 걸렸을 때, .then을 실행하지 않고 .console 창에 해당 에러 로그를 보여준다.
• return 값은 Promise 객체 형태이다.

let url = 'https://someurl.com';
let options = {
    method: 'POST',
    url: url,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    data: {
        property_one: value_one,
        property_two: value_two
    }
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
}

 

[JavaScript] Axios 사용하여 웹서버와 통신하기

 

◾ fecth

 

• 지원하지 않는 브라우저가 있다.
• 자바스크립트 내장 라이브러리이기 때문에 import 하지 않고 사용할 수 있다.
• 라이브러리의 업데이트에 따른 에러 방지가 가능하다. (React Native의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데, fetch의 경우 이를 방지할 수 있다.)
• HTTP 요청 취소가 불가능하다.
• HTTP 요청과 응답을 JSON 형태로 자동 변경하지 않는다. (.json() 사용 필요 O)
• 네트워크 에러가 발생했을 때 기다려야 한다. (response timeout API 제공 X)
• return 값은 Promise 객체 형태이다.

let url = 'https://someurl.com';
let options = {
    method: 'POST',
    mode: 'cors',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify({
        property_one: value_one,
        property_two: value_two
    })
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
}

 

 

✔ fetch의 request 함수는 response 객체가 ok 프로퍼티를 포함하는 것으로 정상적인 요청/응답을 체크하고, axios는 status 값이 200인지와 statusText를 통해서 확인한다.

✔ fetch는 response 객체에 .json() 메소드를 호출하여 json 객체를 얻고, axios는 response 객체의 data property에 접근하여 얻는다.

---

🔎 참고 자료

• Ajax (axios, fetch)
• AJAX 요청

💡 같이 보면 좋을 Post

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await

[JavaScript] Axios 사용하여 웹서버와 통신하기