fetch函数的用法

fetch函数的用法

的有关信息介绍如下：

Fetch 函数用法详解

在现代Web开发中，fetch函数是用于发起网络请求的一种强大且灵活的方法。它返回一个Promise对象，使得处理异步HTTP请求变得更加简洁和直观。以下是关于fetch函数的详细用法介绍：

基本语法

fetch(url, options) .then(response => { // 处理响应数据 if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); // 或者其他解析方法如 .text() 或 .blob() }) .then(data => { // 使用返回的数据 console.log(data); }) .catch(error => { // 捕获并处理错误 console.error('There has been a problem with your fetch operation:', error); });

参数说明

1. url (字符串): 要访问的资源URL。
2. options (可选对象): 包含配置信息的对象，用于定制请求。常见选项包括:
   • method: 请求使用的HTTP方法（如GET、POST）。
   • headers: 一个Headers对象或一个包含键值对的对象，表示请求的头部信息。
   • body: 一个Blob、BufferSource、FormData、URLSearchParams或ReadableStream对象，表示要发送到服务器的数据。
   • redirect: 指定如何处理重定向。可以是'follow'（默认）、'error'或'manual'。
   • signal: 一个AbortSignal对象，允许你中止请求。

常见用法示例

GET 请求

fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

POST 请求

const data = { username: 'example', password: 'password123' }; fetch('https://api.example.com/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(result => console.log(result)) .catch(error => console.error('Error:', error));

设置自定义Header

fetch('https://api.example.com/protected', { method: 'GET', headers: { 'Authorization': 'Bearer YOUR_ACCESS_TOKEN', 'Custom-Header': 'CustomHeaderValue' } }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

中止请求

const controller = new AbortController(); const signal = controller.signal; fetch('https://api.example.com/long-running-task', { signal }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Error:', error); } }); // 在某个时刻中止请求 controller.abort();

错误处理

fetch本身不会抛出错误，而是会将错误封装在返回的Promise对象中。因此，你需要使用.catch()方法来捕获和处理这些错误。常见的错误类型包括网络问题、无效的URL以及服务器返回的HTTP状态码非2xx等。

通过理解和运用上述内容，你可以有效地利用fetch函数来执行各种网络请求，从而构建更加动态和交互性强的Web应用。