开发者问题收集

Async 和 Await 无法与 Axios React 配合使用

2021-02-06
8992
javascript reactjs async-await axios asynchronous-javascript

我正在尝试使用我的计算机和手机在本地测试我的 React 项目。我使用的是 JavaScript 而不是 TypeScript。 当我在计算机上运行该项目时，一切正常，但是当我尝试在手机上加载它时，我收到错误： 未处理的拒绝（TypeError）：未定义不是对象（评估“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 直接相关，因为当我注释掉此功能时，我的项目可以在手机上正确加载。

有人能帮我理解我做错了什么吗？

2个回答

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

Quentin Grisel
2021-02-06

我搞清楚了问题所在。它与 async await 或 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 的建议。

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

Chase
2021-02-06