对fetch针对RESTful进行再封装

因为后台使用到了RESTful API,而且是使用Token进行认证,所以最好是将fetch再封装一层

首先定义几个常量

  1. 由于API的请求有表单JSON两种,所以先定义好ContentType的常量
  2. RESTful API一般使用五种方法GET/POST/PUT/PATCH/DELETE,也定义为HttpMethod的常量
export const ContentType = {
    JSON : "application/json;charset=UTF-8",
    FORM : "application/x-www-form-urlencoded; charset=UTF-8"
};

export const HttpMethod = {
    GET : "GET",
    POST : "POST",
    PUT : "PUT",
    PATCH : "PATCH",
    DELETE : "DELETE"
};

定义Header的获取函数

由于使用Token认证,所以编写一个getHeaders函数来从Cookie中获取Token

const getHeaders = () => {
    const token = Cookies.get(COOKIE_TOKEN);
    return {
        "Content-Type": ContentType.JSON,
        "Token": token
    }
};

封装请求方法

这里以GET和POST作为举例,然后我们调用方法只需要关注请求的URL以及body即可。

export const _get = (url,body = null) => {
    if(body !== null){
        url = new URL(url);
        Object.keys(body).forEach(key => url.searchParams.append(key, body[key]));
    }

    const promise = fetch(url,{
        method : HttpMethod.GET,
        headers: getHeaders(),
    });
    return handleFetch(promise);
};

export const _post = (url,body) => {
    const promise = fetch(url,{
        method : HttpMethod.POST,
        headers: getHeaders(),
        body : JSON.stringify(body)
    });
    return handleFetch(promise);
};

两个辅助函数

  1. checkStatus用来检查Response的状态是否为200,如果为200则转换为对象,不为200则抛出异常给其他地方处理
  2. handleFetch用来捕获异常并且调用reapop通知请求错误
export const checkStatus = response => {
    if(response.status === 200){
        return response.json();
    }
    else {
        throw new Error();
    }
};

const handleFetch = promise => {
    return promise
        .then(response => checkStatus(response))
        .catch(() => dispatch(error(FAIL_RESULT.message)))
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,948评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,353评论 25 708
  • 一年级陈恩心 2018年2月27日 2018年溜溜梅老师看图说话第1天 一天早晨,阳光明媚,小红和妈妈去买菜...
    的心情阅读 284评论 0 0
  • 春节回家,听说老屋要拆了。 我站在院子里,看着四四方方的老屋寂静无语的傍山伫立。它和村子里大多数的屋子一样...
    xuancao阅读 258评论 1 1
  • 和朋友讲到十八岁,开玩笑说那一年最开心的事就是可以正大光明的去网吧了。而后仔细回忆了一下自己的十八岁,发现迄今为止...
    Lippmann阅读 346评论 0 0