获取 returns 个未解决的`[对象响应]`

Question

我正在尝试使用他们的 API 从 Hubspot 获取最新的博客 posts，为此我必须使用 2 个端点（1 个用于博客 posts 和1 个用于每个博客的标签信息 post).

第一个电话带回最新的博客 posts。然后，对于每个博客 post，我需要检索其标签的信息，post 具有。

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

  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() 部分尚未解析。它returns [object Response].

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

只是为了举例说明 tag 数据对象的样子，对于 ID 为 41520763199 的标签，其数据如下所示。这是我应该得到的响应而不是承诺对象。

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

Answer 1

fetch 将 return 一个 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
    };
}

Answer 2

它没有返回承诺。根据此 fetchAPI resource

，承诺被解析为 Response 对象

您会发现有用的方法之一是 Response.json returns 一个 promise，其解析结果是将响应正文文本解析为 JSON

举个例子：

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

将导致响应成为响应对象。

 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}

获取 returns 个未解决的`[对象响应]`

Fetch returns unresolved `[object Response]`

fetch

promise

typescript

hubspot

nuxt.js