Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to use Fetch, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use Fetch. Let's take a look at it.

Fetch, which claims to be an alternative to AJAX, appears in ES6 and uses the promise object in ES6. Fetch is designed based on promise. The code structure of Fetch is much simpler than that of ajax, and the parameters are a bit like jQuery ajax. However, it is important to keep in mind that fetch is not a further encapsulation of ajax, but a native js that does not use a XMLHttpRequest object.

Ajax

Use steps

1. Create a XmlHttpRequest object

two。 Call the open method to set basic request information

3. Set the data to be sent and send the request

4. Register the callback function of listening

5. Get the return value and update the page

/ / 1. Create the Ajax object if (window.XMLHttpRequest) {var oAjax=new XMLHttpRequest ();} else {var oAjax=new ActiveXObject ("Microsoft.XMLHTTP");} / / 2. Connect to the server (open the connection to the server) oAjax.open ('GET', url, true); / / 3. Send oAjax.send (); / / 4. Receive oAjax.onreadystatechange=function () {if (oAjax.readyState==4) {if (oAjax.status==200) {/ / alert ('succeeded:' + oAjax.responseText); fnSucc (oAjax.responseText);} else {/ / alert ('failed'); if (fnFaild) {fnFaild () }}

Fetch

Characteristics

1. The first parameter is URL:

2. The second is an optional parameter that can control different configurations of init objects.

3. JavaScript Promises is used to process the result / callback:

Fetch (url) .then (response = > response.json ()) .then (data = > console.log (data)) .catch (e = > console.log ("Oops, error", e))

Even cooler, you can create a new request object through the Request constructor function, and you can create a new object based on the existing object. The new request is no different from the old one, but you can use it for different scenarios by adjusting the configuration object slightly. For example:

Var req = new Request (URL, {method: 'GET', cache:' reload'}); fetch (req) .then (function (response) {return response.json ();}) .then (function (json) {insertPhotos (json);})

In the above code, we specify that the method used for the request is GET, and that the result of the response is not cached. You can create a POST request based on the original GET request, which has the same request source. The code is as follows:

/ / create a new postReq object based on req object var postReq = new Request (req, {method: 'POST'})

Main differences between fetch and ajax

1. The promise returned by fetch () will not reject the error status of http, even if the response is a HTTP 404 or 500

2. By default, fetch will not accept or send cookies

This is the end of the article on "how to use Fetch". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use Fetch". If you want to learn more, you are welcome to follow the industry information channel.

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.