>웹 프론트엔드 >프런트엔드 Q&A >es6에서 fetch의 사용법은 무엇입니까?

es6에서 fetch의 사용법은 무엇입니까?

WBOY
WBOY원래의
2022-05-06 18:10:023087검색

es6에서 fetch는 원격 리소스에 대한 요청을 시작하는 데 사용되며 네트워크를 통해 비동기적으로 리소스를 가져오는 메서드를 제공합니다. 이 메서드는 BOM의 창 개체에 정의되며 "fetch(url, 구성 객체).then(함수(응답){})".

es6에서 fetch의 사용법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 fetch의 사용법은 무엇인가요?

fetch의 기본 구문

fetch(url,init).then(function(response) { } )

es6 fetch를 사용하는 방법 JavaScript의 매개변수 설명

fetch

  • fetch는 두 개의 매개변수를 받습니다. 첫 번째는 주소이며 필수입니다. , 두 번째 두 개는 구성 개체에 대한 선택 사항입니다.

  • 매개변수가 없는 간단한 가져오기 요청인 경우 두 번째 매개변수가 필요하지 않습니다(기본값은 가져오기 요청). 물론 이 가져오기에 대한 몇 가지 지침을 추가할 수도 있습니다

  • 두 번째 매개변수 요청 유형, 전송 데이터, 헤더, 모드 등이 포함되어 있습니다.

  • fetch 메서드도 Promise 개체를 반환합니다.

  • 다음을 가져오려면 두 개가 필요합니다. 백그라운드에서 반환된 데이터를 처리하고, 첫 번째 매개변수에서는 result.text()를 반환하거나, result.json()을 반환하고, 두 번째 매개변수에서는 실제로 반환된 특정 값을 가져와서 이에 대한 논리적 처리를 수행할 수 있습니다.

  • 요청이 실패했는지 확인하려면 먼저 요청 데이터 개체가 포함되어 있는지 확인하세요.

Fetch API는 요청 및 응답과 같은 HTTP 파이프라인의 일부에 액세스하고 조작하기 위한 JavaScript 인터페이스 를 제공합니다. 또한 네트워크 전체에서 비동기적으로 리소스를 얻는 간단하고 합리적인 방법을 제공하는 전역 fetch() 메서드도 제공합니다.

이 기능은 이전에 XMLHttpRequest를 사용하여 구현되었습니다. Fetch는 서비스 워커와 같은 다른 기술에서 쉽게 사용할 수 있는 더 나은 대안을 제공합니다. 또한 Fetch는 CORS 및 HTTP 확장과 같은 다른 HTTP 관련 개념을 정의할 수 있는 단일 논리적 위치를 제공합니다.

Fetch API는 BOM의 창 개체에 정의된 fetch() 메서드를 제공하여 이를 사용하여 원격 리소스에 대한 요청을 시작할 수 있습니다. 이 메소드는 Promise 객체를 반환하므로 요청의 반환 결과를 검색할 수 있습니다.

fetch는 도메인 간 CORS만 지원하고 JSONP 교차는 지원하지 않습니다

<script>
    //fetch发送数据
    //支持CORS跨域,没有办法接受jsonp数据
    function getData() {
        //支持 cors跨域url地址&#39;http://api.yytianqi.com/air?city=CH010100&key=2c5br4sgmguremgg&#39;
        //https://api.douban.com/v2/book/1220562?callback=func
       return fetch(&#39;http://localhost:3001/getdata&#39;)
            .then(function (response) {
                console.log(response);
                //promise对象返回
                return response.json();
            })
    }
    getData().then(function (data) {
        console.log(data);
    })
</script>

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

위 내용은 es6에서 fetch의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.