时间戳

首页 > 解决方案 > Async 和 Await 不适用于 Axios React

javascript - Async 和 Await 不适用于 Axios React

问题描述

我正在尝试用我的电脑和手机在本地测试我的 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因为当我注释掉这个函数时，我的项目在我的手机上正确加载。

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

标签： javascriptreactjsasync-awaitaxiosasynchronous-javascript

解决方案

您不能将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 调用的结果时才需要触发。

推荐阅读