react fetch封装

reruest.js:

/**
 * 让fetch也可以timeout
 *  timeout不是请求连接超时的含义，它表示请求的response时间，包括请求的连接、服务器处理及服务器响应回来的时间
 * fetch的timeout即使超时发生了，本次请求也不会被abort丢弃掉，它在后台仍然会发送到服务器端，只是本次请求的响应内容被丢弃而已
 * @param {Promise} fetch_promise    fetch请求返回的Promise
 * @param {number} [timeout=120000]   单位：毫秒，这里设置默认超时时间为10秒
 * @return 返回Promise
 */
import {fetch} from 'whatwg-fetch';
let queryString=require('querystring');
function timeout_fetch(fetch_promise,timeout = 120000) {
    let timeout_fn = null; 

    //这是一个可以被reject的promise
    let timeout_promise = new Promise(function(resolve, reject) {
        timeout_fn = function() {
            reject('timeout promise');
        };
    });

    //这里使用Promise.race，以最快 resolve 或 reject 的结果来传入后续绑定的回调
    let abortable_promise = Promise.race([
        fetch_promise,
        timeout_promise
    ]);

    setTimeout(function() {
        timeout_fn();
    }, timeout);

    return abortable_promise ;
}

let common_url = '/';  //服务器地址
let token = '';   
/**
 * @param {string} url 接口地址
 * @param {string} method 请求方法：GET、POST，只能大写
 * @param {JSON} [params=''] body的请求参数，默认为空
 * @return 返回Promise
 */
export function fetchRequest(url, method="GET", params = ''){
    let header = {
        "Content-Type": "application/json;charset=UTF-8",
        "accesstoken":token  //用户登陆后返回的token，某些涉及用户数据的接口需要在header中加上token
    };
    // console.log('request url:',url,params);  //打印请求参数
    if(method === 'GET'){   //如果网络请求中带有参数
        let urlStr=common_url + url;
        if(params){
            urlStr=urlStr+"?"+queryString.stringify(params);
        }
        return new Promise(function (resolve, reject) {
            timeout_fetch(fetch(urlStr, {
                method: method,
                headers: header
            })).then((response) => response.json())
                .then((responseData) => {
                    // console.log('res:',url,responseData);  //网络请求成功返回的数据
                    resolve(responseData);
                })
                .catch( (err) => {
                    // console.log('err:',url, err);     //网络请求失败返回的数据        
                    reject(err);
                });
        });
    }else{   //如果网络请求中没有参数
        return new Promise(function (resolve, reject) {
            timeout_fetch(fetch(common_url + url, {
                method: method,
                headers: header,
                body:JSON.stringify(params)   //body参数，通常需要转换成字符串后服务器才能解析
            })).then((response) => response.json())
                .then((responseData) => {
                    //console.log('res:',url, responseData);   //网络请求成功返回的数据
                    resolve(responseData);
                })
                .catch( (err) => {
                  //  console.log('err:',url, err);   //网络请求失败返回的数据  
                    reject(err);
                });
        });
    }
}

使用：

import {fetchRequest} from '../../utils/request';
export function getAeticle(obj){
   return fetchRequest('api/article/getarticle','GET',obj)
}

export function getArtinfo(obj){
   return fetchRequest('api/article/getartinfo','POST',obj);
}