使用Fetch API 探索前后端数据交互

前言

在当今的 Web 开发中，前端与后端的数据交互是构建动态应用的核心。API 是连接不同软件应用的重要桥梁，允许开发者通过 HTTP 请求与服务器交互，高效调用API数据对于构建现代 Web 应用至关重要。传统的页面刷新方式已经无法满足用户对流畅体验的需求，而 Fetch API 的出现为 JavaScript 带来了全新的生命力。

一、Fetch API 概述

1.1 Fetch API 是什么❓

Fetch API 是现代浏览器提供的一个用于发起网络请求的接口，用于发起 HTTP 请求。它提供简洁的异步API，使开发者能够以更现代的方式与服务器交互。它是传统的 XMLHttpRequest 的替代品，提供了更简洁、更强大的功能。基于 Promise 实现，使异步操作更加直观。

相比于传统的 XMLHttpRequest 更加强大、灵活且易于使用。Fetch 基于 Promise 设计，使得异步请求的处理更加优雅。

特性	Fetch API	XMLHttpRequest
语法	基于 Promise，更简洁	回调函数，较复杂
请求/响应对象	标准化	非标准化
默认携带 Cookie	不携带	携带
超时控制	需要额外实现	原生支持
取消请求	使用 AbortController	原生支持
进度事件	有限支持	完整支持

1.2 Fetch 的基本语法

Fetch API 的基本用法是通过调用 fetch() 函数并传入一个 URL 作为参数来发起网络请求。该函数返回一个Promise对象，可以在其then()方法中处理请求成功的情况，在catch()方法中处理请求失败的情况。Fetch API 最基本的形式如下所示。

fetch(url, options)
	.then(response => response.json()) // 解析 JSON 数据
  .then(data => console.log(data))   // 处理数据
	.catch(error => console.error('出现错误:', error)); // 错误处理

上述代码示例展示了使用 Fetch API 发起一个请求，返回的 Promise 解析为响应对象，进而能访问响应体数据。处理响应体通常包含 JSON 数据，通过 .json() 方法解析。如果请求失败，fetch 返回的 promise 会拒绝，并将错误信息传给 catch 方法。

1.3 fetch 配置选项

fetch 接受第二个可选参数，一个可以控制不同配置的对象，常见属性如下表所示。

配置项	简要描述	常用值
method	请求的 HTTP 方法，默认方法为GET	GET、POST、PUT、PATCH、DELETE
headers	请求中 HTTP 标头
body	请求体。 请注意，使用 GET 和 HEAD 方法的请求不能有正文
mode	指定请求的模式。	cors：默认值，允许跨域请求 same-origin：只允许同源请求。 no-cors：不能添加跨域的复杂标头，相当于提交表单所能发出的请求
credentials	指定是否发送 Cookie	same-origin：默认值，同源请求时发送 Cookie，跨域请求时不发送 include：不管同源请求，还是跨域请求，一律发送 Cookie omit：一律不发送
cache	指定如何处理缓存	default：默认值，先在缓存里面寻找匹配的请求 no-store：直接请求远程服务器，并且不更新缓存 reload：直接请求远程服务器，并且更新缓存 no-cache： force-cache：缓存优先，只有不存在缓存的情况下，才请求远程服务器 only-if-cached：只检查缓存，如果缓存里面不存在，将返回504错误
redirect	如何处理 HTTP 重定向响应，默认设置为follow	follow、error、manual
referrer	包含请求的反向链接的字符串，默认为空字符串
referrerPolicy	指定用于请求的反向链接政策
signal	AbortSignal 对象实例，支持接口中止请求
priority	指定当前请求相对于其他同类请求的优先级， 默认设置为auto	high、low、auto

二、Fetch API 的基本使用

Fetch API 支持多种 HTTP 请求方法，如GET、POST、PUT、DELETE等。默认情况下，fetch() 函数会发送 GET 请求。如果需要发送其他类型的请求，可以在fetch() 函数的第二个参数中指定请求的配置对象。

2.1 发起 GET 请求

GET 请求是最常见的请求类型，用于从服务器获取数据。在Fetch API中，构造一个 GET 请求的URL是一件非常简单的事情。首先需要了解的是，GET请求的参数通常是通过URL的查询字符串（query string）部分传递给服务器的。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('出现错误:', error));

在上述例子中，fetch 执行 GET 请求，在构建URL时，需要确保查询参数是经过URL编码的，以避免查询字符串解析错误。一旦发起 GET 请求，就需要处理服务器返回的响应数据，Fetch API 返回的 response 是一个 Response 对象，可以使用以下任一方法获取响应内容：

