基于typeScript请求服务端的js-api-sdk统一封装思路

项目地址

在前端开发中向服务端请求数据是非常重要的，特别是在复杂的项目中对后台的api接口进行友好的调用是非常重要的（这里不得不说typeScript写起代码的体验是很爽的）。

基本思路，可以想后台一样进行接口封装，比如用户相关的接口一个MemberServices 里面有关于用户所有的api接口 例如getMemberById等，这样尽量语义话的调用。

思路如下：
(1)首先抽象出一个Api请求的对象接口（抽象类）

/**
 * Api客户端请求接口
 */
export abstract class ApiClientInterface<T> {

    /**
     * 请求服务端client工具对象
     * 非必填
     */
    private _client?: any;

    constructor(client: any) {
        this._client = client;
    }


    get client(): any {
        return this._client;
    }

    /**
     * post请求
     * @param option
     */
    post = (option: T): any => {
    }

    /**
     * get请求
     * @param option
     */
    get = (option: T): any => {
    }

    /**
     * 抓取数据
     * @param option
     */
    fetch = (option: T): any => {
    }
}

其中这个泛型T是一个请求配置对象，可以根据不同的项目或者是实现进行切换，这里提供一个基于阿里weex开源项目中stream请求对象封装的 ApiClient和API配置对象的示例

/**
 * 请求服务端的api统一接口失效
 */
class ApiClient extends ApiClientInterface<WeexStreamOption> {


    /**
     * @param client WEEX 中的steam对象
     */
    constructor(client: any) {
        super(client);
    }

    /**
     * post请求
     *
     */
    post = (option: WeexStreamOption) => {
        option.method = ReqMethod.POST;
        return this.fetch(option);
    }


    /**
     * get请求
     */
    get = (option: WeexStreamOption) => {
        option.method = ReqMethod.GET;
        return this.fetch(option);
    }


    /**
     * 获取数据
     * @param option
     * 默认 Content-Type 是 ‘application/x-www-form-urlencoded’。
     * 如果你需要通过 POST json ， 你需要将 Content-Type 设为 ‘application/json’。
     */
    fetch = (option: WeexStreamOption): any => {

        option.data = isUndefined(option.data) ? {} : option.data;
        const sign = this.sign(option.signFields, option.data);  //获取签名字符串

        if (option.method === ReqMethod.GET) {
            //拼接参数
            let params = null;

            if (option.url.indexOf("?") > 0) {
                params = "&";
            } else {
                params = "?";
            }
            params += this.joinParamByReq(option.data);
            option.url += params;
            option.url += "&sign" + sign;
        } else if (option.method === ReqMethod.POST) {
            option.data['sign'] = sign;
        }

        console.log("请求url--> " + option.url);
        console.log("请求method--> " + option.method);
        console.log("请求headers--> " + option.headers);
        console.log("请求params--> " + JSON.stringify(option.data));

        option.type = isUndefined(option.type) ? DataType.JSON : option.type;

        let num = Math.round(Math.random() * 20)
        let data = {
            isSuccess: num % 2 === 0,
            num: num
        };
        option.progressCallback(data);
        setTimeout(function () {
            option.callBack(data);
        }, 1500)

        //WEEX stream对象 https://weex.apache.org/cn/references/modules/stream.html
        // this.client.fetch({
        //     method: ReqMethod[option.method],               //请求方法get post
        //     url: option.url,                     //请求url
        //     type: DataType[option.type],                    //响应类型, json,text 或是 jsonp {在原生实现中其实与 json 相同)
        //     headers: option.headers,             //headers HTTP 请求头
        //     body: JSON.stringify(option.data)     //参数仅支持 string 类型的参数，请勿直接传递 JSON，必须先将其转为字符串。请求不支持 body 方式传递参数，请使用 url 传参。
        // }, function (response) {
        //     console.log(response);
        //     /**
        //      * 响应结果回调，回调函数将收到如下的 response 对象：
        //      * status {number}：返回的状态码
        //      * ok {boolean}：如果状态码在 200~299 之间就为真
        //      * statusText {string}：状态描述文本
        //      * data {Object | string}: 返回的数据，如果请求类型是 json 和 jsonp，则它就是一个 object ，如果不是，则它就是一个 string。
        //      * headers {Object}：响应头
        //      */
        //     if (!response.ok) {
        //         //请求没有正确响应
        //         console.log("响应状态码：" + status + " 状态描述：" + response.statusText);
        //         return;
        //     }
        //     option.callBack(response.data, response.headers);
        // }, function (resp) {
        //     console.log(resp);
        //     /**
        //      * 关于请求状态的回调。 这个回调函数将在请求完成后就被调用:
        //      * readyState {number}：当前状态state:’1’: 请求连接中opened:’2’: 返回响应头中received:’3’: 正在加载返回数据
        //      * status {number}：响应状态码.
        //      * length {number}：已经接受到的数据长度. 你可以从响应头中获取总长度
        //      * statusText {string}：状态文本
        //      * headers {Object}：响应头
        //      */
        //
        //     if (option.progressCallback === null) {
        //         return;
        //     }
        //     option.progressCallback(resp);
        // });
    }

