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