javascript - 浏览器中的 API 响应与代码中的响应不同

Question

这是我的代码:

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": []
}

正如你所看到的， react 完全不同，我不知道为什么。同样的获取方法对于 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();
}

我做错了什么？

Answer 1

domainRes 是一个响应对象，而不是有效负载。这就是为什么您会在控制台输出中看到所有内容。

要将有效负载解析为 JSON，您需要调用 domainRes.json，它也会给您一个 promise ，因此您必须等待它。像这样。

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()};
}