    /**
     * 将一个对象转换成url参数字符串
     * @param req
     * @return {string}
     */
    private joinParamByReq(req: Object): String {

        var result = "";
        for (let key in req) {
            result += key + "=" + req[key] + "&";
        }
        result = result.substr(0, result.length - 1);

        return result;
    }

    /**
     * ap请求时签名
     * @param fields
     * @param params
     * @return {string}
     */
    private sign = (fields: Array<String>, params: Object): String => {

        if (isUndefined(fields) || isNull(fields)) {
            return "";
        }
        let value = "";
        fields.forEach(function (item) {
            let param = params[item.toString()];
            if (isUndefined(param)) {
                // console.warn("参与签名的参数：" + item + " 未传入!");
                throw new Error("参与签名的参数：" + item + " 未传入!");
            }
            value += item + "=" + param + "&";
        });
        value = "timestamp=" + params['timestamp'];  //加入时间戳参与签名
        let sign = md5(value);

        return sign;
    }

}
export default ApiClient;

/**
 * weex stream请求参数对象
 */
export interface WeexStreamOption {

    /**
     * 请求url
     */
    url?: String;

    /**
     * 请求方法
     */
    method?: ReqMethod;

    /**
     * 结果数据类型
     */
    type?: DataType;

    /**
     * 请求头
     */
    headers?: Object;

    /**
     * 请求参数，仅post请求需要
     */
    data?: Object;

    /**
     * 参与签名的参数列表
     */
    signFields?:Array<String>;

    /**
     * 响应回调
     */
    callBack?:Function;

    /**
     * 关于请求状态的回调。 这个回调函数将在请求完成后就被调用:
     */
    progressCallback?:Function;
}

(2) 提供一个统一的实现，减少工作量，比起前端不是后端，不可能每一个接口都去实现一次，而且接口的流程非常统一，都是获取数据，只不过是url不同，参数不同，结果处理不同罢了。（这边实现使用Proxy对象）
抽象一个ServiceProxy对象

import ApiClient from "../ApiClient";
import {isUndefined} from "util";
import {DataType} from "./DataType";
import {ReqMethod} from "./ReqMethod";


/**
 * 服务代理
 */
export default class ServiceProxy {


    /**
     *
     * @param client       用于请求数据的客户端对象，非必填
     * @param handler      接口对象
     * @return {ServiceProxy} 返回代理对象
     */
    constructor(client: any = null) {

        const api = new ApiClient(client);
        const handler = this;
        console.log(handler);
        console.log(api)
        return new Proxy({}, {
            get: function (target, key, receiver) {
                return function () {
                    let params = arguments[0];
                    let options = arguments[1];
                    let methodName = arguments[2].toUpperCase();      //请求方法
                    let resultDataType = arguments[3].toUpperCase();  //结果数据类型
                    return new Promise(function (resove, reject) {
                        let config = handler[key]();  //获取配置
                        if (isUndefined(config)) {
                            throw new Error("请求的方法: " + key.toString() + " 未定义");
                        }
                        options.url = config.url;                 //请求的url
                        options.signFields = config.signFields;   //参与签名的请求参数
                        options.method = isUndefined(methodName) ? config.method : ReqMethod[methodName];        //请求方法 post、get
                        options.type = isUndefined(resultDataType) ? DataType.JSON : DataType[resultDataType];  //结果数类型
                        options.callBack = function (data) {
                            console.log("api接口" + config.url + " 返回数据-> " + data);
                            if (data.isSuccess) {
                                resove(data);
                            } else {
                                reject(data)
                            }
                        };
                        options.data=params;
                        let method = ReqMethod[options.method];
                        console.log(options);
                        api[method.toLowerCase()](options);
                    });
                };
            },
            set: function (target, key, value, receiver) {
                throw new Error("接口不允许设置值!");
            }
        });
    }
}
（3）剩下的就是写具体的实现了，示例如下：

import ServiceProxy from “./api/base/ServiceProxy”;
import ApiConfig from “./api/base/ApiConfig”;
import {WeexStreamOption} from “./api/WeexStreamOption”;
import {TestReq} from “./TestReq”;

/**
* 测试服务接口
*/
export default class TestService extends ServiceProxy {

constructor(client?: any) {
    super(client);
}


/**
 * 该方法写法固定，可以考虑使用自动生成
 * @param params 请求参数
 * @param option 请求配置
 * @param method 请求类型
 * @param dataType 结果数据类型
 * @return {ApiConfig}
 */
testApi(params: TestReq, option: WeexStreamOption = {}, method?: String, dataType?: String): any {

    return ApiConfig.newInstance("/api/test.htm", ["userName", "phoneCode"]);
};

}
服务中的方法实现非常统一，只是方法名和放回的ApiConfig对象中的数据不一样。这样实现以后对于服务调用就非常清晰了。

更多细节可以参考代码，项目地址在文章开头。