This time I will bring you the precautions on using Fetch to make http requests. The following is a practical case. Let’s take a look.
Traditional Ajax uses XMLHttpRequest (XHR) to send requests to obtain data, without paying attention to the principle of separation. The Fetch API is designed based on Promise and is designed to solve XHR problems.
XMLHttpRequest is a poorly designed API with very confusing configuration and calling methods.
Use XHR to send a json request:
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();
After using fetch to make the request:
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); });
es6 writing method:
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
Process text/html response:
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
Get header information:
fetch(url).then((response)=>{ console.log(response.status); console.log(response.statusText); console.log(response.headers.get('Content-Type')); console.log(response.headers.get('Date')); return response.json(); }).then(data=>console.log(data)) .catch(e=>console.log('error' + e);
Set header information
fetch(url,{ headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
Submit form
fetch(url,{ method: 'post', body: new FormData(document.getElementById('form')) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
Submit json data
fetch(url,{ method: 'post', body: JSON.stringify({ username: document.getElementById('username').value, password: document.getElementById('password').value }) }).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e);
fetch features
Simple syntax, more semantic
Based on standard Promise implementation, supports async/await
Convenient isomorphism, compatible with isomorphic-fetch
fetch Performance
Browser compatibility
fetch’s native support is not high, but some polyfills can be used.
IE8 is es3 syntax and needs to introduce es5 polyfill: es5-shim
Support promise syntax: es6-promise
fetch polyfill: fetch-polyfill
To use jsonp, you also need to introduce: fetch-jsonp
Enable babel's runtime mode, you can use async/await
fetchFAQ
fetch The request does not include cookies by default. You need to set fetch(url,{credentials: 'include'});
The server will not reject if it returns 400 or 500 error codes. Only network error requests will not be rejected. It will be rejected only when it is completed;
Summary
The fetch API seems simple, but it is an improvement brought about by the continuous enhancement and improvement of js syntax.
Since various libraries are generally introduced in projects to solve underlying problems, they do not pay much attention to the addition and expansion of basic APIs. Over time, they will develop a sense of separation from standards. In the future, we should pay more attention to the changes and basic implementation of the underlying API.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
The above is the detailed content of Using Fetch to make http requests. For more information, please follow other related articles on the PHP Chinese website!