Ajax with Fetch

Fetch는 Promise-based다.

단, 브라우저 호환성(Internet Explorer 등)의 문제로 Polyfill이 필요할 수 있다.

fetch 사용법은 매우 간단하다.

fetch('<URL-to-the-resource-that-is-being-requested>');

주의할 것은 Cross-Origin Issue가 있을 수 있다는 점이다.

Fetch가 간편하고 XHR object를 대체한다고 해서, 비동기 네트워크 요청을 하는 데 필요한 본래의 규칙들을 모두 스킵할 수 있는 것은 아니다! Fetch도 여전히 자원을 공유하는 데 있어 cross-origin protocol를 따라야 한다. 즉 기본적으로, 데이터를 load하게 될 사이트와 동일한 도메인에 있는 데이터에 대한 요청만 할 수 있다(Same origin policy).

Fetch에서 또 하나 추가된 것은 'Headers' constructor function이다. 

Headers on MDN 참조

API 요청을 하는 데 필요한 Authorization header를 채우는 방식은 다음과 같다. fetch()의 두번째 인자로 'headers' property를 추가한다.

fetch(https://api.unsplash.com/search/photos?page=1&query=${searchedForText}, { 
     headers: { 
         Authorization: 'Client-ID abc123' 
    } 
});

const requestHeaders = new Headers(); 
requestHeaders.append('Authorization', 'Client-ID abc123'); 
fetch(https://api.unsplash.com/search/photos?page=1&query=${searchedForText}, { 
     headers: requestHeaders 
});

WindowOrWorkerGlobalScope.fetch() on MDN

Using Fetch on MDN

Fetch API on MDN

HTTP 메소드는 기본으로 GET으로 설정되어 있지만, 바꾸려면 다음과 같이 한다.

fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
    method: 'POST'
});

fetch request를 했으면 response를 다뤄야 하는데, 위에서 언급한 대로 fetch는 promise-based다이므로, promise에 대한 개념을 이해하고 있어야 한다.

다음과 같이 사용한다.

fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
    headers: {
        Authorization: 'Client-ID abc123'
    }
}).then(function(response) {
    debugger; // work with the returned response
});

여기서 response는 Fetch API에서 새로 추가된 Response object로, object 자체일 뿐 어떤 데이터를 보여주지는 않는다. response object의 body를 보기 위해, 다음과 같이 한다.

fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
    headers: {
        Authorization: 'Client-ID abc123'
    }
}).then(function(response) {
    return response.json();
}).then(addImage);

function addImage(data) {
    debugger;
}

또한 ES6의 arrow function을 이용하면 다음과 같이 코드를 간소화 할 수 있다.

// without the arrow function
}).then(function(response) {
    return response.json();
})

// using the arrow function
}).then(response => response.json())

Promise의 기능을 더 반영한 코드. (catch() 추가)

fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
    headers: {
        Authorization: 'Client-ID abc123'
    }
}).then(response => response.json())
.then(addImage)
.catch(e => requestError(e, 'image'));

function addImage(data) {
    debugger;
}

function requestError(e, part) {
    console.log(e);
    responseContainer.insertAdjacentHTML('beforeend', `<p class="network-warning">Oh no! There was an error making a request for the ${part}.</p>`);
}