Using Fetch to make http requests

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:

CSS usage in React.js

async/await in JS

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!