无法使用 Vue 和 Axios 从 API 获取数据

Posted 2023-02-22

【中文标题】无法使用 Vue 和 Axios 从 API 获取数据

【英文标题】：Can't fetch data from API using Vue and Axios

【发布时间】：2021-03-07 23:42:02

【问题描述】：

我正在创建一个电子学习网站，您可以在其中选择课程卡片。这是我的代码

<template>
<div>
  <v-container>
      <v-row>
          <v-col md="3" offset-lg="1">
              <Categories />
          </v-col>
          <v-col md="9" lg="7">
              <CourseList v-bind:list="list"/>
          </v-col>
      </v-row>
  </v-container>
</div>
</template>

<script>
import CourseList from '@/components/courses/CourseList.vue'
import Categories from '@/components/courses/Categories.vue'
import axios from 'axios'


export default 
  components: 
    CourseList,
    Categories
  ,
  data() 
         return 
            list: []
         
  ,
  mounted: function() 
            axios
                .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course')
                .then(res => this.list = res.body)
                .catch(err => console.log(err))
        

</script>

课程列表.vue

<template>
  <div>
      <h2>Courses</h2>

      <v-row>
          <v-col sm="6" md="4">
              <VerticalCard v-bind:list="list"/>
              
          </v-col>
      </v-row>
      
  </div>
</template>

<script>
import VerticalCard from '@/components/cards/VerticalCard.vue'

export default 
    name: "CourseList",
    components: 
        VerticalCard
    ,
    props: ["list"]

</script>

我的问题是我无法从 API 链接获取数据 -> https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course

我想知道我做错了什么。我也尝试使用 list 来获取数据，但它没有用。我现在的目标是获取所有数据，即使它看起来很乱。对不起我的英语不好，谢谢！

【参考方案1】：

axios 将数据包装在数据对象中，所以应该是.then(res => this.list = res.body)而不是.then(res => this.list = res.data.body)

【参考方案2】：

axios 请求的每一个数据响应都会包裹在data 对象中，所以你需要从data.body 获取body 数据。你可以通过console.log(res)查看

const uri = 'https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course'
axios
  .get(uri)
  .then(res => 
    console.log(res)
    let data: statusCode, body = res
    if(statusCode == 200)
      this.list = [...body]
  )
  .catch(err => console.log(err))