一文详解JavaScript中的fetch方法

前言

在现代的 Web 开发中，与服务器进行数据交互是一项常见且重要的任务。JavaScript 提供了多种方式来实现这一功能，其中 fetch 方法是一个强大且灵活的工具。本文将详细介绍 fetch 方法的各个方面，帮助你更好地理解和使用它。

什么是 fetch 方法

fetch 是 JavaScript 中用于发起网络请求的现代 API，它提供了一种更简洁、更强大的方式来处理网络通信。fetch 方法返回一个 Promise 对象，该 Promise 会在请求完成时被解决（resolved），并返回一个 Response 对象，开发者可以通过这个对象来获取服务器的响应数据。

基本语法

fetch 方法的基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

• url：必选参数，表示要请求的资源的 URL。
• options：可选参数，是一个包含请求配置信息的对象，例如请求方法（GET、POST 等）、请求头、请求体等。

简单的 GET 请求示例

以下是一个使用 fetch 方法发送简单 GET 请求的示例，用于从服务器获取 JSON 数据：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    // 检查响应状态是否为 200 - 299
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 将响应数据解析为 JSON 格式
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

代码解释

• 首先调用 fetch 方法发起一个 GET 请求到指定的 URL。
• then 方法中的回调函数接收一个 Response 对象，通过检查 response.ok 属性来判断请求是否成功。如果不成功，抛出一个错误。
• 接着使用 response.json() 方法将响应数据解析为 JSON 格式，该方法返回一个新的 Promise。
• 第二个 then 方法中的回调函数接收解析后的 JSON 数据并打印到控制台。
• 如果请求过程中出现错误，会被 catch 方法捕获并打印错误信息。

发送 POST 请求示例

下面是一个使用 fetch 方法发送 POST 请求的示例，用于向服务器发送 JSON 数据：

const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

代码解释

• 定义了一个包含要发送数据的对象 data。
• 在 fetch 方法的第二个参数 options 中指定请求方法为 POST，设置请求头 Content-Type 为 application/json，并使用 JSON.stringify 方法将数据对象转换为 JSON 字符串作为请求体。
• 后续处理与 GET 请求类似，检查响应状态、解析响应数据并处理可能的错误。

Response 对象的常用方法

Response 对象提供了多种方法来处理响应数据，以下是一些常用的方法：

• response.json()：将响应数据解析为 JSON 格式。
• response.text()：将响应数据解析为文本格式。
• response.blob()：将响应数据解析为二进制大对象（Blob）格式，常用于处理图片、音频等二进制数据。
• response.arrayBuffer()：将响应数据解析为 ArrayBuffer 格式，用于处理二进制数据。

例如，使用 response.text() 方法获取文本响应：

fetch('https://example.com/text.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(error => console.error('Fetch error:', error));

注意事项

浏览器兼容性

虽然 fetch 是现代 API，但在一些旧版本的浏览器中可能不被支持。可以使用 whatwg-fetch 等 polyfill 来解决兼容性问题。

CORS（跨域资源共享）

如果请求的资源位于不同的域名下，需要服务器端正确配置 CORS 头，否则请求会被浏览器阻止。

错误处理

fetch 方法只有在网络错误（如无法连接到服务器）时才会拒绝 Promise，对于 HTTP 错误（如 404、500 等），Promise 仍然会被解决，需要手动检查 response.ok 属性来处理 HTTP 错误。

附：取消fetch请求

• fetch()请求发送后，如果中途想要取消，需要使用AbortController对象

//创建一个AbortController实例
let controller = new AbortController();

fetch(url, {
  signal: controller.signal
});
//给controller.signal绑定监听事件，controller.signal的值改变则会触发abort事件
controller.signal.addEventListener('abort',
  () => console.log('abort!')
);
// controller.abort()方法用于发出取消信号。这时会触发abort事件，这个事件可以监听

controller.abort(); // 取消

// 可以通过controller.signal.aborted属性判断取消信号是否已经发出
console.log(controller.signal.aborted); // true

实例：

//创建实例
let controller = new AbortController();
//设置定时器
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('路径', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

总结

fetch 方法为 JavaScript 开发者提供了一种强大且灵活的方式来处理网络请求。通过使用 fetch，可以方便地发送 GET、POST 等各种类型的请求，并处理服务器的响应数据。在使用过程中，需要注意浏览器兼容性、CORS 问题和错误处理等方面，以确保应用的稳定性和可靠性。希望本文能帮助你更好地掌握 fetch 方法的使用。

到此这篇关于JavaScript中fetch方法的文章就介绍到这了,更多相关JS中fetch方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/339176hnx.htm