React中如何通过async-await取出Promise pending状态的返回结果

问题原因 #

所有被async关键字修饰的函数，返回值都会自动包装为Promise对象，你直接同步调用attList()时，接口请求还没有完成，自然拿不到最终结果，只能拿到处于pending状态的Promise实例。

解决方案 #

方法1：使用.then()回调获取结果 #

你可以直接在调用attList的后面链式调用.then()，回调函数的入参就是你要的接口返回数据：

attList(1, 1).then(list => {
  // 这里可以拿到结果做后续处理
  console.log('接口返回的列表数据：', list)
})

方法2：外层搭配async-await获取结果 #

你也可以在外层的async函数里，用await直接接收返回结果：

const getList = async () => {
  const list = await attList(1, 1)
  console.log('接口返回的列表数据：', list)
  // 后续业务逻辑
}
getList()

React项目常用写法 #

如果是在React函数组件中使用，通常会配合useState存储接口返回结果，useEffect触发请求：

import { useState, useEffect } from 'react'
import axios from 'axios'

// 你的attList封装保持不变，建议补充报错时的默认返回值
const attList = async (areaCode, cityCode) => {
  const serviceKey = '你的服务密钥'
  const url = `http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=${serviceKey}&contentTypeId=12&areaCode=${areaCode}&numOfRows=40&sigunguCode=${cityCode}&MobileOS=ETC&MobileApp=AppTest`;
  try {
    const {data:res} = await axios.get(url)
    return res.response.body.items.item;
  } catch (err) {
    console.log(err);
    // 报错时返回空数组避免后续解构报错
    return []
  }
}

function YourComponent() {
  const [attractionList, setAttractionList] = useState([])

  useEffect(() => {
    // 组件挂载时触发请求
    const fetchData = async () => {
      const list = await attList(1, 1)
      setAttractionList(list)
    }
    fetchData()
  }, [])

  // 渲染时直接用attractionList即可
  return (
    <div>
      {attractionList.map(item => <p key={item.contentid}>{item.title}</p>)}
    </div>
  )
}

注意事项 #

• 不要直接在React组件顶层同步调用await attList()，会导致组件渲染异常
• 建议在接口请求的catch分支里返回默认值，避免后续使用数据时报undefined相关错误

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