Fetch 和 Promise：让你的异步编程更清晰更轻松

2023-10-08 07:21:11

深入浅出：Fetch 和 Promise，异步编程的神兵利器

什么是 Fetch？开启异步编程之门

Fetch 是一个现代的浏览器 API，如同它的名字一样，它可以让你轻松地从服务器获取数据。与传统的 XMLHttpRequest (XHR) 相比，Fetch 更胜一筹，它不仅简单易用，而且功能更加强大。使用 Fetch，你可以轻松地发送各种类型的请求，如 GET、POST、PUT、DELETE 等，并获取服务器的响应。

Promise：掌控异步世界的钥匙

Promise 是 JavaScript 中用来处理异步操作的秘密武器。它让你可以耐心地等待异步操作完成，然后执行指定的回调函数。如此一来，你便可以避免嵌套回调函数的混乱局面，让你的代码更加清晰易懂。

Fetch 和 Promise 的完美结合：异步编程的黄金搭档

Fetch 和 Promise 强强联手，为你提供处理异步操作的最佳体验。你可以使用 Fetch 发送请求，然后使用 Promise 优雅地处理请求结果。当请求成功完成时，Promise 的 then 方法将出马，让你可以执行后续操作。

Promise 流程剖析：从成功到失败，尽在掌握

封装回调，妙笔生花： 将 ajax 的成功/失败回调巧妙地封装成一个 Promise 对象，同时判断其 resolve/reject 状态。
后续行动，决胜千里： 根据传来的状态，如果 resolve，则执行.then( res => {} // 实际在 Promise.prototype 上 )，进行后续的 ajax 请求；如果 reject，则执行.catch( err => {} )，处理错误。

代码示例：用 Fetch 和 Promise 获取服务器数据

fetch('https://example.com/api/data')
.then(response => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Error: ' + response.status);
  }
})
.then(data => {
  // 处理服务器返回的数据
})
.catch(error => {
  // 处理错误
});

在这段代码中，我们首先使用 Fetch 发送了一个 GET 请求到服务器。接下来，我们用 then 方法处理请求结果。如果请求成功（状态码为 200），我们将使用 response.json() 方法获取服务器返回的数据。然后，我们再次使用 then 方法处理获取到的数据。如果请求失败（状态码不是 200），我们将使用 catch 方法处理错误。

Fetch 和 Promise 的优势：解锁异步编程的无限可能

使用 Fetch 和 Promise，你将享受以下优势：