Fetch API 소개

키 포인트

약속 기반 구조로 인해 Fetch API는 네트워크 요청에 대해 XMLHTTPREQUEST를 점차적으로 대체하여 구문을보다 간결하게 만들고 콜백 지옥을 피합니다.

메소드는
• 객체에 정의됩니다. 즉, 필수 매개 변수, 즉 검색 할 리소스의 URL이 필요하며 요청의 응답을 검색하는 데 사용될 수있는 약속을 반환합니다.
• fetch API는 요청 메소드 및 헤더 변경을 포함하여 요청 객체를 fetch() 함수로 전달하여 수행 할 수있는 요청 객체를 명시 적으로 구성 할 수 있습니다. window Fetch API를 사용한 오류 처리에는 응답 상태 코드가 200 범위 내에 있으면 응답 오브젝트의
속성을 ​​확인하는 것이 포함됩니다. 네트워크 고장의 경우 블록을 사용할 수 있습니다.
• fetch() 이 기사는 새로운 Fetch API의 모양, 해결 문제 및 함수를 사용하여 웹 페이지 내에서 원격 데이터를 검색하는 가장 실용적인 방법을 소개합니다.
수년 동안 XMLHTTPREQUEST는 웹 개발자에게 신뢰할 수있는 조수였습니다. 직접 또는 백그라운드에서 사용하든 Xmlhttprequest는 Gmail에서 Facebook에 이르기까지 Ajax 및 새로운 대화식 경험을 지원합니다.
• 그러나 그러나 xmlhttprequest는 점차 Fetch API로 대체되고 있습니다. 둘 다 네트워크 요청을하는 데 사용될 수 있지만 Fetch API는 약속을 기반으로하므로 구문을 더 간결하게 만들고 콜백 지옥을 피하는 데 도움이됩니다. ok true 페치 api try...catch fetch api는 요청을 수행하는 데 사용할 수있는 메소드를 제공합니다. 이 메소드는 요청의 응답을 검색하는 데 사용할 수있는 약속을 반환합니다.

메소드에는 하나의 필요한 매개 변수, 즉 검색 할 리소스의 URL만이 있습니다. 매우 기본적인 예는 다음과 같습니다. REDDIT의 R/JavaScript에 대한 처음 5 개의 게시물이 나타납니다. fetch() 브라우저 콘솔에서 응답을 확인하면 여러 속성이있는 응답 객체가 표시됩니다.

요청은 성공한 것으로 보이지만 처음 5 개의 게시물은 어디에 있습니까? 알아 봅시다.

로드 JSON 우리는 사용자 인터페이스를 차단하고 요청이 완료되기를 기다릴 수 없습니다. 이것이

가 미래의 결과를 나타내는 약속을 반환하는 이유입니다. 위의 예에서는

메소드를 사용하여 서버의 응답을 기다리고 콘솔에 로그인합니다.

이제 요청이 완료된 후 해당 응답에서 JSON 페이로드를 추출하는 방법을 살펴 보겠습니다. 우리는 를 호출하여 요청을 시작합니다. 약속이 완료되면

메소드를 노출시키는 응답 객체를 반환합니다. 첫 번째

에서 우리는이 를 호출하여 응답 본문을 JSON으로 반환 할 수 있습니다. window그러나 그러나

메소드는 약속을 반환합니다. 즉, 콘솔에 JSON 응답을 기록하기 전에 다른 json를 연결해야합니다. then()

왜

약속을 반환합니까? HTTP는 브라우저가 서버로부터 응답을 수신하더라도 컨텐츠 블록을 클라이언트로 블록으로 스트리밍 할 수 있으므로 콘텐츠 본문이 아직 도착하지 않았을 수 있습니다! json() 비동기 ... 기다립니다

구문은 좋지만 2018 년 약속을 다루는 단순화 된 방법은 ES2017에서 도입 한 새로운 구문을 사용하는 것입니다. 를 사용한다는 것은 함수를 로 표시 한 다음 키워드를 사용하여 약속이 완료되고 일반적인 객체처럼 결과에 액세스 할 때까지 기다릴 수 있습니다. 비동기 기능은 모든 최신 브라우저 (IE 또는 Opera Mini 제외) 및 Node.js 7.6에서 지원됩니다. 다음은 위의 예입니다 (약간 확장) :

<.> 큰 변화는 없습니다. 우리는 비동기 함수 (서브 디렉토리의 이름을 전달한)를 만들었다는 사실 외에도 이제 호출 결과를 기다린 다음

