Fetch API安装指南

Fetch API 是一种现代化的网络请求方式，通过Promise来处理数据请求，提供了更简洁、更直观的接口。它被广泛应用于Web开发中，替代传统的XMLHttpRequest，成为前端开发的热门选择。本文将详细介绍Fetch API的安装、配置和使用方法，帮助开发者快速上手。

Fetch项目安装与使用指南

项目目录结构及介绍

Fetch项目遵循了典型的Node.js项目结构，以下是关键路径及其简要说明：

fetch/

├── src/                  # 源代码文件夹

│   ├── index.js         # 主入口文件，应用启动的起点

│   └── ...              # 其他源代码文件

├── public/               # 静态资源文件夹，如HTML、CSS、图片等

│   └── index.html       # 若有前端部分，这是默认的HTML入口文件

├── package.json          # 项目配置文件，包含了依赖信息和脚本命令

├── .gitignore            # Git忽略文件列表

├── README.md             # 项目说明文档

├── node_modules/         # 自动下载的Node.js依赖库（不包含在版本控制中）

└── scripts/              # 可能包含自定义构建或脚本工具

在该项目中，src/index.js 是应用的主入口文件，负责启动程序并处理核心逻辑。package.json 文件中定义了项目的依赖关系和启动脚本。开发者可以根据项目需求调整配置文件和代码结构。

项目的启动文件介绍

启动文件主要是 src/index.js。在Node.js环境中，通过 require 或其他导入机制来组织代码，处理路由、业务逻辑等。若项目采用现代JavaScript标准如ES6 modules，则可能入口文件会有所不同，例如 index.mjs 或使用特定的打包配置指定入口。

项目的配置文件介绍

主要关注点通常在 package.json 文件：

scripts: 定义了可执行的npm脚本，如 "start": "node src/index.js" ，用于启动应用。
dependencies: 列出了项目运行所需的所有Node.js依赖项。
devDependencies: 开发过程中使用的工具，如测试框架、构建工具等，非生产环境必需。

此外，项目可能会涉及数据库连接、API密钥、环境变量等高级配置，可能会有额外的 .env 文件或是专门的配置文件（如 .config.js, config.yml），但具体取决于项目的实际实现。

Fetch基本用法

fetch() 的功能与 XMLHttpRequest 基本相同，但有三个主要的差异：

使用 Promise：fetch 使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
模块化设计：fetch 采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些。
数据流处理：fetch 通过数据流（Stream 对象）处理数据，可以分块读取，提高网站性能表现，减少内存占用。

在用法上，fetch() 接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。基本用法如下：

fetch(url)
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err));

Response对象：处理HTTP回应

Response 对象对应服务器的 HTTP 回应，包含的数据通过 Stream 接口异步读取。它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。

Response.ok: 属性返回一个布尔值，表示请求是否成功。
Response.status: 返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
Response.statusText: 返回一个字符串，表示 HTTP 回应的状态信息。

可以通过以下代码获取Response对象的同步属性：

const response = await fetch(url);
console.log(response.status);
console.log(response.statusText);

判断请求是否成功

fetch 发出请求后，只有网络错误，或无法连接时，fetch 才会报错，其他情况都不会报错，而是认为请求成功。需要通过 Response.status 属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功。

async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

另一种方法是判断 response.ok 是否为 true。

读取内容的方法

Response 对象根据服务器返回的不同类型的数据，提供了不同的读取方法：

response.text(): 得到文本字符串。
response.json(): 得到 JSON 对象。
response.blob(): 得到二进制 Blob 对象。

这些读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。

Response.clone() 多次读取

Stream 对象只能读取一次，读取完就没了。这意味着，前一节的五个读取方法，只能使用一个，否则会报错。Response 对象提供 Response.clone() 方法，创建 Response 对象的副本，实现多次读取。

const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

FAQ

问：Fetch API 和 XMLHttpRequest 有什么区别？
- 答：Fetch API 使用 Promise 处理请求，提供更简洁的接口；支持数据流处理，可以提高性能表现；采用模块化设计，更合理。
问：如何判断 Fetch 请求是否成功？
- 答：可以通过 response.status 属性获取 HTTP 回应状态码，或使用 response.ok 属性判断请求是否成功。
问：如何在 Fetch 中上传文件？
- 答：可以使用 FormData 对象，将文件数据附加到表单中，通过 fetch() 的 body 属性发送。
问：Fetch API 如何处理跨域请求？
- 答：Fetch 默认支持跨域请求，但需要服务器允许跨域访问，并设置正确的CORS头。
问：如何取消正在进行的 Fetch 请求？
- 答：可以使用 AbortController 对象，调用其 abort() 方法发送取消信号，停止请求。