브라우저와 Node JS : 데이터를 가져올 수 있는 다양한 방법들 (추가중)

📍  클라이언트 단의 API 호출을 도와주는 Node.js 라이브러리

 

✔  request

✔  axios

✔  jQuery

 

 

📍  클라이언트 단의 API 호출을 도와주는 브라우저 내장 객체 or 함수

 

✔  XMLHttpRequest - 객체

✔  fetch( ) - 함수

 

 

📌  XMLHttpRequest 특징

 

◾  XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있다.

◾  오래된 브라우저를 지원하기 위해 아직까지도 쓴다.

◾  fetch가 아직 처리하지 못하는 일들을 위해 쓰인다. ( ex. 업로드 진행 상황 추적하기 )

◾  데이터를 동기적으로 불러올 수도 있고, 비동기적으로 불러올 수도 있다.

 

 

📌  XMLHttpRequest 사용법

 

📎  문법

// request를 요청하기 위해서는 3가지 단계가 필요하다.
// 01 XMLHttpRequest 객체를 생성한다. (생성과 함께 모든 요청은 초기화된다.)
// 02 request 요청에 필요한 옵션을 정의해준다.
// 03 request 요청을 보낸다.

// 01
let xhr = new XMLHttpRequest();

// 02
xhr.open(method, URL, [options]);  // options에서 asunc, uer, password 등 설정 가능

✔  Asynchronous
// xhr.open(method, URL, true) 옵션을 추가로 준다.
✔  Synchronous
// (default값으로 설정되있음)
// xhr.open(method, URL, false) 옵션을 추가로 주거나 안적어주면 된다.

// 03
xhr.send([body]);

 

// XMLHttpRequest 메서드는 응답을 xhr event handler 로 처리한다.

// load : 응답이 완벽히 받아져왔을 때 (성공/실패 상관없이 처리)
// error : 응답이 완료되지 않았을 때 (네트워크가 다운되었거나 URL이 명확하지 않는 경우 처리)
// progress : 응답이 download될 때의 상황을 주기적으로 트리거해야할 때

xhr.onload = function(){
  console.log('Loaded', `${xhr.status} ${xhr.response}`);
};

xhr.onerror = function(){
  console.log('Error');
};

xhr.onprogress = function(event){
  console.log(`Received ${event.loaded} of ${event.total}`);
  // event.loaded : 다운로드한 바이트 수 확인 가능
  // event.total : 총 바이트 수 확인 가능
  // event.lengthComputable = true 이면 서버에서 Content-Length 헤더를 보내준다.
};

 

📎  예시 

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://code-designer.tistory.com/manage/newpost/');

xhr.send();

xhr.onload = function(){
  if(zhr.status === 200){
    console.log('Success', `${xhr.response}`);
  }
  else{
    console.log('Error', `${xhr.status} ${xhr.statusText}`);
  }
  
  // xhr 프로퍼티들
  // xhr.status : HTTP 상태 코드
  // xhr.statusText : HTTP 상태 메세지
  // xhr.response(xhr.responseText) : 응답된 body
  
};

xhr.onerror = function(){
  console.log('Error');
};

// xhr.onprogress = function(event){
//   if(event.lengthComputable){
//     console.log(`Received ${event.loaded} of ${event.total} bytes`);
//   }
//   응답에 Content-Length 헤더가 없을 때
//   else{
//     console.log(`Reveived ${event.loaded} bytes`);
//   }
// }

 

 

📌  Fetch API 특징

 

◾  Fetch API는 언제나 Promise 객체를 반환한다.

◾  HTTP error 일때 reject를 반환하지 않고, 대신 ok 상태가 false인 resolve를 반환한다.

       -->  Promise의 특성과 완전히 일치하지 않는다는 걸 알 수 있음

       -->  BUT  네트워크 장애나 요청 자체가 완료되지 못하면 reject를 반환한다.

◾  Fetch API는 쿠키는 주고 받지 않는다. 쿠키를 전송하고싶으면 credential 옵션을 반드시 설정해야 한다.  

 

 

📌  Fetch API 사용법

 

📎  문법

// fetch()
// 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받는다.

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

 

📎  예시 1

fetch('https://code-designer.tistory.com/manage/newpost/')
  .then((response) => console.log(response));
  
// Response 
// {type: 'basic', redirected: false, status: 200, ok: true, 
//  url: 'https://code-designer.tistory.com/manage/newpost/'…}

 

📎  예시 2

// 이렇게 옵션에 메서드와 헤더, 바디까지 정의한 객체를 전달해 fetch 요청을 할 수 있다.
// 옵션 객체가 없으면 default로 GET 요청이 된다.

let url = 'https://code-designer.tistory.com/manage/newpost/';
let data = { id: 1 };

fetch(url, {
  method: 'POST' // 또는 'PUT'
  headers: {
    'Content-Type': 'application/json'
  }
  body: JSON.stringify(data), // data는 문자거나 객체 가능.
}).then(res => res.json())
  .then(data => console.log('Success', data))
  .catch(error => console.log('Error', error));