在 Reactjs 中实现 Axios.get 的问题答案

【问题标题】：Problem in implementing Axios.get in Reactjs在 Reactjs 中实现 Axios.get 的问题
【发布时间】：2021-07-22 16:11:05
【问题描述】：

我是新手，我想根据函数参数发出 Axios.get() 请求。这是我尝试过的。

 const mentorName = (value) => {
    try {
      Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      ).then(res => {
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

但它没有工作，因为 res 没有在控制台中打印。这有什么问题？

运行良好的代码是：

const mentorName = (value) => {
    try {
      const res = Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
      }
    } catch (error) {
      console.log(error)
    }
  }

以下代码运行良好，但返回包装在承诺中的信息。现在如何访问它，因为 res.data 不是有效属性。

【问题讨论】：

你检查过响应的状态码实际上是什么吗？因为如果代码不是专门为 200，console.log 将不会发生。通过查看您显示的代码，问题也可能出在 API 中。
我已经编辑了我的问题，请再看一遍。状态码是 200。
你试过awaitingaxios.get()吗？
是的，我做到了。但它显示了 Objects 作为 React child 无效的错误。我在网上搜索，解决方案是将 useEffect 与异步一起使用。但是如何有效地使用它进行函数调用呢？
在第一个示例中，如果状态码为 200 且 data.status 为“成功”，您将看不到任何输出。你就是这样写的。将else 案例中的输出显示到您的if 语句中怎么样？您的第二个“工作”示例令人分心。您正在测试 somePromise.status 不是 200。它不是。它是未定义的，因此if 语句“有效”也就不足为奇了。

标签： javascript reactjs axios

【解决方案1】：

const mentorName = (value) => {
    try {
      Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      ).then(res => {
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

由于 if 条件，上面的代码没有打印出来，很可能状态大部分时间都是 200，除了 200 之外的任何东西都会向下钻取以捕获块

它在下面的代码中打印承诺的原因是，它是一个等待被履行的承诺，并且您提出的比较/条件非常好，因为 res 是一个承诺并且 res.status 是未定义的

const mentorName = (value) => {
    try {
      const res = Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
      }
    } catch (error) {
      console.log(error)
    }
  }

调整代码以包含一个 else 块，您总是可以在控制台中看到打印的内容

const mentorName = (value) => {
        try {
          Axios.get(
            `${BASE_URL}/api/v1/consultations/${value}`
          ).then(res => {
            if (res.status !== 200 || res.data.status !== "success") {
              console.log(res)
              return
            } else {
              console.log(res);
            }
          })
        } catch (error) {
          console.log(error)
        }
      }

我不建议使用 async/await，因为一个单一且紧迫的原因，即 UI 线程被搁置，直到异步调用得到解决。只是让它看起来像一个同步调用。坚守诺言。

【讨论】：

除了最后一点之外都很好：“UI 线程被搁置，直到异步调用得到解决”我不明白你在这里想说什么。在浏览器的 JS 中，使用 async/await 不会“持有 UI 线程”，在这种情况下使用 Promise.then 和使用 async/await 几乎没有区别。
async/await 和 promise 之间的细微差别在于，promise 不会等到异步执行结束并返回响应，而另一方面 async await 会。当执行堆栈遇到“异步”（通俗地说）时，它会暂停执行并等待微任务完成其执行（async/await 只是对实现类似同步执行的承诺的语法糖）。

【解决方案2】：

你能用async/await试试这个吗？

import axios from 'axios';

const mentorName = async value => {
  try {
    const res = await axios.get(`${BASE_URL}/api/v1/consultations/${value}`);
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};

在try 块内的console.log 中，您可以检查api response。

【讨论】：