Async 和 Await 不适用于 Axios React答案

【问题标题】：Async and Await not working with Axios ReactAsync 和 Await 不适用于 Axios React
【发布时间】：2021-05-10 22:15:44
【问题描述】：

我正在尝试用我的电脑和手机在本地测试我的 react 项目。我使用的是 JavaScript 而不是 TypeScript。当我在计算机上运行该项目时，一切正常，但是当我尝试将其加载到手机上时，出现错误：Unhandled Rejection (TypeError): undefined is not an object (evaluating 'scheduleArr.forEach')。我以为我正确使用了async 和await，因为这段代码可以在我的电脑上运行。我很困惑为什么这段代码可以在一个平台上运行，而不能在另一个平台上运行。

async function getSchedule() {
  let scheduleArr = await axios.get('api/schedule/')
    .then(response => { 
      return response.data; 
     })
    .catch((error) => {
       console.log(`ERROR: ${error}`);
    });

  scheduleArr.forEach(game => {
    /* do stuff */
  }

});

我认为这个问题与async 和await 直接相关，因为当我注释掉这个函数时，我的项目在我的手机上正确加载。

谁能帮我理解我做错了什么？

【问题讨论】：

当使用 async 和 await 你需要 try 和 catch 块而不是 then 和 catch 方法
你的手机和电脑在同一个网络吗？或者您正在使用您的移动数据网络？
@codemonkey 我的手机在同一个网络上。当我在没有任何逻辑的情况下测试我的应用程序的样式时，它呈现正确。
@Sysix 你能再解释一下吗？当我将 .then .catch 更改为 try catch 时，两台设备都出现错误。
重点是您的axios 请求显然会在您的手机上炸弹，而try catch 的东西将有助于识别具体错误。

标签： javascript reactjs async-await axios asynchronous-javascript

【解决方案1】：

您不能将async/await 模式与then 一起使用。要么像这样使用它：

async function getSchedule() {
    try {
      let scheduleArr = await axios.get("api/schedule/");
      console.log(scheduleArr.data);
    } catch (err) {
      console.log(`ERROR: ${err}`);
    }

    scheduleArr.forEach(game => {
      /* do stuff */
    });
  }

或者使用默认模式：

function getSchedule() {
    axios
      .get("api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

请注意，我已将您的 foreach 循环移至 then。它是异步的，因此只有在您获得 api 调用的结果时才需要触发。

【讨论】：

这并没有解决我的问题，但我认为这是更好的编码实践
@Chase 这个答案并不是为了真正解决你的问题。它只会帮助解决它的起源问题。
@Chase undefined is not an object (evaluating 'scheduleArr.forEach') 你得到这个错误是因为你试图在 schedulArr 未初始化时循环它。正如我所说，你需要把它放在你的then 中。现在，如果仍然无法正常工作，请分享您的更多代码，以便我们检查一下。

【解决方案2】：

我发现了问题所在。与asyncawait或axios无关。

这是我之前的代码

function getSchedule() {
    axios
      .get("http://localhost:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

我更改了我的 API 调用以使用我的实际本地 IP 而不是 localhost

function getSchedule() {
    axios
      .get("http://192.168.X.XX:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

将我的代码嵌套在 .then 块中确实修复了我的 undefined 错误，即使是错误的 url。感谢@Quentin Grisel 的建议。

修复我的网址让我可以在不同的设备上进行测试。

【讨论】：