JavaScript教程：深入理解fetch API的网络请求-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00082/article/details/148940711

JavaScript教程：深入理解fetch API的网络请求

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

引言：现代JavaScript中的网络请求

在现代Web开发中，与服务器进行异步通信是至关重要的功能。JavaScript提供了多种方式来实现这一目标，其中fetch() API是最为现代和强大的解决方案之一。

什么是fetch API？

fetch()是JavaScript内置的一个全局方法，用于发起网络请求并获取资源。它基于Promise设计，提供了简洁而强大的接口来处理HTTP请求和响应。

基本语法

let promise = fetch(url, [options])

url：要访问的URL地址
options：可选参数对象，可配置请求方法、头部信息等

请求流程详解

第一阶段：响应头接收

当调用fetch()时，浏览器会立即返回一个Promise对象。这个Promise会在服务器响应头到达时解析，但此时响应体可能还未完全接收。

let response = await fetch(url);

if (response.ok) {  // HTTP状态码在200-299之间
  let json = await response.json();
} else {
  console.error("HTTP错误: " + response.status);
}

第二阶段：响应体处理

在确认请求成功后，我们可以使用多种方法来处理响应体：

response.text()：获取文本格式的响应
response.json()：解析JSON格式的响应
response.blob()：处理二进制数据
response.arrayBuffer()：处理底层二进制数据
response.formData()：处理表单数据

实际应用示例

获取JSON数据

async function fetchCommits() {
  let response = await fetch('https://api.example.com/repos/project/commits');
  
  if (response.ok) {
    let commits = await response.json();
    console.log(commits[0].author);
  } else {
    console.error("加载失败: " + response.status);
  }
}

发送POST请求

async function sendData() {
  let user = {
    name: '张三',
    age: 30
  };

  let response = await fetch('/api/user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify(user)
  });

  let result = await response.json();
  console.log(result.message);
}

上传图片

async function uploadImage(canvasElement) {
  let blob = await new Promise(resolve => 
    canvasElement.toBlob(resolve, 'image/png'));
  
  let response = await fetch('/api/upload', {
    method: 'POST',
    body: blob
    // 注意：Blob会自动设置Content-Type
  });

  let result = await response.json();
  console.log(`图片已上传，大小: ${result.size}字节`);
}

重要注意事项

响应体只能读取一次：一旦使用某个方法读取了响应体，就不能再用其他方法读取了。

// 错误示例
let text = await response.text();  // 响应体已被消费
let json = await response.json();  // 这里会报错

请求头限制：某些请求头是浏览器保留的，不能通过JavaScript设置（如Cookie、Host等）。
错误处理：网络问题会导致Promise被拒绝，而HTTP错误状态码（如404）则不会。

高级特性

自定义请求头

let response = await fetch('/api/data', {
  headers: {
    'X-Custom-Header': 'value',
    'Authorization': 'Bearer token123'
  }
});

处理不同类型的数据

根据服务器返回的数据类型，选择合适的方法处理：

// 处理文本
let text = await response.text();

// 处理JSON
let data = await response.json();

// 处理二进制数据
let blob = await response.blob();
let img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.append(img);