standard-http-client

符合接口规范的 HTTP 客户端(基于 axios)

功能

主要功能

• 遵循接口规范, 当接口调用成功时才会执行 resolve, resolve 时可以便捷地获取到接口规范中的业务数据
• 规范化请求的错误处理, 生成标准的错误码, 并输出错误日志
  • error._desc 错误分类的描述, 例如: 接口调用出错
  • error._errorType 错误分类, 例如: H
  • error._errorNumber 错误编号, 例如: 404
  • error._errorCode 错误码, 例如: H404
• 预留扩展机制, 便于实现定制需求(例如统一开启/关闭 loading)

次要功能

• 扩展 axios 的配置项 _jsonp: 通过 JSONP 机制发送请求, 并支持和 axios 兼容的参数和拦截器
• 扩展 axios 的配置项 _data: 实现类似 jQuery.ajax 的 data 配置项机制

示例

发送请求

import StandardHttpClient from 'standard-http-client';

var httpClient = new StandardHttpClient({ // instance axios Request Config
    withCredentials: true,
    timeout: 10000
});

httpClient.send({ // axios Request Config
    url: 'https://domain.com/path/to/api'
}).then(function([data, response]) {
    // 注意: 这里的 data 是接口规范中的 data 字段, 即接口返回的业务数据
    console.log(data);
});

// 通过 JSONP 发送请求
httpClient.send({
    url: 'https://domain.com/path/to/api',
    _jsonp: true
}).then(function([data, response]) {
    console.log(data);
});

// 通过 _data 发送数据更便捷
httpClient.send({
    url: 'https://domain.com/path/to/api',
    _data: {
        foo: 'bar'
    }
}).then(function([data, response]) {
    console.log(data);
});

hook 机制

import StandardHttpClient from 'standard-http-client';

class HttpClient extends StandardHttpClient {
    constructor(config) {
        super(config);
    }

    beforeSend(config) {
        console.log('before send', config);
    }
    afterSend(responseOrError) {
        console.log('after send', responseOrError);
    }
    handleError(error) {
        console.log('handle error', error);
    }
}

var httpClient = new HttpClient({ // instance axios Request Config
    withCredentials: true,
    timeout: 10000
});

httpClient.send({ // axios Request Config
    url: 'https://domain.com/path/to/api'
}).then(function([data, response]) {
    console.log(data);
});

参考实现: shc-pc

扩展拦截器

import StandardHttpClient from 'standard-http-client';

class HttpClient extends StandardHttpClient {
    constructor(config) {
        super(config);
    }
    useInterceptors() {
        super.useInterceptors();

        // this.agent is an instance of axios
        this.agent.interceptors.request.use(function(config) {
            console.log('HttpClient request config', config);
            return config;
        }, function (error) {
            console.log('HttpClient request error', error);
            return Promise.reject(error);
        });

        this.agent.interceptors.response.use(function(response) {
            console.log('HttpClient response', response);
            return response;
        }, function(error) {
            console.log('HttpClient response error', error);
            return Promise.reject(error);
        });
    }
}

var httpClient = new HttpClient({ // instance axios Request Config
    withCredentials: true,
    timeout: 10000
});

httpClient.send({ // axios Request Config
    url: 'https://domain.com/path/to/api'
}).then(function([data, response]) {
    console.log(data);
});

详见 API 文档