를 사용하여 다시 JSON을 응답에서 검색합니다. .then() 이것은 기본 워크 플로이지만 원격 서비스와 관련된 것들이 항상 순조롭게 진행되는 것은 아닙니다. async...await 처리 오류 async...await 존재하지 않거나 승인이 필요한 서버를 요청한다고 가정합니다. async를 사용하여 404 응답과 같은 응용 프로그램 수준 오류는 정상 프로세스 내에서 처리해야합니다. 앞에서 언급했듯이 는 속성으로 응답 객체를 반환합니다. 가 await 인 경우 응답 상태 코드는 200 : 입니다.

서버 응답 코드의 의미는 API에 따라 다르며

를 확인하는 것은 일반적으로 충분하지 않습니다. 예를 들어, 일부 API는 API 키가 유효하지 않은 경우에도 200 응답을 반환합니다. API 문서를 읽으십시오! async...await 네트워크 실패를 처리하려면 블록을 사용하십시오 :

블록의 코드는 네트워크 오류가 발생할 때만 실행됩니다.

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

당신은 요청과 읽기 응답의 기본 사항을 배웠습니다. 이제 요청을 추가로 사용자 정의해 봅시다.

fetch() <<> 변경 요청 메소드 및 헤더 변경 await

위의 예를 보면 기존 xmlhttprequest 래퍼를 사용할 수없는 이유가 궁금 할 것입니다. 그 이유는 Fetch API가 단순한

방법 이상을 제공하기 때문입니다.

동일한 xmlhttprequest 인스턴스를 사용하여 요청을 수행하고 응답을 검색해야하지만 Fetch API를 사용하면 요청 객체를 명시 적으로 구성 할 수 있습니다.

예를 들어 의 경우 가 요청을 만드는 방법을 변경 해야하는 경우 (예 : 요청 메소드 구성) 요청 객체를 <🎜 🎜> 함수로 전달할 수 있습니다. 요청 생성자의 첫 번째 매개 변수는 요청 URL이고 두 번째 매개 변수는 요청을 구성하기위한 옵션 객체입니다.

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

여기서는 요청 메소드를 지정하고 응답을 절대 캐시하지 말라고 요청합니다.

요청 헤더 필드에 헤더 개체를 할당하여 요청 헤더를 변경할 수 있습니다. 다음은 "수락"헤더 만 사용하여 JSON 컨텐츠를 요청하는 방법입니다.

새로운 요청은 이전 요청에서 목적을 조정하기위한 요청을 만들 수 있습니다. 예를 들어, GET 요청에서 동일한 리소스로의 게시물 요청을 만들 수 있습니다. 예는 다음과 같습니다.

응답 헤더에도 액세스 할 수 있지만 읽기 전용 값이라는 것을 기억하십시오.

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

요청 및 응답은 HTTP 사양을 면밀히 따라야합니다. 더 많은 학습에 관심이 있으시면 MDN의 Fetch API 페이지에서 모든 관련 정보를 읽을 수 있습니다.

<<> 모든 컨텐츠를 통합

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

이 기사를 끝내려면 여기에 특정 하위 디렉토리의 첫 5 개의 게시물을 얻고 목록에 세부 정보를 표시하는 방법을 보여주는 실행 가능한 예입니다.

async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL);
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');

(CodePen 예제는 여기에 삽입되어야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다)

. 다음 단계

이 기사에서는 새로운 Fetch API의 외관과 문제가 해결되는 문제에 대해 배웠습니다. 메소드를 사용하여 원격 데이터를 검색하는 방법, 오류 처리 방법 및 요청 메소드를 제어하여 요청 메소드를 작성하는 방법 및 헤더를 보여주는 방법을 보여주었습니다. 아래 차트에 표시된대로

에 대한 지원이 좋습니다. 이전 브라우저를 지원 해야하는 경우 PolyFill을 사용할 수 있습니다.

(Fetch를 사용할 수 있습니까? 차트를 여기에 삽입해야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다) . 따라서 다음에 jQuery와 같은 라이브러리를 사용하여 Ajax 요청을 할 때는 기본 브라우저 메소드를 사용할 수 있는지 고려해야합니다.

Fetch API (FAQ)에 대한 질문이 자주 묻습니다 (FAQ 부품은 여기에 포함되어야하지만 공간 제한으로 인해 생략합니다. 이전 출력에 따라 FAQ 부품을 직접 보충 할 수 있습니다.)

위 내용은 Fetch API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!