大学生一个暑假，做一个基于 Fetch 的请求库

Hello，大家好，这里是小nuo😎。

我今天打算分享一下我自己做的一个 Fetch 请求库，制作它的起因呢，是我自己在学习做项目的过程中发现很多的教程使用的都是 Axios 。但是 Next.js 框架是推荐基于 Fetch 请求的。Axios 则是基于 XMLHttpRequest 和 Promise 的 HTTP 客户端 。

但是基于原生 Fetch 比较麻烦，无法做到像 Axios 一样便捷方便。参考了 Axios 与 Ky ，小nuo基于 Fetch 封装了一个 HTTP 客户端 - Ceno 。

Github地址：https://github.com/leehainuo/ceno

用法

Ceno 的用法与 Axios 很像确又有所不同，不过放心。Ceno 很容易上手的：

import ceno from 'ceno';

const BASEURL = 'localhost';
const PORT = 8000;

const c = ceno.create({
  prefixUrl: `${BASEURL}:${PORT}`, // -> axios的 baseURL
  timeout: 6000,
  throwHttpErrors: false, // 若不了解则先设为 false
});

c.interceptors.use({
  request: {
    onFulfilled: (req) => {
      console.log('请求拦截器生效....');
      return req;
    },
  },
  response: {
    onFulfilled: (res) => {
      console.log('响应拦截器生效....');
      return res;
    },
    onRejected: (err) => {
      if (err.status === 401) {
        console.log('401 错误待处理....');
      }
      throw err;
    },
  },
});

这样便可处理大多数情况了。如何发送请求，来看如下代码：

// -> Get 请求 'localhost:8000/api'
const json = c.get('api').json()

很好~ 🥰

更多请查看 Github 仓库的 readme.md

为什么选择 Ceno ?

Ceno 面向现代浏览器，支持 Node.js、Deno、Bun 。✅

Ceno 比 Axios 更加的轻量，现代化。Ceno 的 Unpacked Size 仅 101kB 。✅

Ceno 拥有 TypeScript 支持，保证类型安全。✅

Ceno 基于现代化的 Fetch API ，同时做到了写法简洁优雅。✅

// fetch
const response = await fetch('https://example.com', {
  method: 'POST',
  body: JSON.stringify({data: '🍰'}),
  headers: {
    'content-type': 'application/json'
  }
});

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

const json = await response.json();

console.log(json);

// ceno
import ceno from 'ceno';

const json = await ceno.post('https://example.com', {
  json: {data: '🍰'}
}).json();

console.log(json);

总结

Ceno 的目的就是为了方便的使用 Fetch，做到简洁、轻量、优雅。

如果大家有好的建议和想法，欢迎随时再评论区反馈交流。

同时小nuo希望大家点点 start ⭐，多多鼓励与支持~