将 fetch 与 async/await 一起使用会返回 [object Object]

Posted 2023-02-19

【中文标题】将 fetch 与 async/await 一起使用会返回 [object Object]

【英文标题】：Using fetch with async/await returns [object Object]

【发布时间】：2018-03-04 14:14:29

【问题描述】：

我正在尝试使用带有 async 和 await 的 fetch 来获取这个公共 API，但是 fetch 方法返回一个 [object Object]：

我用来获取 API 的类：

class FetchAnimalApi 
  async getAnimalInfo(animal) 
    const request = await fetch(`http://my_api_url.com/$animal`);
    const response = await request.json();

    return `$animal goes like $response.sound`;
  

API 返回的结构（如果动物是猪）：

"color": "pink", "sound": "roinc"

我正在将我的课程导入另一个文件并将其命名为：

const animals = new FetchAnimalApi();
console.log(animals.getAnimalInfo('pig'));

那么，我做错了什么？

编辑：

现在我的 console.log() 准确地显示了我想要打印的内容，但是当我返回响应时，我仍然得到 [object Object]：

function getInfo() 
  const animals = new FetchAnimalApi();

  return animals.getAnimalInfo('pig').then(result => result);

在调试时，我意识到 [object Object] 在const request = await fetch(http://my_api_url.com/$animal) 行执行后立即打印在我的屏幕上。

【问题讨论】：

[object Object] 可能只是因为最终输出中的字符串转换。如果您直接console.log() 输出，您应该会看到所需的对象。您不能将对象放入模板文字并打印出属性。此外，getAnimailInfo() 返回一个承诺。因此，您必须使用 await 或 .then() 从该承诺中获取价值。

@jfriend00 您不能将对象放入模板文字中并打印出属性？你为什么这么认为？

@alexmac：因为模板文字将它们的“参数”转换为字符串，并且对象的默认字符串表示是[object Object]，即不是属性列表。

因为模板文字对对象进行字符串转换，而对象的默认字符串转换为您提供[object Object]。请参阅控制台输出：jsfiddle.net/me0g20cx。如果需要，您可以在对象上覆盖 .toString() 并提供自定义字符串转换，但模板文字本身不会这样做。

@jfriend00 是的，我知道。我只是不明白它与这个问题有什么关系。在上面的模板字符串中，两个变量都是字符串，而不是对象。

【参考方案1】：

你不能用这种方式打电话给console.log(animals.getAnimalInfo('pig'));。 animals.getAnimalInfo 返回一个承诺。要获得结果，您应该使用then 回调：

const animals = new FetchAnimalApi();
animals
  .getAnimalInfo('pig')
  .then(result => console.log(result));

【讨论】：

由于 OP 在其他任何地方都使用await，因此答案可能也应该提供await 作为选项，而不仅仅是.then()。

我想用async/await 提出一个解决方案，但在这种情况下没有意义。创建一个新函数只是为了打印getAnimalInfo()...的结果...

帮了我一点忙！但仍然没有成功）：我编辑了这个问题，没有进一步解释。

@Anna 你如何使用getInfo()？如果是这样：console.log(getInfo())，那么它仍然不正确。 getInfo 返回一个 promise，你需要使用 then 回调来获取结果。

getInfo() 的结果被设置为计算属性（我使用的是 Ember）。打电话给animals.getAnimalInfo('pig').then(result => result) 时，我已经兑现了承诺，不是吗？我只需要 getInfo() 来保存格式化的输入。