使用axios调用API获取数据后如何存储以在代码后续任意位置使用

async函数默认返回Promise对象，你直接打印fetchData()的调用结果拿到的就是Promise实例，接口请求未完成时状态自然为pending。另外你当前的fetchData没有写return语句，就算请求完成也拿不到返回的接口数据。

首先修改fetchData函数，返回请求得到的数据：

const fetchData = async () => {
  const response = await axios.get("http://www.omdbapi.com/", {
    params: {
      apikey: "a7aeae67",
      s: "vam"
    }
  })
  // 新增返回语句，可根据需要返回response或者response.data
  return response.data
}

你可以根据业务场景选择以下任意一种方案：

• 方案1：async上下文内使用
  所有需要用到接口数据的逻辑，都放在await调用的后续执行，可定义全局变量存储数据供其他函数调用：

  // 全局存储变量
  let apiData = null
  
  const init = async () => {
    apiData = await fetchData()
    // 数据加载完成后再执行后续业务逻辑
    console.log(apiData)
    runBusinessLogic()
  }
  
  const runBusinessLogic = () => {
    // 此处可正常拿到加载完成的接口数据
    console.log(apiData)
  }
  
  init()
  

  注意：不要在init执行完毕前访问apiData，此时变量还未赋值

• 方案2：Promise链式调用
  不需要额外包async函数时，直接用then方法接收返回数据：

  let apiData = null
  
  fetchData().then(data => {
    apiData = data
    // 数据加载完成后执行后续逻辑
    console.log(apiData)
  })
  

• 方案3：任意位置可安全访问的写法
  直接存储请求的Promise实例，调用时用await接收，不会重复发起请求，任何位置调用都能拿到正确数据：

  // 存储Promise实例，只会发起一次请求
  const dataPromise = fetchData()
  
  // 任意位置需要用数据时都可以这样写
  const useApiData = async () => {
    const data = await dataPromise
    console.log(data)
  }
  
  // 多次调用也不会重复请求
  useApiData()
  useApiData()
  

内容的提问来源于stack exchange，提问作者berboş