【问题标题】:API response in the browser different from the one in the code浏览器中的 API 响应与代码中的响应不同
【发布时间】: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();
}

我做错了什么?

【问题讨论】:

    标签: javascript node.js api express asynchronous


    【解决方案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 不检查对象。
    • 好的。我觉得我明白了。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-12
    • 1970-01-01
    • 2020-08-25
    • 2017-06-25
    • 1970-01-01
    • 2014-02-08
    相关资源
    最近更新 更多