当前位置：首页 > 行业动态 > 正文

fetch api 中文文档

admin
行业动态
2025-05-02
2

Fetch API是浏览器内置的异步请求接口，基于Promise简化网络请求，支持JSON解析和错误处理，中文文档便于开发者理解接口用法及异步流程，提升前后端

%ignore_a_3% 是 JavaScript 提供的用于发起网络请求的接口，基于 Promise 设计，简化了异步操作流程，它适用于获取资源（如 JSON、文本、二进制数据等），支持跨域请求（需服务器支持 CORS），并替代了传统的 XMLHttpRequest。

fetch api 中文文档第1张

基本用法

发起 GET 请求

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

发起 POST 请求

fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: 'user', password: 'pass' })
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

方法参数说明

参数名	类型	说明
`url`	`string`	请求的 URL 地址（必填）。
`init`	`object`	配置对象（可选），包含以下可选属性：
`method`	`string`	HTTP 方法（如 `GET`、`POST`，默认 `GET`）。
`headers`	`Headers` 或 `object`	自定义请求头（如 `{'Content-Type': 'application/json'}`）。
`body`	`string` 或 `Buffer`	请求体（如 JSON 字符串），仅 `POST`/`PUT` 等方法有效。
`mode`	`string`	请求模式（如 `cors`、`no-cors`、`same-origin`）。
`credentials`	`same-origin`/`include`/`omit`	是否携带凭证（如 Cookies）。
`cache`	`string`	缓存策略（如 `no-store`、`default`）。

响应对象（`Response`）

属性/方法	说明
`ok`	布尔值，表示响应状态码是否为 2xx。
`status`	数字，HTTP 状态码（如 200、404）。
`statusText`	字符串，HTTP 状态描述（如 “OK”）。
`headers`	`Headers` 对象，包含响应头。
`text()`	返回 Promise，解析为文本。
`json()`	返回 Promise，解析为 JSON 对象。
`blob()`	返回 Promise，解析为 `Blob` 对象。
`clone()`	克隆当前响应对象（用于并行处理）。

错误处理

网络错误：若请求失败（如断网），Promise 会被拒绝。

HTTP 错误状态：需手动检查 response.ok 或 response.status。

fetch('/api')
  .then(response => {
    if (response.status === 404) {
      throw new Error('Resource not found');
    }
    return response.json();
  })
  .catch(error => console.error(error));

高级用法（`async/await`）

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

注意事项

默认不携带 Cookie：需设置 credentials: 'include'。
跨域限制：需服务器设置 CORS 头（如 Access-Control-Allow-Origin）。
无超时参数：需通过 Promise.race 或第三方库实现超时控制。
流式处理：response.body 可读取为 ReadableStream，但需手动管理。

相关问题与解答

问题 1：如何取消一个正在进行的 Fetch 请求？

解答：使用 AbortController 创建信号，并将其传递给 fetch。

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request aborted');
    } else {
      console.error(error);
    }
  });
// 取消请求
controller.abort();

问题 2：如何处理返回的 JSON 数据？

解答：调用 response.json() 方法，它会返回一个解析后的 Promise，注意：

需先检查 response.ok 或 response.status，避免解析错误响应。

response.json() 只能调用一次，重复调用会返回 undefined。

fetch('/api')
.then(response => {
 if (!response.ok) {
   throw new Error('Invalid response');
 }
 return response.json(); // 解析为对象
})
.then(data => {
 console.log(data.name); // 访问 JSON 字段
});