README_zh-CN.md

Fetch2

Fetch-based front-end middleware development model

English | 简体中文

理念

基于中间件模式处理请求，隔离数据处理与业务、视图的相关代码，注重数据的数据处理细节与代码复用性，为数据请求提供更大的想象空间.

特性

• 基于单例模式初始化并配置请求库，发起Fetch请求
• 支持取消、自动重试、超时、默认参数、前缀
• 支持中间件，借用了koa-compose的compose代码

安装

npm install --save @misaka.ink/fetch2

错误信息

• name: 错误名称 - FetchError
• message: 错误消息 - {error message}
• stack: 错误堆栈 - {stack}
• info: 保留信息 - reservation infomation

例子

初始化

import fetch2, {method} from '@misaka.ink/fetch2'

const f2 = fetch2.getInstance()

// 默认参数

const defaultOptions = {
    // 默认请求方法
    // *GET、POST、PATCH、PUT、DELETE 
    method: method.GET,
    
    // 浏览器发送包含凭据的请求  
    // include, *same-origin, omit
    credentials: 'same-origin',
    
    // manual, *follow*, error
    redirect: 'follow',
    
    // 请求的模式
    // same-origin, no-cors, cors, navigate
    mode: 'cors',
    
    // 请求的来源
    // *client, no-referrer, URL
    referrer: 'no-referrer',
    
    // 缓存
    // *default, no-cache, reload, force-cache, only-if-cached
    cache: 'no-cache',
    
    // 超时，不需要超时可设置为0
    timeout: 3000,
    
    // 失败重试次数，0不重试
    count: 0,
    
    // 默认参数，如果为函数会在请求前被执行
    params: undefined,
    
    // Path前缀
    prefix: undefined,
    
    // 中止请求
    controller: new AbortController(),
    
    // BODY
    body: null
    
}

发起一个GET请求

import fetch2, {method} from '@misaka.ink/fetch2'
const f2 = fetch2.getInstance()

f2.request(url, params)
// -> /get?p1=10&p2="%5B1%2C2%2C3%5D"
.then(result => {})
.catch(err => {})

发起一个POST请求

import fetch2, {method} from '@misaka.ink/fetch2'
const f2 = fetch2.getInstance()

// async func

async function func() {
    const result = await f2.post(url, null, {
        method: method.POST,
        body: {
            p1: 10, 
            p2: [1, 2, 3]
        }
    })
}

取消请求

async function func() {
    const controller = new AbortController()
    const result = await f2.request(url, null, {
        // 控制器
        controller
    })
    // 触发中止
    controller.abort()
}

使用中间件

import fetch2, {method} from '@misaka.ink/fetch2'
import middleware from 'middleware'
const f2 = fetch2.getInstance()

f2.use(middleware)

失败时重复请求

async function func() {
    const result = await f2.request(url, null, {
        // 失败时重复{x}次发起发次请求
        count: x
    })
}