apify-fin v0.0.2

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处理后的函数使用

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及初始值

全局配置与局部配置

可以使用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();
            }
        }
    },
    handler: {
        error(error, option) {
            let {data, message} = error;
            
            if (option['x-message']) {
                ui.alert(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进程钩子函数

handler 请求后数据处理函数

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

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(result, option) {
            // 可以在这里对response在进行细分
            if (result.success) {
                return result.data;
            }
            
            return Promise.reject({data: [1, 2, 3]});
        }
    }
}

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

Building & Testing

Building

    npm run build

testing

    npm run test

License MIT