在 Web 前端开发过程中，我们经常需要发送网络请求来获取数据。Ajax 是一个比较传统的方式，但其要求写大量的回调函数嵌套，导致代码难以维护与协调。为了解决这种问题，ES6 引入了 Promise 和 Fetch 两个新的 API，它们分别提供了更好的异步编程解决方案和 HTTP 请求的封装。本文将会介绍 Promise 和 Fetch 的基本概念和使用场景，并比较它们之间的异同点。
Promise 的基本概念和使用场景
Promise 是 ES6 引入的全新 API，它提供了更好的异步编程解决方案。Promise 对象代表异步操作的最终成功或失败的结果，其包含以下 3 个状态：
pending（未完成）
初始状态，即操作没有完成。
fulfilled（已完成）
意味着异步操作完成，并且结果已经返回。通常将此状态下的结果称为
value。rejected（已失败）
意味着异步操作失败，并返回失败的具体原因。通常称此状态下的结果为
reason。
使用 Promise 可以避免层层回调嵌套，而是在未完成的异步操作完成之后，再进行下一步操作。下面是一个使用 Promise 的示例代码，其基本流程如下：
创建 Promise 实例，执行异步操作。
使用
resolve或reject修改 Promise 的状态，并设置相应的返回值。将 Promise 实例作为返回值传递给下一个函数。
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------------------------------------ - ------- - --- - - --
-------------- -- -----------------------
------------ -- ---------------
---
-
-----------
---------- -- ------------------ -- ------
------------ -- --------------------- -- --------上述代码中，fetchData 函数返回一个 Promise 对象，并在异步操作完成时对其进行状态修改。在调用 fetchData 函数时，then 方法中的回调函数将会在 Promise 对象的值成功返回时被执行。而 catch 方法中的回调函数将会在 Promise 对象中发生错误、被拒绝（rejected）时被执行。
使用 Promise 的场景主要包括：
延迟操作，例如加载图片、文件流等。
执行 AJAX 请求并返回 JSON 格式数据。
使用浏览器提供的 Web API，例如获取用户位置信息或页面滚动事件等。
Fetch 的基本概念和使用场景
Fetch 是 ES6 引入的另一个 API，它提供了一种更现代化的方式来进行 HTTP 请求，具有以下优点：
简单易用：使用简单的 API 指令即可执行文件下载和上传等操作。
基于 Promise：fetch 方法返回一个 Promise 对象，方便异步编程处理。
内置类型转换：默认情况下，fetch 将根据传入的 URL 根据惯例预测并设置接收数据的文件类型。
安全、隐私保护：fetch 发起的请求默认采用跨域 Cookies，提高了数据的安全性和隐私保护。
使用 Promise 可以避免层层回调嵌套，而是在未完成的异步操作完成之后，再进行下一步操作。下面是一个使用 Promise 的示例代码，其基本流程如下：
调用
fetch方法，发送 HTTP 请求。在
.then()中处理请求的响应（response）。通过
response.text()或response.json()等方法获取相应的数据。
fetch('https://api.example.com/users?id=1')
.then(response => response.json())
.then(data => console.log('data: ', data))
.catch(error => console.error('error:', error));上述代码中，调用 fetch 方法发送 HTTP 请求，并在 then 方法中处理返回的响应。response.json() 方法解析响应数据，并返回一个 Promise 对象。然后在后面的 then() 方法中访问JSON格式的数据。
使用 Fetch 的场景主要包括：
使用第三方 API 或从 Web 服务器中请求数据。
使用服务端渲染或使用客户端渲染以动态方式构建页面元素。
使用浏览器提供的 Web API 操作。
比较和总结
Promise 和 Fetch API 都是用于处理异步编程的 API，并且都是 ES6 中引入的。它们的主要区别在于：
- 返回结果类型
Promise 是一个表示异步操作的结果，它提供了一种处理异步操作更好的方式。返回的结果可能是单一值或对象。
Fetch 返回包含响应的 Promise 对象，通常包含 JSON 格式数据，文件流或二进制文件。为了获取异步操作的结果，需要使用
response对象。
- 数据获取方式
在 Promise 中，您必须使用一些库（如 axios 或 jQuery）等，从可靠、可调用的接口中发送请求来获得数据。
在使用 Fetch 时，不需要附带外部库。您可以从内置函数中调用它，并直接获取请求：
- 错误处理
Promise 的优点在于可以轻松地捕获和处理错误。
自动发送和处理错误是 Fetch 的一个巨大优点。对于访问外部 API 并自动解析 JSON 等情况，这一点尤其有用。如果出现网络错误，fetch 会返回一个 reject() 参数，而不是 Promise 对象。
总的来说，Promise 和 Fetch 可以完成相同的任务，并且两者都具有一些特别优点，使它们适用于不同的场景。在使用其中任何一个方法时，需要考虑到以下几个因素：
处理停留时间。
返回 JSON 或文件流类型数据。
支持跨域Cookies或其他安全特性。
错误处理和控制流。
结论
Promise 和 Fetch 两个 API 均是 Web 开发中不可或缺的组件。在使用它们时，需要清楚知道它们的使用场景和区别，以确保能够更好地使用异步编程解决方案并处理 HTTP 请求。此外，熟练应用异步编程和 HTTP 请求方面的知识能够为前端开发者提高工作效率并为团队提供可维护、可扩展的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482d97f48841e9894235793