在前端开发中，我们经常需要向后端服务器发送请求获取数据，以完成页面渲染或交互操作。而 Ajax 请求则是前端向后端发送请求的主要方式之一。在 RxJS 中，我们可以使用 fromFetch 和 XMLHttpRequest 来进行 Ajax 请求。
什么是 fromFetch？
fromFetch 是 RxJS 中的一个操作符，用于从网络中获取数据。它可以接收一个 URL 字符串或一个 Request 对象作为参数，并返回一个 Observable 对象，用于订阅响应数据。
fromFetch 的使用方法如下所示：
------ - --------- - ---- ------------- ----- --- - ----------------------------------------------- ----- ------- - --------------- ------------------- ----- -------- -- ---------------------- ------ ----- -- --------------------- --------- -- -- ------------------------ ---
在上面的代码中，我们使用 fromFetch 方法创建了一个 Observable 对象，用于订阅从 https://jsonplaceholder.typicode.com/posts/1 返回的响应数据。在 subscribe 方法中，我们定义了三个回调函数，分别用于处理 next、error 和 complete 事件。
什么是 XMLHttpRequest？
XMLHttpRequest 是一种浏览器内置的对象，用于向服务器发送请求和接收响应。它可以发送各种类型的请求，如 GET、POST、PUT、DELETE 等，并支持异步请求和同步请求。
XMLHttpRequest 的使用方法如下所示：
----- --- - --- -----------------
--------------- ----------------------------------------------- ------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-----------在上面的代码中，我们创建了一个 XMLHttpRequest 对象，并使用 open 方法打开一个 GET 请求。在 onreadystatechange 回调函数中，我们判断了请求状态和响应状态码，并使用 responseText 属性获取响应数据。
fromFetch 和 XMLHttpRequest 的对比
虽然 fromFetch 和 XMLHttpRequest 都可以用于发送 Ajax 请求，但它们之间还是有一些区别的。
语法差异
从语法上来说，fromFetch 的使用比 XMLHttpRequest 更加简单明了。我们只需要调用 fromFetch 方法并传入 URL 字符串或 Request 对象，即可创建一个 Observable 对象，用于订阅响应数据。而 XMLHttpRequest 则需要手动创建对象、设置请求参数、绑定事件监听器等等。
功能差异
从功能上来说，fromFetch 支持更多的请求方式，并且可以使用 RxJS 提供的丰富的操作符和方法来处理响应数据。而 XMLHttpRequest 则只能发送常规的 GET、POST、PUT、DELETE 等请求，并且需要手动处理响应数据。
兼容性差异
从兼容性上来说，XMLHttpRequest 的兼容性更好一些，它可以在大多数现代浏览器中运行。而 fromFetch 则是 RxJS 中的新操作符，需要在较新版本的浏览器或 Node.js 环境中使用。
总结
在 RxJS 中，我们可以使用 fromFetch 和 XMLHttpRequest 来发送 Ajax 请求。fromFetch 的语法更加简单明了，而且支持更多的请求方式和操作符。而 XMLHttpRequest 则更加灵活，可以手动处理响应数据，并且在兼容性上更加优秀。在实际开发中，我们可以根据具体需求选择适合的方式来发送 Ajax 请求。
示例代码：
------ - --------- - ---- -------------
-- -- --------- -- --- --
----- --- - -----------------------------------------------
----- ------- - ---------------
-------------------
----- -------- -- ----------------------
------ ----- -- ---------------------
--------- -- -- ------------------------
---
-- -- -------------- -- --- --
----- --- - --- -----------------
--------------- ----------------------------------------------- ------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
-----------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660b64dad10417a222b88f1d