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

【问题标题】：Can't fetch data from API using Vue and Axios无法使用 Vue 和 Axios 从 API 获取数据
【发布时间】：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}} 来获取数据，但它没有用。我现在的目标是获取所有数据，即使它看起来很乱。对不起我的英语不好，谢谢！

【问题讨论】：

标签： api vue.js vuejs2 axios

【解决方案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))

【讨论】：