@cyzeal/fetch-onion-model v0.1.2

@cyzeal/fetch-onion-model

一个基于 Web Fetch Api 的轻量级 Http 请求增强工具，支持浏览器与 Node 环境，类似于 koa 的洋葱模型，以中间件形式扩展功能。

Install

Using npm

npm i -S @cyzeal/fetch-onion-model

Using yarn

yarn add @cyzeal/fetch-onion-model

Using pnpm

pnpm add @cyzeal/fetch-onion-model

Usage

快速上手

import request from "@cyzeal/fetch-onion-model"

// 发送get请求
request("https://examples.com/somepath", {
  params: {
    foo: "bar",
  },
})
  .then((res) => {
    console.log(res)
  })
  .catch((error) => {
    console.error(error)
  })

// 发送post请求
request("https://examples.com/somepath", {
  method: "POST",
  // data参数会放在请求体中携带
  data: { foo: "foo" },
  // params参数会拼接在url上
  params: { bar: "bar" },
})

创建实例

支持通过 create 函数创建一个新的新的实例，可以配置默认 options 与 middleware

import { create } from '@cyzeal/fetch-onion-model'

const baseOptions = {
  baseUrl: 'https://examples.com',
  credentials: 'include',
  validStatus(response){
    return response.status === 200
  }
}

// 这个函数每次请求都会在path前拼接上baseUrl、带上cookie、并且只判断status为200的请求为成功
const request = create(baseOptions)

request('/somepath'})
  .then(res=>{
  	console.log(res)
	})
	.catch(error=>{
  	console.error(error)
	})

内置中间件

retry 是基于fetch-retry封装的错误重试中间件

import { create } from "@cyzeal/fetch-onion-model"
import retry from "@cyzeal/fetch-onion-model/esm/middleware/retry"

// 这个请求实例发出的每个请求发生错误都会每隔2000ms重试一次，一共重试3次
const request = create({}, [retry({ retries: 3, retryDelay: 2000 })])

// 可以覆盖默认的配置，下面这个请求仅当status为500时才会重试，一共重试2次
request("https://examples.com/somepath", {
  retries: 2,
  retryOn: [500],
})

timeout 是基于原生 AboutController 实现的超时取消请求

import { create } from "@cyzeal/fetch-onion-model"
import timeout from "@cyzeal/fetch-onion-model/esm/middleware/timeout"

// 这个请求实例发出的每个请求超过5秒未响应都会超时
const request = create({}, [timeout(5000)])

// 可以覆盖默认的配置，下面这个请求超时时间为10秒
request("https://examples.com/somepath", {
  timeout: 10000,
})

// 支持通过函数动态设置
request("https://examples.com/somepath", {
  timeout: (ctx) => {
    if (ctx.url.includes("uploadFile")) {
      return 10000
    }
    return 3000
  },
})

自定义 middleware

import { create } from '@cyzeal/fetch-onion-model'

const reportMiddleware = async (ctx, next) => {
  console.log(`${ctx.method} ${ctx.url}`)
  await next()
  console.log(`${ctx.method} ${ctx.url} done. status: ${ctx.status}`)
}

const errorHandleMiddleware = async (ctx, next) => {
  try {
    await next()
    // 如果走到这里表示已经拿到服务端返回的数据
    const { body } = ctx
    if(!body.success){
      throw new Error('request fial...')
    }
  } catch (error) {
    // 这里可以自定义错误处理
    console.error(error)
    ctx.body = { success: false }
  }
}
const baseOptions = {
  baseUrl: 'https://examples.com',
}
const request = create(baseOptions, [errorHandleMiddleware, reportMiddleware])
request('/somepath'})
  .then(res=>{
  	console.log(res)
	})
	.catch(error=>{
  	console.error(error)
	})

在 TypeScript 中使用

import { create } from "@cyzeal/fetch-onion-model"
import type { RequestOptions, MiddleWare } from "@cyzeal/fetch-onion-model"

interface Result<T> {
  success: boolean
  msg: string
  data: T
}

interface Data {
  content: string
}

const reportMiddleware: MiddleWare = async (ctx, next) => {
  console.log(`${ctx.method} ${ctx.url}`)
  await next()
  console.log(`${ctx.method} ${ctx.url} done. status: ${ctx.status}`)
}
const baseOptions: RequestOptions = {
  baseUrl: "https://examples.com",
}
const middlewares: MiddleWare[] = [reportMiddleware]
const request = create(baseOptions, middlewares)

const res = await request<Result<Data>>("/somepath")

在 NodeJs 中使用

import { create } from '@cyzeal/fetch-onion-model'
import nodeFetch from 'node-fetch'

const request = create({},{ fetch: nodeFetch })

request(...)

API

RequestOptions