Shulou(Shulou.com)05/31 Report--

This article mainly explains how to use fetch in es6. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to use fetch in es6"!

In es6, fetch is used to initiate a request for remote resources and is a method that provides asynchronous cross-network resource acquisition; this method is defined in the window object of the BOM and returns a Promise object with the syntax "fetch(url, configuration object).then(function(response){})."

Operating environment for this tutorial: Windows 10, ECMAScript version 6.0, Dell G3 PC.

What is the use of fetch in ES6?

Basic syntax of fetch

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

How to use ES6 Fetch? JavaScript

Fetch parameters

fetch takes two parameters, the first one is the address and required, and the second one is the optional configuration object.

If it is a simple parameterless get request, then you can do without the second parameter (default is get request), of course, you can also add some explanation to this fetch.

The second parameter contains the request type, send data, headers, mode, etc.

fetch method returns a promise object, we can only use then to get the return data,

We need two then to process the data returned in the background. In the first then, return result.text(), or return result.json (), and then in the second argument, we can really get the specific value returned and process it logically.

If you want to determine whether the request failed, then determine in the first then, which is the request data object.

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides a simple, sensible way to fetch resources asynchronously across networks.

This functionality was previously implemented using XMLHttpRequest. Fetch provides a better alternative that can easily be used by other technologies, such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts, such as CORS and HTTP extensions.

The Fetch API provides a fetch() method defined in the BOM window object that you can use to initiate requests for remote resources. This method returns a Promise object that allows you to retrieve the return result of the request.

fetch only supports cross-domain CORS not JSONP crossing

//fetch send data //Support CORS cross-domain, no way to accept jsonp data function getData() { //Supports cor cross-domain url address 'api.yytianqi.com/air? city=CH010100&key=2c5br4sgmguremgg' //https://api.douban.com/v2/book/1220562? callback=func return fetch('http://localhost:3001/getdata') .then(function (response) { console.log(response); //promise object returned return response.json(); }) } getData().then(function (data) { console.log(data); }) At this point, I believe that everyone has a deeper understanding of "how to use fetch in es6". You may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.