浏览器中的 API 响应与代码中的响应不同
Posted
技术标签:
【中文标题】浏览器中的 API 响应与代码中的响应不同【英文标题】：API response in the browser different from the one in the code 【发布时间】：2018-10-28 23:15:20 【问题描述】：这是我的代码：
async function BuiltWithCall(website)
var domainCall = `https://api.builtwith.com/v12/api.json?KEY=$keys.builtWith&LOOKUP=$website`;
var domainRes = await fetch(domainCall);
console.log(domainRes);
var keywordCall = `https://api.builtwith.com/kw1/api.json?KEY=$keys.builtWith&LOOKUP=$website`;
var keywordRes = await fetch(keywordCall);
console.log(keywordRes);
return await 'domRes': domainRes.json(), 'kwRes': keywordRes.json();
它获取提供的网站并通过 BuiltWith API 运行它。但问题在于响应。
Response
size: 0,
timeout: 0,
[Symbol(Body internals)]:
body:
PassThrough
_readableState: [Object],
readable: true,
domain: null,
_events: [Object],
_eventsCount: 7,
_maxListeners: undefined,
_writableState: [Object],
writable: true,
allowHalfOpen: true,
_transformState: [Object] ,
disturbed: false,
error: null ,
[Symbol(Response internals)]:
url: 'https://api.builtwith.com/v12/api.json?KEY=key&LOOKUP=hotelscombined.com',
status: 200,
statusText: 'OK',
headers: Headers [Symbol(map)]: [Object]
Response
size: 0,
timeout: 0,
[Symbol(Body internals)]:
body:
PassThrough
_readableState: [Object],
readable: true,
domain: null,
_events: [Object],
_eventsCount: 3,
_maxListeners: undefined,
_writableState: [Object],
writable: false,
allowHalfOpen: true,
_transformState: [Object] ,
disturbed: false,
error: null ,
[Symbol(Response internals)]:
url: 'https://api.builtwith.com/kw1/api.json?KEY=key&LOOKUP=hotelscombined.com',
status: 200,
statusText: 'OK',
headers: Headers [Symbol(map)]: [Object]
所以这对我来说毫无意义。因为这是完全相同的 URL，所以在浏览器中运行：
"Keywords": [
"Domain": "hotelscombined.com",
"Keywords": [
"compare",
"save",
"cheap",
"hotel",
"deal",
"hotelscombined",
"search",
"... More keywords but you get the idea"
]
],
"Errors": []
;
其他呼叫响应：
"Results": [
"Result":
"IsDB": true,
"Spend": 609,
"Paths": [
"FirstIndexed": 1294059600000,
"LastIndexed": 1526338800000,
"Domain": "builtwith.com",
"Url": "",
"SubDomain": "",
"Technologies": [
"Categories": [
"Edge Delivery Network"
],
"IsPremium": "yes",
"Name": "Amazon CloudFront",
"Description": "Amazon CloudFront delivers your static and streaming content using a global network of edge locations.",
"Link": "http://aws.amazon.com/cloudfront/",
"Tag": "cdns",
"FirstDetected": 1386284400000,
"LastDetected": 1526338800000
,
]
,
]
,
"Meta":
"Vertical": "Technology And Computing",
"Social": [
"http://twitter.com/builtwith",
"http://facebook.com/builtwith",
"http://linkedin.com/company/builtwith",
"http://google.com/+builtwithdotcom"
],
"CompanyName": "BuiltWith",
"Telephones": [
"+61-300-558745",
"+1-650-618-3949"
],
"Emails": [
"support@builtwith.com"
],
"City": "Sydney",
"State": "NSW",
"Postcode": "2000",
"Country": "AU",
"Names": [
"Name": "N/A",
"Type": 0,
"Email": "n/a@builtwith.com"
,
"Name": "N/A",
"Type": 0,
"Email": "n/a@builtwith.com"
],
"ARank": 22108,
"QRank": 275921
,
"Attributes":
"MJRank": 8737,
"MJTLDRank": 4620,
"RefSN": 7402,
"RefIP": 10142,
"TTFB": 129,
"Sitemap": 20,
"GTMTags": 0,
"QubitTags": 0,
"TealiumTags": 0,
"AdobeTags": 0,
"CDimensions": 0,
"CGoals": 0,
"CMetrics": 0,
"SourceBytes": 0
,
"FirstIndexed": 1294059600000,
"LastIndexed": 1526338800000,
"Lookup": "builtwith.com"
],
"Errors": []
所以你可以看到反应完全不同，我不知道为什么。相同的 fetch 方法非常适用于 PageSpeed API，但这里出现了可怕的错误。
PageSpeed 调用：
async function PageSpeedCall(website)
var pagespeedCall = `https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://$website&strategy=mobile&key=$keys.pageSpeed`;
// second call
var results = await fetch(pagespeedCall);
return await results.json();
我做错了什么？
【问题讨论】：
【参考方案1】：domainRes 是一个响应对象，而不是有效负载。这就是您在控制台输出中看到所有内容的原因。
要将有效负载解析为 JSON，您需要调用 domainRes.json，这也会给您一个承诺，因此您必须等待它。像这样。
async function BuiltWithCall(website)
var domainCall = `https://api.builtwith.com/v12/api.json?KEY=$keys.builtWith&LOOKUP=$website`;
var domainRes = await fetch(domainCall);
console.log(domainRes);
var keywordCall = `https://api.builtwith.com/kw1/api.json?KEY=$keys.builtWith&LOOKUP=$website`;
var keywordRes = await fetch(keywordCall);
console.log(keywordRes);
return 'domRes': await domainRes.json(), 'kwRes': await keywordRes.json();
【讨论】：
当我这样做时，我控制台记录它，我得到这个：["domRes":,"kwRes":,"domRes":,"kwRes":]
“为什么需要它？” await 仅适用于承诺。 await key: aPromise 不起作用，因为您正在等待对象。 await 不检查对象。
好的。我觉得我明白了。谢谢！以上是关于浏览器中的 API 响应与代码中的响应不同的主要内容，如果未能解决你的问题，请参考以下文章