fetch+promise

fetch+promise

我知道的是针对一个请求的，且返回promise对象，then中以resolve接收response，下面先简单介绍下组合使用场景

一、结合超时处理

//基本配置参数
let defaultOption = {    
    timeout: 5000,    
    method: 'post',             
    data: null,                              
    before: () => {  }
    after: () => {  },
    success: (result) => { console.log(`request success, result is ${result}`) },          
    error: (errorMsg, errorStatus) => { console.log(`request error, error is ${errorMsg}`) }
}

//获取fetch配置参数，可以参考网上相关说明
const getFetchOption = (_fo = {}) => {
    let fo = {
        credentials: 'same-origin',     // 提交的时候包含
        mode: 'cors',                   // 支持跨域
        method: 'post',
        body: null,
        headers: {
            "Accept": "application/json",   // 返回值为json
            "Content-Type": "application/json;charset=utf-8"
        }
    }
    if(_fo.body) {
        if(typeof _fo.body == 'object') _fo.body = JSON.stringify(_fo.body);
    }
    return Object.assign(fo, _fo);
}

//包装fetch与timeout
const getRequestPromise = (url, option = {}) => {
    let _option = Object.assign({}, defaultOption, option);
    let _timeout = null;
    //超时promise
    _option.before();
    let timeoutPromise = new Promise((resolve, reject) => {
        _timeout = setTimeout( () => {
            throw new Error('timeout');
        }, _option.timeout );
    });
    let fetchPromise = new Promise((resolve, reject) => {
        fetch(url, getFetchOption({ method: _option.method, body: _option.data }))
        .then(
            response => {
               if(response.status >= 200 && response.status <= 300) return response.json();
               else {
                   let error = new Error(response.status);
                   error.response = response;
                   reject(error);
               }
           }
        )
        .then(
            result => resolve(result)
        )
        .finally(
            () => {
                clearTimeout(_timeout);
                _option.after();
            }
        )
    });
    let _promise = Promise.race([fetchPromise, timeoutPromise]);
    return {  _promise: _promise, _option: _option };
}

二、单个请求

//请求（单个）
const request(url, option = {}) {
    let { _promise, _option } = getRequestPromise();
    _promise.then(
        result => _option.success(result)
    ).catch(
        error => _option.error(error)
    )
}

//demo
request('your request url', /*{ ... }*/)

三、多个请求

//请求（多个）
const requests(...param) {
    let promises = param.map((_param, _index) => {
        let { url, option } = _param;
        let { _promise, _option } = getRequestPromise(uri, option);
        return new Promise((resolve, reject) => {
            _promise.then(
                result => resolve({ result: result, success: _option.success })
            ).catch(
                error => reject({er: error, error: _option.error})
            )
        });
    });
    Promise.all(promises)
    .then(
        objs => { objs.forEach((obj, index) => { obj.success && obj.success(obj.result) }) }
    )
    .catch(
        e => { e.error && e.error(e.er) }
    )
}

//demo
requests({url: 'your request url', /*option: { ... }*/}, {url: 'your request url', /*option: { ... }*/}...)