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: boolean, cache the request or not.
• expired: seconds, if cacheis true, default 1800

useService(module?)

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

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

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， 以处理不同的任务， 例如弹窗信息或埋点报错提报信息等。

Warning

It‘s still a experimental plugin. Good Luck!