ES7中添加了一种新的网络请求api: fetch。在之前的版本中，我们使用XMLHttpRequest（XHR）作为网络请求的主要方法。本文将比较这两种方法的异同点。
相同点
fetch和XHR都是用于发送HTTP请求的API。它们都可以发送GET、POST、PUT等请求类型，并可以设置请求头、响应类型以及超时时间等。
不同点
语法
fetch的语法比XHR更加简洁。XHR的语法需要创建一个XMLHttpRequest对象并设置请求头等参数，然后执行open、send等方法。而fetch只需要一个URL参数即可。
XHR语法示例：
const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); xhr.setRequestHeader('Content-type', 'application/json'); xhr.onload = function() { console.log(xhr.response); }; xhr.send();
fetch语法示例：
fetch('/api/data', { method: 'GET', headers: { 'Content-type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data));
返回值
XHR返回一个XMLHttpRequest对象，而Fetch返回一个Promise对象。Fetch使用Promise实现异步请求和响应，这意味着更易于编写异步代码。
XHR的返回值示例：
const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); const result = xhr.send(); console.log(result); // XMLHttpRequest { ... }
Fetch的返回值示例：
const result = fetch('/api/data', { method: 'GET', }); console.log(result); // Promise { <pending> }
错误处理
XHR的错误处理需要在onerror、onabort和ontimeout等方法中处理。而Fetch则是通过rejected的承诺来处理。
XHR错误处理示例：
-- -------------------- ---- ------- ----- --- - --- ----------------- --------------- ------------- ----------- - ---------- - -------------------- -- ----------- - ---------- - -------------------- -- ------------- - ---------- - -------------------- -- -----------展开代码
Fetch错误处理示例：
-- -------------------- ---- ------- ------------------ - ------- ------ -- -------------- -- - -- -------------- - ----- --- --------------------------- - ------ ---------------- -- ------------ -- ----------------------------展开代码
跨域请求
XHR在服务端对CORS资源请求时需要设置响应头Access-Control-Allow-Origin，否则将会被阻止请求，而Fetch则通过一个全局的fetch（）方法来处理CORS跨域请求。
这里以CORS资源做例子，要求服务端设置Access-Control-Allow-Origin: * 响应头。
XHR跨域请求示例：
const xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('GET', 'http://api.mydomain.com/data'); xhr.setRequestHeader('Content-type', 'application/json'); xhr.onload = function() { console.log(xhr.response); }; xhr.send();
Fetch跨域请求示例：
-- -------------------- ---- ------- ------------------------------------- - ----- ------- ------------ ---------- -------- - --------------- ------------------ - -- -------------- -- ---------------- ---------- -- -------------------展开代码
总结
fetch和XHR都可以进行网络请求，但它们的语法、返回值和错误处理方法都有所不同。Fetch使用Promise实现异步请求和响应，但它需要额外的polyfill来支持旧的浏览器。在使用Fetch时需要注意CORS资源的请求方式。
在实际项目中，可以根据需求来选择使用fetch或XHR。如果需要更加方便的API和Promise支持，可以使用Fetch。如果需要较低的级别和更多的控制，可以使用XHR。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65455c1e7d4982a6ebf13615
