Vue3 Composition API中如何解构Axios接口响应获取results字段

错误原因 #

• 变量引用顺序错误：你在解构赋值的右侧写了results.value，但results是你当前要声明的变量，还未完成初始化就被调用，直接触发报错
• 解构路径匹配错误：axios请求返回的响应对象顶层直接包含data字段，不需要额外加result层级
• 解构目标对象错误：你已经把接口返回的响应赋值给了result.value，解构的源应该是result.value，不是还没定义的results.value

修复后的代码 #

import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const result = ref(null)
    const userList = ref([]) // 单独存results数组更方便后续使用

    onMounted(async ()  => {
      // 写法1：请求后直接从响应对象解构，不需要存完整响应的话推荐用这个
      const { data: { results } } = await axios.get('https://randomuser.me/api?results=50')
      userList.value = results

      // 写法2：如果需要保留完整响应再解构可以用这个
      // result.value = await axios.get('https://randomuser.me/api?results=50')
      // const { data: { results } } = result.value
      // userList.value = results
    })
    return { result, userList }
  }
}

补充说明 #

• 如果你不需要保留完整的接口响应对象，完全可以在请求的时候直接解构拿到results，不需要先存到result的ref里，减少不必要的变量声明
• 建议给解构出来的数组起语义化的名称，比如userList，避免和result变量名混淆，降低后续维护出错概率

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