fetch() 소개

fetch()를 사용하면 XMLHttpRequest (XHR)와 유사한 네트워크 요청을 할 수 있습니다. 이 주요 차이점은 Fetch API는 API를 좀 더 단순하게 사용하여 XMLHttpRequest API에서 지원됩니다.

브라우저 지원

  • Chrome: 42. <ph type="x-smartling-placeholder">
  • Edge: 14. <ph type="x-smartling-placeholder">
  • Firefox: 39. <ph type="x-smartling-placeholder">
  • Safari: 10.1. <ph type="x-smartling-placeholder">

소스

이전에 사용한 적이 없는 경우 프로미스 JavaScript 프로미스 소개를 확인해 보세요.

기본 가져오기 요청

다음은 XMLHttpRequest로 구현된 예입니다. 그런 다음 fetch를 사용합니다. URL을 요청하고, 응답을 얻고, JSON으로 변환합니다

XMLHttpRequest

XMLHttpRequest에 성공을 처리하려면 두 개의 리스너가 필요합니다. 오류 사례, open() 및 send() 호출을 살펴봅니다. MDN 문서의 예

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

가져오기

가져오기 요청은 다음과 같습니다.

fetch('./api/some.json')
  .then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

fetch() 요청은 XHR과 동일한 작업을 실행하려면 한 번만 호출하면 됩니다. 예로 들 수 있습니다 응답을 처리하기 위해 먼저 응답 상태가 응답을 JSON으로 파싱합니다 fetch() 요청에 대한 응답은 다음과 같습니다. Stream 개체입니다. 즉, json() 메서드를 호출하면 프로미스가 반환됩니다. 스트림은 비동기식으로 실행됩니다.

응답 메타데이터

이전 예에서는 Response 객체를 사용해야 하는 이유와 JSON으로 응답을 파싱합니다 다음은 필요할 수 있는 기타 메타데이터를 처리하는 방법입니다. 액세스할 수 있습니다.

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

응답 유형

가져오기 요청을 하면 응답에 response.type이 제공됩니다. 'basic' 중 'cors' 또는 'opaque' 이러한 types은 리소스의 출처를 보여 주며 이를 사용하여 다음을 수행할 수 있습니다. 응답 객체의 처리 방법을 결정합니다.

브라우저가 동일한 출처의 리소스를 요청하면 응답에 응답에서 볼 수 있는 항목에 관한 제한이 있는 basic 유형입니다.

다른 출처의 리소스에 대해 요청이 이루어지고 해당 출처가 COR 헤더를 사용한다면 유형은 cors입니다. cors 응답은 basic 응답과 비슷하지만 사용자가 확인할 수 있는 헤더를 제한합니다. 볼 수 있음: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma

CORS를 반환하지 않는 다른 출처에서 opaque 응답이 수신됨 있습니다. 답변이 불분명할 경우 반환된 데이터를 읽거나 요청 상태를 봅니다. 즉, 요청의 성공 여부입니다.

특정 요청 유형만 사용하도록 가져오기 요청 모드를 정의할 수 있습니다. 해결할 수 있습니다. 설정할 수 있는 모드는 다음과 같습니다.

  • same-origin는 동일한 출처의 저작물 요청에 대해서만 성공합니다. 다른 모든 요청을 거부합니다.
  • cors를 사용하면 동일한 출처 및 출처가 동일한 다른 출처의 저작물에 대한 요청을 적절한 COR 헤더를 반환합니다.
  • cors-with-forced-preflight는 프리플라이트를 수행합니다. 확인 하세요.
  • no-cors는 CORS가 없는 다른 출처에 요청을 수행하기 위한 것입니다. 사용하여 opaque 응답을 얻지만 명시된 바와 같이 지정할 수 있습니다.

모드를 정의하려면 옵션 객체를 fetch를 요청하고 해당 객체에서 모드를 정의합니다.

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

프로미스 체이닝

프라미스의 큰 기능 중 하나는 이를 서로 연결할 수 있다는 것입니다. 대상 fetch(): 가져오기 요청 간에 로직을 공유할 수 있습니다.

JSON API로 작업하는 경우 상태를 확인하고 각 응답의 JSON입니다. 상태와 상태를 정의하여 코드를 단순화할 수 있습니다. 프로미스를 반환하는 별도의 함수에서 JSON 파싱 및 가져오기 사용 최종 데이터와 오류 사례만 처리하도록 요청을 보냅니다.

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

이 예에서는 status 함수를 정의합니다. 이 함수는 response.status 및 는 다음과 같이 해결된 프로미스를 반환합니다. Promise.resolve()님, 거부된 프라미스로 Promise.reject() 이는 fetch() 체인에서 호출되는 첫 번째 메서드입니다.

프로미스가 해결되면 스크립트는 json() 메서드를 호출합니다. response.json() 호출에서 두 번째 프로미스를 반환하고 파싱된 JSON을 포함하는 객체를 반환합니다. 파싱에 실패하면 프로미스가 catch 문이 실행됩니다.

이 구조를 사용하면 모든 가져오기 요청에서 로직을 공유하여 유지, 읽기, 테스트하기가 더 쉬운 코드를 만드는 데 도움이 됩니다

POST 요청

웹 앱이 POST 메서드로 API를 호출하고 요청 본문에서 이 매개변수를 사용할 수 있습니다. 이렇게 하려면 method 및 body를 설정합니다. 매개변수를 fetch() 옵션에서 사용하세요.

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

가져오기 요청과 함께 사용자 인증 정보 전송

쿠키와 같은 사용자 인증 정보로 가져오기 요청을 하려면 요청의 credentials 값을 "include"로 변경합니다.

fetch(url, {
    credentials: 'include'
})