React之ky 修订版本明细

源

采纳

编辑于 1月前

半兽人

React之ky

React

React
网络组件

`ky` 是什么？

ky 是一个 基于 Fetch API 的轻量级 HTTP 请求库，主要用于在浏览器或 Node.js 环境中发起网络请求。
它类似于 axios，但是更小、更现代化，默认使用原生 fetch 并进行了一些常用增强。

GitHub: https://github.com/sindresorhus/ky

核心特点

轻量 & 现代化
- 基于原生 fetch，不引入复杂 polyfill，适合现代浏览器和 Node.js
简洁的 API
- 常用的 GET、POST、PUT 等操作直接封装，无需手动 .json() 或 response.ok 判断
内置功能
- 自动抛出 HTTP 错误（4xx、5xx）
- 自动 JSON 解析：.json() 方法直接返回解析后的结果
- 请求重试：默认 GET 自动重试 2 次，可配置
- 请求超时 & 取消：基于 AbortController
- Hook 扩展：支持全局拦截器，方便处理 Token、日志等
小而专注
- 只有现代 HTTP 客户端功能，不包含像 axios 那样的庞大生态，体积小

安装

npm install ky
# 或
yarn add ky

基本用法

GET 请求

import ky from 'ky';

const data = await ky.get('https://api.example.com/items').json();
console.log(data);

直接返回解析后的 JSON
4xx/5xx 会抛出异常，无需手动检查 response.ok

POST 请求

await ky.post('https://api.example.com/items', {
  json: { name: 'Apple', price: 10 }
});

初看 ky 确实像是 fetch 的简单包装，看不出“必须用它”的理由。它的好处主要在于简化常见操作和内置功能，而不是颠覆性的新特性。

高级用法

1. 创建带默认配置的实例

import ky from 'ky';

const api = ky.create({
  prefixUrl: 'https://api.example.com',
  timeout: 5000,   // 超时 5 秒
  retry: 2,        // 自动重试 2 次
  headers: {
    Authorization: 'Bearer my-token'
  }
});

const items = await api.get('items').json();

2. 使用 Hook 做拦截器

const api = ky.create({
  hooks: {
    beforeRequest: [
      request => {
        console.log('发请求前:', request.url);
      }
    ],
    afterResponse: [
      (request, options, response) => {
        console.log('收到响应:', response.status);
      }
    ]
  }
});

区别

fetch 和 ky 的区别

1. 普通 `fetch` 的写法

比如 GET 请求 + 自动解析 JSON + 错误处理：

async function getData() {
  const response = await fetch('https://api.example.com/items');

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  return data;
}

需要手动 if (!response.ok) 处理错误
需要手动 .json() 解析
想加超时、重试、取消请求更麻烦

2. `ky` 的写法

import ky from 'ky';

const data = await ky.get('https://api.example.com/items').json();
console.log(data);

优势：

自动错误抛出（4xx、5xx 会直接抛异常，不用手动判断 response.ok）
.json() 直接返回 JSON，不需要 .then(res => res.json())
内置重试（默认 GET 会自动重试 2 次，可配置）
内置超时和取消（基于 AbortController）
Hooks 支持，方便统一加 Header、做日志或处理 Token

3. 高级用法示例

比如带重试、超时和统一 Header：

import ky from 'ky';

const api = ky.create({
  prefixUrl: 'https://api.example.com',
  timeout: 5000,   // 5秒超时
  retry: 2,        // 自动重试2次
  headers: {
    Authorization: 'Bearer my-token'
  },
});

try {
  const data = await api.get('items').json();
  console.log(data);
} catch (error) {
  console.error('请求失败:', error);
}

如果用原生 fetch 写，得自己处理超时、重试、Headers 注入，会啰嗦很多。

什么时候用 `ky`

适合：

追求简洁、现代的前端项目
不需要 axios 的老旧浏览器兼容和复杂功能
想要内置重试、超时、错误抛出的轻量 HTTP 客户端

不适合：

需要全功能、生态丰富的请求库（如文件上传进度、FormData 自动处理、拦截器链等）
已经有 axios 或封装了自己的 fetch 工具

总结

ky 本质是 fetch 的现代化封装，优势在于：

少写重复代码
自动错误处理、重试、超时
支持实例化和 Hook，方便统一管理请求

如果你项目轻量、以现代浏览器或 Node.js 环境为主，ky 是一个简洁干净的选择；
如果项目已有 axios 或自研封装，ky 价值不大。

预览