嵌套 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的结尾锚点。再次感谢大家。虽然这两种方法都有效，但我同意那些建议使用异步/等待的人。对于此任务，这似乎是更干净的方法。

非常感谢，伙计们。