Package Exports

fexios
fexios/dist/index.mjs
fexios/dist/index.umd.js
fexios/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fexios) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Fexios

类 Axios 语法的原生 fetch API 请求封装库
Fetch based HTTP client with similar API to axios for browser and Node.js

~~fetch + axios = fexios~~ (Just a joke)

特色功能 Features

🤯 Native fetch API (supports the Promise API)
🤫 Method shortcuts (fexios.post())
🔗 Hooks (intercept request and response)
😏 Automatic transform request and response data
😏 Automatic transforms for JSON data
🤩 Instances with custom defaults
🫡 Instance extendable
😍 Fricking tiny size: index.umd.js 4.56 kB │ gzip: 2.01 kB │ map: 17.06 kB

安装 Installation

包管理器/Using package manager

# Node Package Manager
npm install fexios
# Why not pnpm
pnpm add fexios
# Or yarn?
yarn add fexios

Then import the library and enjoy:

import fexios, { createFexios, Fexios } from 'fexios'

// Using directly
fexios.get('https://zh.moegirl.org.cn/api.php')

// With options
const fexios = createFexios(/* options */)
const fexios = new Fexios(/* options */)
const fexios = Fexios.create(/* options */)

在浏览器中直接使用/Use directly in the browser

JS Module

import('https://unpkg.com/fexios?module').then(({ createFexios }) => {
  const fexios = createFexios(/* options */)
})

Global variables

<script src="https://unpkg.com/fexios"></script>

<script>
  // Using directly
  fexios.get('https://zh.moegirl.org.cn/api.php')

  // With options
  const { createFexios } = Fexios
  const fexios = createFexios(/* options */)
</script>

使用方法 Usage

You can find some sample code snippets here.

new Fexios(configs: Partial<FexiosConfigs>)

FexiosConfigs

export type FexiosConfigs = {
  baseURL: string
  query: Record<string, string | number | boolean> | URLSearchParams
  headers: Record<string, string> | Headers
  credentials: 'omit' | 'same-origin' | 'include'
  responseType: 'json' | 'blob' | 'text'
}

Defaults

const DEFAULT_CONFIGS = {
  baseURL: '',
  credentials: 'same-origin',
  headers: {
    'content-type': 'application/json; charset=UTF-8',
  },
  query: {},
  responseType: 'json',
}

Fexios#request(config: FexiosRequestOptions)

fexios.request<T>(config): Promise<FexiosResponse<T>>

FexiosRequestOptions

export interface FexiosRequestOptions {
  baseURL?: string
  method?: FexiosMethods
  credentials?: 'omit' | 'same-origin' | 'include'
  headers?: Record<string, string> | Headers
  query?: Record<string, string | number | boolean> | URLSearchParams
  body?: Record<string, any> | string | FormData | URLSearchParams
  responseType?: 'json' | 'blob' | 'text'
}

Response

export type FexiosResponse<T = any> = {
  rawRequest: Request
  rawResponse: Response
  ok: boolean
  status: number
  statusText: string
  headers: Headers
  isGood: boolean
  data: T
}

And common request methods aliases:

fexios.get(url[, config])
fexios.delete(url[, config])
fexios.head(url[, config])
fexios.options(url[, config])
fexios.post(url[, data[, config]])
fexios.put(url[, data[, config]])
fexios.patch(url[, data[, config]])

钩子 Hooks

export interface FexiosContext<T = any> extends FexiosRequestOptions {
  url: string // may changes after beforeInit
  rawRequest?: Request // provide in beforeRequest
  rawResponse?: Response // provide in afterRequest
  response?: FexiosResponse // provide in afterRequest
  data?: T // provide in afterRequest
}
export type FexiosHook<C = unknown> = (context: C) => AwaitAble<C | false>
export type FexiosEvents = 'beforeInit' | 'beforeRequest' | 'afterResponse'

beforeInit

beforeRequest

afterRequest

You can modify context in hooks' callback then return it as brand new context™.

Return false to abort request immediately.

Hooks example

const fexios = new Fexios()

fexios.on('beforeRequest', async (ctx) => {
  if (new URL(ctx.url).path === '/foo') {
    return false
  } else {
    ctx.query.foo = 'bar'
  }
  return ctx
})

interceptors

Oh, this is mimicked from axios. Just sweet sugar.

// They are same
fexios.on('beforeRequest', async (ctx) => {})
fexios.interceptors.request.use((ctx) =>  {})

// Bro, they are just same
fexios.on('afterResponse', async (ctx) => {})
fexios.interceptors.response.use((ctx) => {})

MIT License

Copyright (c) 2023 机智的小鱼君 (A.K.A. Dragon-Fish)