破坏 api vuejs 3 组合中的响应 api

Question

如何解构对访问结果的响应？

密码是

export default {
  setup() {
    const result = ref(null)

    onMounted(async ()  => {
      result.value = await axios.get('https://randomuser.me/api?results=50')
      const { result: {data: {results} } } = results.value
    })
    return { result }
  }
}

返回的响应看起来像

控制台错误是“初始化前无法访问 'results'”

感谢您的帮助

Answer 1

从axios.get()返回的response将数据存储在其data属性中，因此result.value.data包含info和results 个字段。

但是，我认为您正试图将 results 字段存储在 result.value 参考中。您可以将 API 响应存储在一个临时变量中，然后对其进行解构：

onMounted(async ()  => {
  const resp = await axios.get('https://randomuser.me/api?results=50')
  const { data: { results } } = resp
  result.value = results
})

demo