React中调用Axios get方法返回Promise无法获取响应数据如何解决

你遗漏了异步请求的执行特性，axios.get() 返回的是Promise对象，你定义的fetchData函数直接将该Promise返回，未等待请求完成、Promise状态变为resolved就直接打印变量，因此只能输出Promise对象的标识内容。

常用的获取异步返回值的方案有两种：

• 方案1：使用.then()链式调用获取resolved后的数据

const fetchData = (url) => {
  return axios.get(url).then(res => res.data.data);
}

fetchData(giphy_url).then(data => {
  // 所有依赖返回数据的逻辑都需要写在then的回调内
  console.log(`Data: ${data}`);
})

• 方案2：使用async/await语法糖简化异步逻辑，代码结构更接近同步写法

const fetchData = async (url) => {
  const res = await axios.get(url);
  return res.data.data;
}

// 注意await只能在async函数内部使用
const getGiphyData = async () => {
  const data = await fetchData(giphy_url);
  console.log(`Data: ${data}`);
  // 所有依赖返回数据的逻辑都需要写在await语句之后
}
getGiphyData();

• 所有需要依赖接口返回结果的操作，都必须放在异步流程的回调作用域内，或是await语句之后执行，不能在同步代码中直接获取异步操作的返回值。

内容的提问来源于stack exchange，提问作者Purohit Iyer