Vanilla-http (Tiny fetch)

仅有 1kb(gzip) 的体积, 仅仅是 fetch 的封装

Feature

• 更加简化的返回类型, 焦距最终的返回值, 而不是过程
• Promise 风格
• JSON 自动处理
• GET 请求 params 自动处理

Example

import { createHttp } from "vanilla-http";

const http = createHttp({
  // 开启请求缓存, 默认为 false
  useCache: false,
  // 在固定间隔时间内的请求，若参数相同，直接走缓存，默认15分钟
  cacheTimeout: 60 * 15 * 1000, // base is 60*15*1000
  // 可选，请求URL前缀
  baseURL: "http://127.0.0.1:4000",
  reducer: (e) => {
    return e;
  },
  onError: (e) => {
    console.log("have-error:", e);
    return e;
  },
});

const fetchSometing = async () => {
  // 给某个请求开启缓存
  const data1 = await http.get("/hello", {}, { useCache: true });
  const data2 = await http.post(
    "/hello",
    { name: "dog", age: 5 },
    {
      onerror: (e) => {
        // 对一些状态单独做处理, 例如，弱error就返回null
        return null;
      },
    }
  );
  const data3 = await http.put("/hello", { name: "dog", age: 5 });
  const data4 = await http.delete("/hello", { name: "dog", age: 5 });
  const data4 = await http.options("/hello", { name: "dog", age: 5 });
};

Zero API

大部分情况下，你不需要使用此 API，若后端使用的是 NodeJS + Typescript，这或许会帮你提高开发效率

Zero API 是通过一个前后端约定，达到前后端调用 API 和调用 typescript 函数一样，简单并且有类型提示约束。

查看 Example

Zero API 服务端设定

约定服务端以一下方式创建接口

apis.ts: 声明一个 apis 对象，同时也是前端调用的类型对象

export const apis = {
  hello: async ({ name }: { name: string }) => {
    return { code: 200, data: { name } };
  },
  world: async ({ age }: { age: number }) => {
    return { code: 200, data: { age } };
  },
};

app.ts: 启动服务

import fastify from "fastify";
import { fastifyZeroApi } from "vanilla-http/serve/fastifyZeroApi";
import { apis } from "./apis";

// 创建 一个 fastlify 实例
const app = fastify({ logger: { level: "warn" } });

// 注册若干个函数路由，并且约定一个前缀: /v1
fastifyZeroApi(app, "/v1", apis);

app.listen(5000);

Zero API 客户端设定

api.d.ts: 引用服务端 ts 源码，获得接口类型

import { apis } from "../server/apis";

type ApiTypes = typeof apis;

export { ApiTypes };

zeroApi.ts: 创建一个服务端请求对象，并且约束接口类型

import { createZeroApi } from "vanilla-http";
import { ApiTypes } from "./apis.d.ts";

// 使用刚刚引入的 Apis 类型约束， 并且使用服务端约定的前缀: /v1,
const api = createZeroApi<ApiTypes>("/v1");

// 此时获得完整的类型提示，并且执行即发起一个 POST 请求
api.hello({ name: "dog" }).then((res) => {
  // 服务端函数返回的对象： { code: 200, data: { name } }
  console.log(res);
});