方法	简要说明
response.text()	返回一个使用以文本为响应正文解析的 Promise
response.json()	返回一个使用从 JSON 响应中解析的对象解析的 Promise
response.blob()	返回一个使用以 Blob 对象为响应正文解析的 Promise
response.ArrayBuffer()	返回一个使用以 ArrayBuffer 实例为响应正文解析的 Promise
response.formData()	返回一个使用以 FormData 对象为响应正文解析的 Promise

2.2 发起 POST 请求

POST 请求用于向服务器发送数据，如提交表单或调用 API 提交数据到服务器。通过 Fetch API 调用 POST 请求需要构造一个包含请求体的对象，并将这个对象作为第二个参数传递给 fetch 函数。

const userData = {
  username: 'example',
  email: 'example@example.com'
};

fetch('https://api.example.com/users', {
  method: 'POST',
  body: JSON.stringify(userData)
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('出现错误:', error));

使用 fetch() 发送 POST 请求的关键是指定要发送至服务器的数据，它可以采用多种格式，包括 JSON、FormData 和文本格式。在上述示例中，我们通过设置 method 为 POST 来发送 POST 请求，并在请求体 body 中发送 JSON 格式的数据。fetch 函数会将这些信息发送到服务器，并等待响应。

2.3 使用 async/await

Fetch API 支持 async/await 语法，可以更简洁地处理异步操作，如下所示。fetch 接收到的 response 是一个 Stream 对象，response.json() 是一个异步操作，取出所有内容，并将其转为 JSON 对象。

const response = await fetch(url, options);
const data = await response.json();

三、Fetch API 的响应处理

3.1 处理 HTPP 响应

fetch 请求成功以后，得到的是一个 Response 对象，它对应服务器的 HTTP 响应。

const res=await fetch(url)

Response 包含的数据通过 Stream 接口异步读取，但它还有一些同步属性，对应 HTTP 回应的标头信息（Headers），如下表所示。

标头属性	类型	简要说明
Response.ok	boolean	表示请求是否成功，true 对应的 HTTP 请求状态码200-299，false对应其他的状态码
Response.status	number	返回一个数字，表示HTTP响应的状态码
Response.statusText	string	表示HTTP响应的状态信息，例如请求成功以后，服务器返回 OK
Response.url	string	返回请求的URL。如果URL存在跳转，该属性返回的是最终的URL
Response.type	string	返回的是请求的类型。可能为以下值：  basic：普通请求，即同源请求  cors：跨域请求  error：网络错误，主要用于Service Worker  opaque：如果fetch请求的type属性为no-cors，就会返回这个值，表示发出的是简单的跨域请求  opaqueredirect：如果fetch请求的redirect属性设为manual，就会返回这个值
Response.redirected	boolean	表示请求是否有过重定向

3.2 处理请求响应状态

在处理请求响应时，我们首先检查响应状态是否成功（response.ok），如果不成功则抛出错误。fetch 发出请求后，只有网络错误或无法连接时才会报错，即使服务器返回的状态码 是4xx或5xx。只有通过 Response.status 属性得到 HTTP 响应的真实状态码时，才能判断请求是否成功。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求错误，' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log('Success:', data))
  .catch(error => console.error('出现错误:', error));

3.3 处理不同的响应类型

当接收到服务器的响应后，通常需要解析响应体。Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法。这几个方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

方法	简要说明
response.text()	获取文本字符串，主要用于获取文本数据，比如 HTML 文件
response.json()	获取 JSON 对象，主要用于获取服务器返回的 JSON 数据
response.blob()	获取二进制 Blob 对象
response.formData()	获取 FormData 表单对象，主要用于拦截用户提交的表单，修改某些数据后再提交给服务器
response.arrayBuffer()	得到二进制 ArrayBuffer 对象，主要用于获取流媒体文件

Fetch API 可以处理多种响应格式：

// 处理JSON响应
fetch('/api/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

// 处理文本响应
fetch('/api/data.txt')
  .then(response => response.text())
  .then(text => console.log(text));

// 处理Blob响应（如图片）
fetch('/image.png')
  .then(response => response.blob())
  .then(blob => {
    const objectURL = URL.createObjectURL(blob);
    document.getElementById('image').src = objectURL;
  });

注意，Response 是一个 Stream 对象，而 Stream 对象只能读取一次，读取完就没了。这意味着，上面的几个读取方法，只能使用一个，否则会报错。

四、高级 Fetch 用法

4.1 设置请求头

在使用Fetch API进行请求时，可以通过 Headers 对象来设置请求头。每个请求或响应都有一个与之关联的 Headers 对象，这个对象包含了请求头和响应头，例如 Content-Type、Authorization 等。

fetch('https://example.com/api', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('出现错误:', error));

Response 对象还有一个 Response.headers 属性，指向一个Headers 对象，对应HTTP响应的所有标头。Headers 对象提供了以下方法来操作标头：

方法	简要说明
Headers.get()	根据指定的键名，返回键值
Headers.has()	返回一个布尔值，表示是否包含某个标头
Headers.set()	将指定的键名设置为新的键值，如果该键名不存在则会添加
Headers.append()	添加标头
Headers.delete()	删除标头
Headers.keys()	返回一个遍历器，可以依次遍历所有键名
Headers.values()	返回一个遍历器，可以依次遍历所有键值
Headers.entries()	返回一个遍历器，可以依次遍历所有键值对（[key, value]）
Headers.forEach()	依次遍历标头，每个标头都会执行一次参数函数

上面的有些方法可以修改标头，那是因为继承自 Headers 接口。有些标头不能通过headers属性设置，比如Content-Length、Cookie 、Host等等。它们是由浏览器自动生成，无法修改。这些方法中，最常用的是 response.headers.get()，用于读取某个标头的值。

let response =  await  fetch(url);  
response.headers.get('Content-Type')

4.2 设置请求体参数

当需要发送POST请求时，经常需要向服务器发送一些数据。使用Fetch API可以很便捷地通过 body 属性发送请求体。

// 发送JSON数据
const data = JSON.stringify({ name: 'John', age: 30 });
 
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: data
};
 
fetch('https://example.com/api/users', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
 
// 发送表单数据
const formdata = new FormData();
formdata.append('username', 'john');
formdata.append('email', 'john@example.com');
 
fetch('https://example.com/api/register', {
  method: 'POST',
  body: formdata
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

4.3 设置请求超时

Fetch API 本身不支持超时设置，但可以通过 AbortController 实现：

const controller = new AbortController();
const signal = controller.signal;

// 设置5秒超时
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeoutId);
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request timed out');
    } else {
      console.error('Other error:', error);
    }
  });

