Fetch 返回未解析的 `[object Response]`答案

【问题标题】：Fetch returns unresolved `[object Response]`Fetch 返回未解析的 `[object Response]`
【发布时间】：2022-02-14 00:50:59
【问题描述】：

我正在尝试使用 Hubspot 的 API 获取最新的博客文章，为此我必须使用 2 个端点（1 个用于博客文章，1 个用于每个博客文章的标签信息）。

第一次调用会带回最新的博客文章。然后，对于每篇博文，我需要检索该博文的标签信息。

以下是实现上述内容的代码，

  async getBlogs(contentGroupID: string = null, limit: number = null) {
    this.url = 'https://api.hubapi.com/cms/v3/blogs/posts?state=PUBLISHED&sort=-publish_date';

    const posts = await useFetch(
      this.url 
      + '&hapikey=' + this.HS_API_KEY
      + (contentGroupID ? '&content_group_id=' + contentGroupID : null)
      + (limit ? '&limit=' + limit : null)
    ).then(response => {
      return response;
    });

    const tags = (posts.data.value as any).results.map(post => fetch(`https://api.hubapi.com/blogs/v3/topics/${post.tagIds[0]+'?hapikey='+this.HS_API_KEY}`));
    const taggs = await Promise.all(tags);

    const payload = new Object();

    payload['blogPosts'] = posts;
    payload['tags'] = taggs;

    return payload;
  }

这是浏览器的响应

如上面的屏幕截图所示，blogPosts 对象已被很好地解析，但用于检索tagIds[0] 的Promise.all() 部分还没有。它返回[object Response]。

我尝试了几种不同的方法来做到这一点，每一种方法总是返回未解析的 Promise 对象。执行此操作并获取实际数据的正确方法是什么？

仅举一个tag数据对象的示例，对于ID为41520763199的标签，其数据如下所示。这是我应该得到的响应而不是 promise 对象。

{
    "categoryId": 3,
    "contentIds": [],
    "created": 1613125431347,
    "deletedAt": 0,
    "description": "",
    "id": 41520763199,
    "language": "en-us",
    "name": "Case Studies",
    "portalId": 2734675,
    "slug": "case-studies",
    "translations": {},
    "updated": 1616091635999
}

【问题讨论】：

Fetch 返回一个 Response 对象，然后您必须使用例如await fetch(...).then(r => r.json())，你也必须等待这个，因为.json()（或其他人）也会返回一个承诺。
@MrCodingB 谢谢，但这是我已经知道的，没有回答我的问题。我将如何解决我的问题？你还有什么要建议的吗？正如您在我的代码中已经看到的那样，我已经将await 用于Promise.all()。
我会写在我的答案中。评论太长了
谢谢，这将非常有帮助。

标签： typescript promise fetch nuxt.js hubspot

【解决方案1】：

它没有返回一个承诺。按照 fetchAPI resource

，承诺被解析为 Response 对象

您会发现其中一个有用的方法是Response.json，它返回一个承诺，该承诺会通过将响应正文文本解析为 JSON 的结果进行解析

举个例子：

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')

将导致 response 成为一个 Response 对象。

 Response {type: 'basic', url: 'https://jsonplaceholder.typicode.com/todos/1', redirected: false, status: 200, ok: true, …}

现在调用：

const json = await response.json()

将导致 json 成为您的实际响应：

{userId: 1, id: 1, title: 'delectus aut autem', completed: false}

【讨论】：

【解决方案2】：

fetch 将返回一个Promise<Response>，要真正从 json 字符串中获取结果为 js 对象，您必须在响应对象上调用 .json()。您可以在 .then 回调中执行此操作，而不必编写两个等待。

async getBlogs(contentGroupID: string = null, limit: number = null) {
    this.url = 'https://api.hubapi.com/cms/v3/blogs/posts?state=PUBLISHED&sort=-publish_date';

    const blogPosts = await useFetch(
      this.url 
      + '&hapikey=' + this.HS_API_KEY
      + (contentGroupID ? '&content_group_id=' + contentGroupID : '')
      + (limit ? '&limit=' + limit : '')
    );

    const tagPromises = (posts.data.value as any).results
        .map(post => fetch(`https://api.hubapi.com/blogs/v3/topics/${post.tagIds[0]+'?hapikey='+this.HS_API_KEY}`)
            .then(r => r.json()));

    const tags = await Promise.all(tagPromises);

    return {
        blogPosts,
        tags
    };
}

【讨论】：

哦，亲爱的.. 我一直在尝试.then() const tags = await Promise.all(tagPromises).then(r => r.json()));，但我总是得到对象响应。我从未在const tagPromises() 上尝试过.then()。谢谢！