apify

A api solution for web browser based Fetch api!

api.method(payload, option);

Description

基于fetch api的前端数据链路层封装，可以达到一次配置随意轻松使用！

apify 提供了以下功能

• requset用于发送请求支持POST，GET 请求, PUT，DELETE需要自己扩展
• apify 用于把配置处理为可以发送请求的函数化列表
• 可以使用apify处理过的简单发送请求方式，也可以直接用requset发送请求
• i-apify 使用了fetch Api的polyfill，可以直接使用 Headers 和 Response 类

Define

import {apify, request} from 'i-apify';

let list = {
    getUser: '/api/v1/getUser',
    getCity: '/api/method/getCity?type=normal'
};

export default apify(request.post, list, <option>);

Usage

request 对象

request的post，get出了配合apify使用外均可以独立使用。

import {request} from 'i-apify';

request.post('/api/v1/getUser', payload, <option>);
request.get('/api/method/getCity?type=normal', payload, <option>);

apify处理后的函数使用

|参数|说明|default| |---|----|----| |payload| {Object string} | null | |option|{Object=}|{}|

1. 直接使用

api.getUser({
    id: ${userId},
    name: ${userName}
})
    .then(response => {
        // do something
    })
    .catch();

2. 使用local option覆盖global option

api.getCity(null, <option>)
    .then()
    .catch();

Option

默认option及初始值

|参数|default|说明|Fetch API 参数| |---|----|----|----| |method|POST|请求方式|Y| |credentials|include|默认可以跨域请求|Y| |headers|'Accept': 'application/json' 'Content-Type':'application/json'|数据类型JSON|Y| |dataType|json|收发数据类型json|N| |x-timeout|5000ms|超时时间|N| |x-silent|false|用于在hook或handler控制loading是否静默|N| |x-message|true|用于在hook或handler控制是否展示异常等逻辑，可以配合ui-dialog。|N|

全局配置与局部配置

可以使用apify的option来配置所有方法，

let option = {
    'x-timeout': 1000 * 10
};

apify(request.post, list, option);

发送请求时可以对当前方法进行最终配置

api.getUser(null, {
    timeout: 1000 * 6,
    dataType: 'formData' // formdata需要在payload handler中支持
})
    .then()
    .catch();

import {apify, request} from 'i-apify';

let list = {
    getUser: '/api/v1/getUser',
};

let option = {
    hook: {
        beforeRequest({option}) {
            if (!option['x-silent']) {
                ui.loading.show();
            }
        },
        requestSuccess(data) {
            if (!option['x-silent']) {
                ui.loading.hide();
            }
        }
    },
    handler: {
        success(data, option) {

        },
        error(error, option) {
            if (option['x-message']) {
                ui.alert(error.message);
            }
        }
    }
};

let api = apify(request.post, list, option);

// 请求时会有loading，错误会弹窗提示
api.getUser(null)
    .then()
    .catch();

// 局部配置会覆盖全局配置
// 请求时不会有loading，错误不会弹窗提示
api.getUser(null, {
    'x-silent': true,
    'x-message': false,
})
    .then()
    .catch();

通过apify, 或者api.method的option参数可以使用所有fetch api的配置参数。

fetch option

关于fetch api, 可以通过option直接支持fetch api的配置。 Fetch api

let option = {
    method: 'GET',
    mode: 'cors',
    cache: 'default' 
};

// global

apify(request.post, list, option);

// local
api.getUser(payload, option);

hook

通过hook函数可以对请求流程进行精细控制

hook fetch进程钩子函数

|函数名|调用阶段| |----|----| |beforeRequest(option)|发送请求前执行| |timeout(option)|超时时执行| |requestSuccess(option, response)|请求成功后执行| |afterParse(option, data)|解析fetch的response后执行| |requestFail(option, error)|请求失败后执行|

handler 请求后数据处理函数

使用handler可以对请求成功或者失败后对所所获取的数据或逻辑进行最后处理

|参数|说明| |----|----| |data|通过fetch api所获得的数据| |option|请求时使用的最终配置|

handler配置

import {apify, request} from 'i-apify';

let list = {
    getUser: '/api/v1/getUser',
};

let option = {
    handler: {
        success(result, option) {
            // 可以在这里把数据处理成自己想要对格式
        },
        error(data, option) {
            // 可以在这里把数据处理成自己想要对格式
            return data;
        },
        payload(data, option) {
            // 可以在这里对fetch的option 进行处理
            /* global cleenDeep */

            return cleenDeep(data);
        }
    }
}

export default apify(request.post, list, option);

配合async awiat 使用

let option = {
    handler: {
        success(data, option) {
            // 可以在这里对response在进行细分
            if (data) {
                return Promise.resolve(data);
            }
            
            return Promise.reject([1, 2, 3]);
        }
    }
}

async function () {
    try {
        await api.getUser();
    }
    catch({data}) {
        console.log(data) // [1, 2, 3]
    }
}

fetch 默认支持的参数

'method',        // GET/POST等
'headers',       // 一个普通对象，或者一个 Headers 对象
'body',          // 传递给服务器的数据，可以是字符串/Buffer/Blob/FormData，如果方法是 GET/HEAD，则不能有此参数
'mode',          // cors / no-cors / same-origin， 是否跨域，默认是 no-cors
'credentials',   // omit / same-origin / include
'cache',         // default / no-store / reload / no-cache / force-cache / only-if-cached
'redirect',      // follow / error / manual
'referrer',      // no-referrer / client / 或者一个url
'referrerPolicy',// no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
'integrity'      // 资源完整性验证

Building & Testing

Building

    npm run build

testing

    npm run test

License MIT