4.4 跨域请求

如果需要进行跨域请求，可以在服务器端设置 CORS（Cross-Origin Resource Sharing）。在前端，也可以通过 credentials 选项来指定是否发送 cookies 等凭据。

fetch('https://example.com/api', {
    method: 'GET',
    credentials: 'include' // 允许跨域请求时携带 cookie
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('出现错误:', error));

4.5 上传文件

如果表单里面有文件选择器，使用 Fetch 上传文件时，可以构造出一个表单，进行上传。

const fileInput = document.querySelector('input[type="file"]');

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('username', 'exampleUser');

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
  // 注意：不要手动设置Content-Type头，浏览器会自动设置正确的boundary
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Upload error:', error));

4.6 请求取消

使用 AbortController 取消正在进行的请求：

const controller = new AbortController();

// 开始请求
fetch('https://api.example.com/data', {
  signal: controller.signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
  if (error.name === 'AbortError') {
    console.log('Request was aborted');
  } else {
    console.error('Error:', error);
  }
});

// 在某个事件中取消请求
document.getElementById('cancel-button').addEventListener('click', () => {
  controller.abort();
});

4.7 并发请求

使用 Promise.all 处理多个并发请求：

async function fetchMultipleResources() {
  try {
    const [usersResponse, postsResponse] = await Promise.all([
      fetch('https://api.example.com/users'),
      fetch('https://api.example.com/posts')
    ]);

    if (!usersResponse.ok || !postsResponse.ok) {
      throw new Error('One or more requests failed');
    }

    const users = await usersResponse.json();
    const posts = await postsResponse.json();

    console.log('Users:', users);
    console.log('Posts:', posts);

    // 合并数据并更新UI
    displayCombinedData(users, posts);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

function displayCombinedData(users, posts) {
  // 实现数据合并和显示逻辑
}

五、总结

Fetch API 是一个强大而简洁的网络请求 API，它基于 Promise 实现，提供了更好的可读性和可维护性。通过学习和掌握 Fetch API 的基本用法和请求方法，我们可以更轻松地发起网络请求并处理响应结果。同时，我们也需要注意 Fetch API 的一些限制和常见问题，并采取相应的措施来解决它们。