if-service

for use API faster

Start

import IfService from 'if-service'

app.use(IfService)

API

• addService 注册单个服务
• useService 获取服务对象
• extendService, 扩展服务（单模块，多接口）
• registerService, 扩展服务（多模块， 多接口）
• setGlobalAuthMode, 设置全局的接口鉴权
• addWatcher 为返回接口状态添加监听器

addService(module, api, option)

register a service

import {addService} from 'if-service'

addService('moduleA', 'login', {url: 'http://example.com/login', method: 'post'})
addService('moduleA', 'getUser', {url: 'http://example.com/getUserInfo', method: 'post'})

option

• url: request URL
• method: get / post / put / delete
• gateway: stage prefix for request url
• config: generate headers for axios {headers, formData, authMode, file}
• cache: bool | string | ():boolean | string =>{}, 是否缓存，返回值取值为false时， 不缓存 default false.
• expired: seconds, if cacheis true, default 1800
• cacheMode: 缓存模式， default:LocalStorage
• cacheAfterRequest：数据缓存条件(请求数据判断) default (res) => +res.code === 200

useService(module?)

const $ = useService('moduleA')
// $.login
// $.getUser

const $$ = userService()
// $$.moduleA.login
// $$.moduleA.getUser

useCollection(): {destroy, abort}

函数调用开始创建一个请求收集器，随后所有的请求都将被收集，当请求完成、失败或者取消时，该请求会被从收集器里移除。

返回两个函数：destroy 将收集器里所有的请求都取消，并销毁收集器， abort: 将收集器里所有的请求都取消。

File Upload

使用 file 选项 将会强制设置Content-Type=multipart/form-data 并且使用formData的形式传参

const $ = useService('moduleA')
$.upload({file: File}, { config: { file: true } } )

使用formData传输

使用formData将数据发送出去

const $ = useService('moduleA')
$.postSomeFeature({foo: 1}, { config: { formData: true } } )

useApi(module, api) Removed from V1.0.12

the api depends on the ref in vue3, make sure it's a vue3 project

const login = userApi('moduleA', 'login')
const loginRes = login({...params})
// loginRes.loading
// loginRes.error
// loginRes.data
// loginRes.abort

registerService

批量注册服务

registerService({
    demo: {
        list: 'http://localhost:3000/v1/projects/:projectID@get',
        login: 'http://localhost:3000/auth/login@post'
    }
})

const $ = useService('demo')
$.list({projectID: 1})
// GET http://localhost:3000/v1/projects/1 
$.login({username: 'foo', password: 'foo'})
// POST http://localhost:3000/auth/login

Watcher 对服务的请求code进行监听

通常情况下，会监听axios.response.status

addWatcher(401, (e) => {
    console.log(e)
    // {data: {…}, status: 401, statusText: 'Unauthorized', headers: AxiosHeaders, config: {…}, …}
})

但在某些设计中，通常都会返回200的请求成功状态，但会在返回的包中使用不同的code进行请求结果的实际区分

// 例如 axios.response.status = 200 但 axios.response.data的结果如下
{
    code: '403',
    success: false,
    message: 'Unauthorized'
}

此时，wacther依然可以工作

addWatcher(403, (e) => {
    console.log(e)
    // { status: 403, success: false, message: 'Unauthorized' }
})

注意： 允许对同一code添加多个watcher， 以处理不同的任务， 例如弹窗信息或埋点报错提报信息等。

允许反向监听 addWatcher(expression(code, response), callback(response))

expression(code, response) 的参数

• code 优先取值status 其次取值code
• response 成功时获取的data, 失败时获取的是整个response

// 允许反向监听 addWatcher(expression, callback)
addWatcher(code => !([200, 401, 500]).includes(+code), (response) => {
    const traceId = response.headers['x-dtc-request-id'];
    const status = response.status;
    message.error(`Trace error[${status}]: ` + traceId);
})

// 当status / code 均不是200/401 时
addWatcher(code => !([200, 401]).includes(+code), (response) => {
    const traceId = response.headers['x-dtc-request-id'];
    if (+response.status !== 500) {
        
    } else {
        // status: 500
        const data = response.data || {};
        if (data.code === 500) {
            // 标准code 500
        } else {
            // 非标准的code
            message.error(`错误信息：${data.code}:${data.message}， traceId: ${traceId}`)
        }
    }
})

Release Notes

2024/7/13

• [1.0.30]修复请求接口catch丢失response的问题