在前端开发中，我们经常需要与后端进行数据交互，获取返回的数据并进行展示。Promise 和 fetch 是现代 JavaScript 中常用的异步编程方式，能够帮助我们更加方便、简洁地处理数据请求，并且具有解耦、可维护性和可读性好的优势。
在本文中，我们将介绍 Promise 和 fetch 的使用技巧，包括 Promise 的基本用法、Promise 的链式调用、Promise 的错误处理以及 fetch 的使用方法和实例。
Promise 的基本用法
Promise 可以看作是一种抽象的容器，它可以异步地执行任务并返回结果。Promise 的基本语法如下：
--- ----------------- ------- -- -
-- ------
-- -------- -
--------------
- ---- -
-------------
-
------------ -- -
-- ---------
------------- -- -
-- ---------
---在上面的代码中，我们使用 new Promise() 创建一个 Promise 对象，接收一个回调函数作为参数。这个回调函数会在 Promise 对象被创建时立即执行，其中的异步任务会开始执行，Promise 对象会在异步任务完成时返回一个操作结果或者一个错误信息。
回调函数中的参数 resolve 和 reject 可以将异步任务的结果或错误信息返回给 Promise 对象。当异步任务成功时，我们可以调用 resolve() 方法来返回操作结果。当异步任务失败时，我们可以调用 reject() 方法来返回错误信息。
Promise 会返回一个新的 Promise 对象，我们可以对这个对象进行 then() 和 catch() 方法的链式调用。当异步任务成功时，会调用 then() 方法，并将操作结果作为参数传给它。当异步任务失败时，会调用 catch() 方法，并将错误信息作为参数传给它。
Promise 的链式调用
Promise 的链式调用可以让我们更加便捷地处理异步任务，避免回调地狱的问题。我们可以将一系列的异步任务串联起来，形成一个 Promise 链，每个任务都会在上一个任务完成后执行。
Promise 的链式调用的基本语法如下：
--- ----------------- ------- -- -
-- ---- -
-- ----- - --- -
------------ ---
- ---- -
----------- ---
-
------------ - -- -
-- ---- -
-- ----- - --- -
------ ---- --
- ---- -
----- --- ---------- ---
-
------------ - -- -
-- ---- -
-- ----- - --- -
------ ---- --
- ---- -
----- --- ---------- ---
-
------------- -- -
-- ------
---在上面的代码中，我们使用了 then() 方法将一个异步任务的操作结果传递给下一个异步任务。如果后续的异步任务执行成功，我们可以通过调用 resolve() 方法返回操作结果。如果后续的异步任务执行失败，我们可以通过抛出一个 Error 对象来返回一个错误信息。
我们可以通过不断添加 then() 方法来形成一个 Promise 链，每一步都可以处理上一步异步任务返回的结果。当链中的任意一个异步任务抛出错误时，就会跳转到 catch() 方法，处理错误信息。
Promise 的错误处理
错误处理是 Promise 中非常重要的一部分，我们需要及时捕获和处理错误信息，防止程序直接崩溃。Promise 提供了一种方便的错误处理方法，即使用 catch() 方法捕获错误信息并处理。
我们可以在 Promise 对象的最后添加一个 catch() 方法，用于捕获整个 Promise 链中的任何错误信息。当 Promise 链中的任何一个异步任务抛出错误时，会直接跳转到 catch() 方法中，并处理错误信息。
下面是一个 Promise 链中的错误处理示例：
--- ----------------- ------- -- -
-- ---- -
-- ----- - --- -
------------ ---
- ---- -
----------- ---
-
------------ - -- -
-- ---- -
-- ----- - --- -
------ ---- --
- ---- -
----- --- ---------- ---
-
------------ - -- -
-- ---- -
-- ----- - --- -
------ ---- --
- ---- -
----- --- ---------- ---
-
------------- -- -
-- ------
---我们可以在 catch() 方法中进行错误信息处理，例如打印错误信息，或者展示一个错误提示框等。
fetch 的使用方法和实例
fetch 是一种基于 Promise 的异步请求方式，它是原生的 Web API，可以在现代浏览器中使用。fetch 可以发送 GET、POST、PUT、DELETE 等类型的请求，并返回结果。
fetch 的基本语法如下：
---------- ---------------------- -- - -- ------ -------------- -- - -- ------ ---
我们可以通过调用 fetch() 方法发送请求，它需要传递两个参数。第一个参数是请求的 URL 地址，第二个参数是一个配置对象，可以配置请求的方法、请求头、请求体等。
当请求成功时，fetch() 方法会返回一个 Response 对象，我们可以在 then() 方法中获取响应结果并进行处理；当请求失败时，fetch() 方法会直接跳转到 catch() 方法中，我们可以在其中获取错误信息并进行处理。
下面是一个 GET 请求的示例：
--------------------------------------------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
在上面的代码中，我们通过调用 fetch() 方法发送了一个 GET 请求，请求的 URL 是 https://api.github.com/users/octocat。当请求成功时，`then()` 方法中的回调函数会将响应结果转换为 JSON 格式，并将其打印到控制台上；当请求失败时，catch() 方法中的回调函数会将错误信息打印到控制台上。
fetch 还支持 POST 请求和其他请求方法，可以通过配置对象来设置请求的方式、请求头、请求体等。
下面是一个 POST 请求的示例：
------------------------------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- --------- --------- -- ---------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
在上面的代码中，我们通过调用 fetch() 方法发送了一个 POST 请求，请求的 URL 是 https://api.github.com/users，请求的方式是 POST，请求头中设置了 Content-Type 为 application/json，请求体中传递了一个 JSON 数据对象。当请求成功时，then() 方法中的回调函数会将响应结果转换为 JSON 格式，并将其打印到控制台上；当请求失败时，catch() 方法中的回调函数会将错误信息打印到控制台上。
总结
Promise 和 fetch 是现代 JavaScript 中常用的异步编程方式，可以帮助我们更加方便、简洁地处理数据请求，并具有解耦、可维护性和可读性好的优势。在本文中，我们介绍了 Promise 的基本用法、Promise 的链式调用、Promise 的错误处理以及 fetch 的使用方法和实例，希望对你理解和使用 Promise 和 fetch 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64770cce968c7c53b039dbb9