Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

axios 대신 간단하게 사용하려고 만든 myFetch 함수

axios까지 굳이 필요없는 상황에서 사용할 만한 간단한 myFetch 스크립트다.

axios의 장점과 그 대안

axios가 수년째 업데이트가 없다는 불평을 접하고 axios 대신 fetch를 사용해 볼까 생각했었다. (올해 1월에 접한 이 불평은 정확한 것은 아니었는데 axios는 15일 전인 9월 6일에도 업데이트가 있었다.)

axios가 fetch API에 비해 갖는 핵심 장점은 IE11에서 돌아간다는 것이다. IE11은 fetch API를 지원하지 않는다. 그러나 이 장점은 whatwg-fetch 패키지를 사용하면 해결된다.

timeout 설정, json data를 보낼 때나 받을 때 자동으로 변환, HTTP 인터셉터, 진행상태 추적, 동시 요청 같은 데서 편의성을 제공하지만 fetch API로 불편하게나마 모두 처리할 수 있다. (참고: Axios or fetch(): Which should you use?)

Axios 대신 사용할 수 있는 wretch라는 패키지도 있다. 구형 브라우저에서 Wretch를 사용하려면 fetch polyfill을 이용하면 된다.

myFetch

복잡한 라이브러리를 사용하기 귀찮고 fetch의 장황한 문법도 싫다면 간단한 wrapper 함수를 만들어서 사용하면 된다.

아래 코드를 my-fetch.js 같은 적당한 파일명으로 만들어서 임포트해 사용하면 된다.

export default function (url, body, options) {
    const defaultOptions = {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json'
        }
    };
    options = options || {};
    const unifiedOptions = {...defaultOptions, ...options, ...{ body: JSON.stringify(body) }};
    return fetch(url, unifiedOptions)
        .then(response => {
            if (!response.ok) {
                throw Error(response.status + ' ' + response.statusText);
            }
            return response.json();
        });
}

에러 처리는 “Handling Failed HTTP Responses With fetch()”를 참고했다.

사용법은 아래와 같다. 기본 Request Method는 POST인데 GET으로 바꾸고 싶으면 option에 method를 GET으로 주면 된다.

myFetch('/my/post/end-point', {myData: myData}, options)
    .then(response => response.json())
    .then(data => console.log(data))
    .error(error => console.error(error));

내용물이 fetch니 fetch API를 참고해서 나머지를 코딩하면 된다.

웹팩 같은 번들러를 사용하고 있지 않다면 아래처럼 그냥 함수로 가져와 사용하면 된다.

function myFetch(url, body, options) {
    const defaultOptions = {
        method: 'POST',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json'
        }
    };
    options = options || {};
    const unifiedOptions = {...defaultOptions, ...options, ...{ body: JSON.stringify(body) }};
    return fetch(url, unifiedOptions)
        .then(response => {
            if (!response.ok) {
                throw Error(response.status + ' ' + response.statusText);
            }
            return response.json();
        });
}

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다