Javascript 异步和等待不使用Axios React

我试图用我的电脑和手机在本地测试我的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

和

wait

直接相关，因为当我注释掉这个函数时，我的项目在手机上正确加载

---

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

您不能将

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

循环移动到

然后

中。它是异步的，因此只有在得到api调用的结果时才需要触发。

我发现了问题所在。它与

async

wait

或

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而不是本地主机

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}`);
      });
  }

将我的代码嵌套在

中。然后

块修复了我的

未定义

错误，即使url不正确。谢谢你的建议@Quentin Grisel

---

修复我的url让我在不同的设备上测试它。

当使用

async

和

wait

时，您需要

尝试
和
捕获
块而不是
然后
和
捕获
方法您的手机与您的计算机在同一网络上吗？或者你正在使用你的移动数据网络？@codemonkey我的手机在同一个网络上。当我在没有任何逻辑的情况下测试我的应用程序的样式时，它被正确地呈现了。@Sysix你能再解释一下吗？当我将我的
.then
.catch
更改为
try
catch
时，我在两台设备上都出现了一个错误。问题是你的
axios
请求显然会在你的手机上爆炸，而
try
catch
东西将有助于识别特定的错误。这并没有解决我的问题，但我认为这是更好的编码practice@Chase这个答案并不是要真正解决你的问题。这将有助于对其来源进行故障排除。@Chase undefined不是一个对象（评估'scheduleArr.forEach'）您会遇到此错误，因为您试图在未初始化schedulArr时循环它。正如我所说，您需要将其放入
中，然后
。现在，如果它仍然不起作用，请共享更多的代码，以便我们可以检查它。