fetch 함수

1Hoit·2023년 1월 19일

자바스크립트

목록 보기

23/25

fetch 함수

const promise = fetch(url [,options])

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다.

XMLHttpRequest 객체보다 사용법이 간단하다.

프로미스를 지원하기에 비동기 처리를 위한 콜백 패턴의 단점을 커버한다.

HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

후속 처리 메서드를 사용할 수 있다.
then을 통해 프로미스가 resolve한 Response 객체를 전달 받을 수 있다.

options는 예제를 통해 확인해보자

fetch("https://koreanjson.com/posts/1")

fetch의 결과는 Promise 객체를 반환하고

[[PromiseResult]] 내부 슬롯에서 확인할 수 있다.

.then(response=>console.log(response)); 를 통해 간다면
[[PromiseResult]] 내부 슬롯안의 Response 객체를 바로 받을 수 있다.

Response 객체

then을 통해 프로미스가 resolve한 Response 객체를 전달 받으면 HTTP 응답 몸체를 위한 다양한 메서드를 제공한다.

fetch 함수가 반환한 프로미스가 래핑하고 있는 MIME 타입이 application/json 인 HTTP 응답몸체를 취득하려면 Response.prototype.json 메서드를 사용해야한다.

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

결과

Response.prototype.json 메서드**

Response 객체에서 HTTP 응답 몸체를 취득하여 역질렬화 한다.

이는 Response 객체를 보면 json 프로퍼티가 있는데 이는 함수로 정의 되어있다.

예시

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => console.log(response.json()))
  .catch((error) => console.log(error));

[[PromiseResult]]의 Object를 가져온다.

간단한 fetch 예제

const request = {
	get(url){
    	return fetch(url);
    },
  	post(url,payload){
    	return fetch(url,{
        	method: 'POST',
            headers: {'content-Type':'application/json '},
            body: JSON.stringify(payload)
        });
    },
    delete(url){
    	return fetch(url,{method: 'DELETE'});
    } 
};

//1. GET 요청
request.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res=>{
	if(!res.ok) throw new Error(res.statusText);
  	return res.json();
	})
  .then(todos=>console.log(todos))
  .catch(err=>console.log(err));
// {userId: 1, id: 1, title: 'delectus aut autem', completed: false}

//2. POST 요청
request.post('https://jsonplaceholder.typicode.com/todos/1',{
	userId:1,
	title:'JavaScript',
	completed:false 
  })
  .then(res=>{
	if(!res.ok) throw new Error(res.statusText);
  	return res.json();
	})
  .then(todos=>console.log(todos))
  .catch(err=>console.log(err));
// {userId: 1, title: 'JavaScript', completed: false}

//3. Delete요청
request.delete('https://jsonplaceholder.typicode.com/todos/1')
  .then(res=>{
	if(!res.ok) throw new Error(res.statusText);
  	return res.json();
	})
  .then(todos=>console.log(todos))
  .catch(err=>console.log(err));
//{}

Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다.
Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다.
Fetch 함수는 에러처리시 404, 500 에러를 reject하지 않고 불리언타입의 ok 상태를 false로 설정한 Response 객체를 resolve하며 오프라인등의 네트워크 장애나 CORS 에러에 의해 요청이 완료되지 못한 경우만 프로미스를 reject하는 단점이 있지만 (위의 코드 예제 참고)
axious는 모든 HTTP 에러를 reject하는 프로미스를 반환한다.

axios vs fetch API

axios	fetch
써드파티 라이브러리로 설치가 필요	빌트인 API라 별도의 설치 필요없음
자동으로 JSON데이터 형식으로 변환	.json() 메서드를 사용해야 함

axios 사용법

Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치해야 한다.

$ npm install axios

import axios from 'axios'; // 설치한 모듈 불러오기

예제 : axious 사용

// axios를 사용하기 위해서는 설치한 axios를 불러와야 합니다.
import axios from 'axios';

// Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {
    console.log(response);
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// Async / Await ver
// async function request() {
//   const response = await axios.get('https://koreanjson.com/users/1');
//   const { data } = response;
//   console.log(data);
// }

// request();

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Axios ☺️</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;

예제 : fetch 사용

// Promise ver
fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// Async / Await ver
// async function request() {
//   const response = await fetch('https://koreanjson.com/users/1', {
//     method: 'GET',
//   });
//   const data = await response.json();
//   console.log(data);
// }

// request();

const appDiv = document.getElementById('app');
appDiv.innerHTML = `
<h1>Fetch API 😊</h1>
<h3>console 창을 확인해주세요! 👇👇👇</h3>
`;

axious 의 기본적인 요청 방식

1. GET 요청

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드다.
첫번째 인자에는 url주소가 들어가며 url주소는 필수다. 두번째 인자에는 요청 시 사용할 수 있는 옵션들을 설정하게 되며 옵션의 경우 필수는 아니다.

axios.get("url"[,config])

2. POST 요청

POST 요청은 서버에게 데이터를 보내기 위해 사용되는 메서드다. 첫번째 인자에는 url주소가 들어가며 url주소는 필수다.
두번째 인자에는 요청 시 보낼 데이터를 설정하게 되며 옵션의 경우 필수는 아니지만 상황에 따라 설정해주어야 한다.

axios.post("url"[, data[, config]])

간단한 예시

axios
  .post('https://koreanjson.com/users', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));