一文详解JavaScript中的fetch方法

前言

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

什么是 fetch 方法

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

基本语法

fetch 方法的基本语法如下：

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

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

简单的 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 android(!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 仍然www.chinasem.cn会被解决，需要手动检查&phpnbsp;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方法内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！