如何在Vue组件中正确请求视频数据并显示？

Question

<template>

<div>
    <div class="video">
        <video :src="videoUrl" controls="controls" autoplay="autoplay"                           width="100%" height="100%"></video>
    </div> 
    <div class="video-list">
        <ul>
            <li v-for="(item, index) in videoList" :key="index" @click="videoUrl = item.url">
                <img :src="item.cover" alt="">
            </li>
        </ul>
    </div>
</div>

</template>

<script>
import { getVideoUrl } from '@/api/video'
export default {

data() {
    return {
        videoList: [],
        videoUrl: ''
    }
},
created() {
    this.getVideoUrl(); // 添加created生命周期调用
},
methods: {
    getVideoUrl() {
        return getVideoUrl(this.queryParams) // Add return statement
          .then(response => {
            console.log('接口响应数据：', res); // 添加console打印
            if (res.code == 200) {
                this.videoList = res.data;
                this.videoUrl = this.videoList[0]?.url;
            }
        }).catch(err => {
            console.error('接口请求错误：', err); // 添加错误处理
        });
    },
}

}
</script>

<style lang="css" scoped></style>

export function getVideoUrl(query) {
return request({

url: '/front/video/url',
method: 'get',
params: query

})
}请求不出来数据，还报错

不太清楚我是哪里有错误，有没有大佬能给我解答一下

Answer 1

变量命名

在 getVideoUrl 方法中，你在 .then 块中使用了 response 变量，但在 console.log 中使用了 res。要使用相同的变量名

<template>
  <div>
    <div class="video">
      <video :src="videoUrl" controls autoplay width="100%" height="100%"></video>
    </div>
    <div class="video-list">
      <ul>
        <li v-for="(item, index) in videoList" :key="index" @click="videoUrl = item.url">
          <img :src="item.cover" alt="">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getVideoUrl } from '@/api/video'

export default {
  data() {
    return {
      videoList: [],
      videoUrl: ''
    }
  },
  created() {
    this.getVideoUrl(); // 在 created 生命周期钩子中调用该方法
  },
  methods: {
    getVideoUrl() {
      return getVideoUrl(this.queryParams) // 添加 return 语句
        .then(response => {
          console.log('接口响应数据：', response); // 使用正确的变量名
          if (response.code === 200) {
            this.videoList = response.data;
            this.videoUrl = this.videoList[0]?.url;
          }
        })
        .catch(err => {
          console.error('接口请求错误：', err); // 处理错误
        });
    }
  }
}
</script>

<style lang="css" scoped>
.video-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.video video {
  max-width: 100%;
  height: auto;
}

.video-list li img {
  transition: 0.3s;
}

.video-list li:hover img {
  opacity: 0.7;
}
</style>

export function getVideoUrl(query) {
  return request({
    url: '/front/video/url',
    method: 'get',
    params: query
  });
}

Answer 2

碰到报错问题要学会排查定位原因
报错也是有不同类型的，常见的报错类型有：

• TypeError: 类型错误，比如调用了 undefined 的方法。
• ReferenceError: 引用错误，比如使用了未定义的变量。
• SyntaxError: 语法错误。
• NetworkError: 网络请求错误（见 Network 面板）。
• Uncaught Error: 未捕获的错误。

根据报错提示就应该能定位到大概原因，然后再审查下代码就可以发现问题

Answer 3

把response 改成res 就可以了。控制台已经会有提示的吧。