Fetch를 사용하여 http 요청 만들기

이번에는 Fetch를 사용하여 http 요청을 하는 방법에 대한 몇 가지 참고를 소개하겠습니다.

전통적인 Ajax는 XMLHttpRequest(XHR)를 사용하여 데이터를 얻기 위한 요청을 보내고 분리 원칙을 고려하지 않습니다. Fetch API는 Promise를 기반으로 설계되었으며 XHR 문제를 해결하도록 설계되었습니다.

XMLHttpRequest는 매우 혼란스러운 구성 및 호출 방법을 포함하는 잘못 설계된 API입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){    console.log(xhr.response);
}
xhr.onerror = function(){    console.log('xhr error');
}
xhr.send();

json 데이터 제출

fetch(url).then(function(response){    return response.json();
}).then(function(data){    console.log(data);
}).catch(function(e){    console.log('error' + e);
});

fetch 기능

간단한 구문, 더 많은

의미

표준 Promise 구현 기반, async/await 지원

동형 편의성, isomorphic-fetch 사용

fetch 호환성

서버 찾아보기 호환성

fetch의 기본 지원은 높지 않지만 일부 폴리필을 사용할 수 있습니다.

IE8은 es3 구문이며 es5 폴리필을 도입해야 합니다: es5-shim

Promise 구문 지원: es6-promise

fetch의 폴리필: fetch-polyfill

jsonp를 사용하려면 fetch-jsonp

Open babel In도 도입해야 합니다. 런타임 모드에서는 async/await

fetch

FAQ

를 사용할 수 있습니다. 가져오기 요청에는 기본적으로 쿠키가 없으므로 fetch(url,{credentials: '

include

'});

서버가 반환되도록 설정해야 합니다. 400, 500 오류 코드 거부되지 않으며 네트워크 오류로 인해 요청을 완료할 수 없는 경우에만 거부됩니다.

Summary

fetch API는 단순해 보이지만 js 구문.

기본적인 문제를 해결하기 위해 다양한 라이브러리가 프로젝트에 도입되는 경우가 많기 때문에 시간이 지나면서 표준과의 분리감이 커지게 됩니다. 앞으로는 기본 API의 변경 사항과 기본 구현에 더 많은 관심을 기울여야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

React.js의 CSS 사용법

JS의 async/await

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