fetch

7 5月

fetch常用的库有whatwg-fetchnode-fetchisomorphic-fetch

h5项目中用的是whatwg-fetch,本质上就是为不支持fetch的浏览器做了polyfill。node-fetch是基于http库运行在node环境。但通常用isomorphic-fetch,本质上就是对前两者的封装,同时支持在浏览器和node上运行。

同构项目中用isomorphic-fetch,axios的都有,差别不大,用啥都行。

whatwg-fetch本身比较简单,源代码也不长,不赘述。项目中直接用whatwg-fetch库的话,不太适合团队维护,最好进行二次封装,尽量开箱即用,避免每个人的fetch写的都不一样。

例如设个超时时间,用promise.race很容易实现:(伪代码)

const timeoutPromise = async(timeout) => {
    await sleep(timeout);
    throw new TimeoutError(timeout);
};

export default async(config) => {
    const {
        timeout = 60000,
        ...fetchConfig
    } = config;

    return await Promise.race([timeoutPromise(timeout), sendRequest(fetchConfig)]);
};

whatwg-fetch默认是不发送cookie的,不管是同域还是跨域,所以二次封装时,无脑封装一下options参数:

const basicFetchOptions = {
    credentials: 'include', // cookie既可以同域发送,也可以跨域发送。
    // credentials 默认值是 omit 表示不发送cookie,还可以设为 same-origin 表示cookie只能同域发送,不能跨域发送
};

Post可以根据是否是Json格式进行封装:

if ( /* 正则判 headers['Content-Type'] 是否是 application/json */ ) {
    options.body = JSON.stringify(data);
} else {
    options.body = querystring.stringify(data));  // data 记得事先扁平化处理下
}
options.headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', // file 会用组件封装单独处理
    ...options.headers,
};

还需要根据业务特性和项目结构,封装:返回值,异常,mock数据,缓存数据(弄个eventBus,请求状态标记为ing或done,在第一个请求request和response期间,相同的请求都返回和第一个请求相同的response)等。封装个团队能用的fetch不难,但细节较多。

发表评论

电子邮件地址不会被公开。 必填项已用*标注