相信每个**‘同构开发者’**都听说过_isomorphic-fetch_这个神奇的函数,它是_Node.js_和_Browser_都发送API请求的实现。

使用双方、服务器和浏览器编写一次

要检查这些测试是如何实现的,请从 git](https://github.com/wahengchang/isomorphicfetch-must-know?ref=hackernoon.com)克隆[存储库。

isomorphic-fetch 的介绍

安装

$ npm install --save isomorphic-fetch es6-promise

并在Node.js服务器的入口处导入

require('es6-promise').polyfill();require('isomorphic-fetch');

使用 fetch() 的正确方法,使用 resposne.text() 解析文本响应,以及 resposne.json() 解析来自服务器的 json 响应:


<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*J-n0ZP2RfsqoYBqi3VZatg.jpeg&wu003d828&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*J-n0ZP2RfsqoYBqi3VZatg.jpeg&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*J-n0ZP2RfsqoYBqi3VZatg.jpeg&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">

文字回复


<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*7dV_yci7NglmX0n5RRFVFw.jpeg&wu003d828&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*7dV_yci7NglmX0n5RRFVFw.jpeg&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*7dV_yci7NglmX0n5RRFVFw.jpeg&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">

json响应

同构提取的棘手部分

根据我的经验,fetch() 非常好用,节省了我很多时间来构建同构网站,但是当出现错误或异常时它太安静了,我花了很多时间来找出错误。

我尝试 fetch() 的方式是创建一个简单的 Express.js 服务器,有 5 种不同的情况:

1. 回复 text 和 200 状态码

2. 响应 json 和 200 状态码

3. 回复 text 和 400 状态码

4. 响应 json 和 400 状态码

5.响应任何结果在一段时间内(超时)

当我使用不正确的方法处理这些情况时,找出 fetch() 中实际发生的情况。

1.通过 response.json() 解析文本响应

它去异常


<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*geZWo4WoBIvyNq-IK1Mvyw.jpeg&wu003d828&qu003d75 1x, /\ _next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*geZWo4WoBIvyNq-IK1Mvyw.jpeg&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A %2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*geZWo4WoBIvyNq-IK1Mvyw.jpeg&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left :0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;最大宽度:100%;最小高度:100%;最大高度:100%;对象适配:包含" classu003d"image" loadingu003d"lazy">

2.通过 response.text() 解析 json 响应

它响应为 String 类型


<img altu003d"image" srcsetu003d"/_next/image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*_9NyUbES9HUuGv9Cd1YPVw.jpeg&wu003d828&qu003d75 1x, /_next /image?urlu003dhttps%3A%2F%2Fcdn.hackernoon.com%2Fhn-images%2F1*_9NyUbES9HUuGv9Cd1YPVw.jpeg&wu003d1920&qu003d75 2x" srcu003d"/_next/image?urlu003dhttps%3A%2F %2Fcdn.hackernoon.com%2Fhn-images%2F1*_9NyUbES9HUuGv9Cd1YPVw.jpeg&wu003d1920&qu003d75" 解码u003d"async" data-nimgu003d"intrinsic" styleu003d"position:absolute;top:0;left:0;底部:0;右侧:0;框尺寸:边框框;填充:0;边框:无;边距:自动;显示:块;宽度:0;高度:0;最小宽度:100%;最大宽度:100%;最小高度:100%;最大高度:100%;object-fit:contain" classu003d"image" loadingu003d"lazy">

3.超时处理不可能

fetch() 不支持超时处理,它可以等到我们死掉并且没有响应。绕过方式是我们自己创建一个 timeoutPromise 包装器。

这是@alcat2008在git issue中建议的解决方案:

var p = Promise.race([  fetch('/resource-that-may-take-a-while'),  new Promise(function (resolve, reject) {    setTimeout(() => reject(new Error('request timeout')), 5000)  })])

p.then(response => console.log(response))p.catch(error => console.log(error))

喜欢这个故事吗?对别人有帮助吗?它可以帮助我知道您是否想看到更多关于他的主题的文章,并帮助人们看到这个故事,当点击下面的心脏时。

参考:

https://www.npmjs.com/package/isomorphic-fetch

https://github.com/wahengchang/isomorphicfetch-must-know