React Native 中的“双重获取”调用问题答案

【问题标题】：Problem with a 'double fetch' call in React NativeReact Native 中的“双重获取”调用问题
【发布时间】：2021-03-28 08:42:09
【问题描述】：

我在 React Native 函数中使用“嵌套”Fetch 调用时遇到问题。似乎第一个 Fetch 可以正常工作，但是第二个会引发错误。代码如下：

     //****CALL TWO FETCH REQUESTS...
const data = { passkey: '12345', callup: 'name' };
const secondary = { passkey: '12345', callup: 'name' };

 fetch('https://myremoteserveraddress', {
   method: 'POST', 
   headers: {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(data),
 })
 .then(function(response) {

   if (response.ok) {
    return response.json();
   } else {
    return Promise.reject(response);
   }

 })
 .then(data => {

  // Store the post data to a variable
  _post = data;
  console.log('Success on FIRST FETCH:', data);
  console.log('answer is:', data.answer);
  console.log('answer is:', _post.answer);

  // Fetch another API
    fetch('https://myremoteserveraddress', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(secondary),
    })

 })
 .then(function (response) {

  if (response.ok) {
    return response.json();
  } else {
    return Promise.reject(response);
  }

 })
 .then(function (userData) {

 console.log('Returned from BOTH fetch calls');  //does not write to console
 console.log(_post, userData);  //does not write to console
 this.vb.start();
 })
 .catch((error) => {
   console.error('Error in onPressPublishBtn:', error);
 });
 //****

似乎第二个 Fetch 调用返回“未定义”，尽管它与似乎成功工作的第一个 Fetch 调用相同。返回的错误是“TypeError: undefined is not an object (evalating 'response.ok')”。如果有人可以就问题所在提出建议，我将不胜感激。提前谢谢你。

【问题讨论】：

您不会在链接的 .then 处理程序中返回第二次提取，因此响应未定义。
感谢您的回复。这解决了这个问题，但是现在我得到了关于“this.vb.start();”的相同错误在第二次 Fetch 调用之后执行的“.then”块中。以前我只使用一个 Fetch 时它工作...有什么想法吗？
stackoverflow.com/questions/20279484/…
再次感谢您提供的信息。很抱歉，我觉得这种恶魔般的语言非常令人费解。从您链接的页面看来，使用箭头函数将是要走的路...但是我不确定如何将“vb.start”传递给它...我使用了“hello = () => {vb .start();}" 在两个 Fetch 语句之后执行的那个 ".then" 中。我没有收到错误，但它似乎也没有完成任何事情，它似乎被忽略了......有没有办法将“vb.start”传递给箭头函数以使其执行？它应该在“.then”块的外部吗？再次感谢。
感谢您的回复。我终于有机会尝试了……它似乎很实用。非常感谢您的帮助，非常感谢。

标签： javascript react-native typeerror fetch-api

【解决方案1】：

您应该从第二个 then(...) 块返回一个 Promise，以便将响应传递给第三个 then(...) 块。你可能想尝试这样的事情：

// Fetch another API
return fetch('https://myremoteserveraddress', {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json'
 },
 body: JSON.stringify(secondary),
})

【讨论】：

感谢您的回复。正如我上面的评论，这解决了这个问题，但是现在我得到了关于“this.vb.start();”的同样错误。在第二次 Fetch 调用之后执行的“.then”块中。以前我只使用一个 Fetch 时它工作...有什么想法吗？
您在第三个 fetch(...) 块中使用了经典的 Javascript 函数。经典的 Javascript 函数将 this 绑定到新范围，这意味着 this.vb 未定义。相反，箭头函数继承父作用域。你应该在最后一个 then(...) 块中尝试这个：.then((userData) => { ... }) 注意：考虑使用异步等待模式。
感谢您的回复。您的回答与上面的 Jared Smith 给出的基本相同。因此它也是正确的！我想第二个 Fetch 中的“返回”是什么创建了一个新的范围......对吗？感谢您的建议，再次感谢。问候。