嵌套 JavaScript Fetch

Question

我有一个依赖于另一个 fetch 语句的值的 fetch 语句。当我执行以下命令时，第一个读取成功（返回用户），但依赖于第一个读取值的第二个读取失败，类型错误：提取失败。我已经尝试了对MS Edge，FF和Chrome的测试，结果相同（我也尝试过asnyc / await，这导致了同样的问题）。我已经独立测试了这些调用中的每一个（第二个调用将john-doe硬编码到调用中）。它们独立工作（后端的服务是泽西岛）。

我来自jQuery背景，我会使用$.when来做下面的工作，但我们正试图摆脱办公室里的库和框架。任何帮助将不胜感激。我已经尝试了我在本网站和其他地方找到的所有解决方案，但没有成功。

fetch('/my_services/rest/services/getUser')

.then(function(response) {

  return response.text(); 

})

.then(function(data) {

  alert(data); // correctly displays "john-doe"

  return fetch('/my_services/rest/services/getMetaForUser/' + data); 

})

.then(function(response) {

  return response.text();

})

.then(function(data) {

  alert(data);  

})

.catch(function(error) {

  alert(error); // TypeError: Failed to fetch

});

Answer 1

使用异步等待语法，如下所示： async function yourFunction() {     let response = await fetch(`/first/api...`);     let name = await response.json()     console.log(name)//John     let res = await fetch(`/second/apiwithName....`);     let data = await res.json()     console.log(data)//your data  } yourFunction();

Answer 2

您应该尝试查看第二次抓取是否确实得到响应。如果有效，则可以使用“这应该返回 true”。您也可以使用 检查状态。response.okresponse.status这应该可以帮助您检查错误是否来自代码，或者它是否是网络/ API调用问题。

Answer 3

谢谢大家。当我向我的 onclick 事件处理程序添加“return false”并附加"</a>"此操作失败：<a href onclick="myFunc()">Click to do x...这奏效了：<a href onclick="myFunc(); return false;">Click to do x...</a>不敢相信我错过了一个href的结尾锚点。再次感谢大家。虽然这两种方法都有效，但我同意那些建议使用异步/等待的人。对于此任务，这似乎是更干净的方法。非常感谢，伙计们。