如何简化代码实现从数据数组提取URL生成播放链接？

原代码片段 #

<script setup> 部分

<script setup>
const videos = ref([])

videos.value = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=85bdec956c0ccec9c74b7d51e525b938&language=en-US`).then(res => res.json())
console.log(videos.value.results[0].key)


const {
    key,
} = videos.value.results[0]



const frame1 = (`https://www.youtube.com/embed/${videos.value.results[0].key}`)
const frame2 = (`https://www.youtube.com/embed/${videos.value.results[1].key}`)
const frame3 = (`https://www.youtube.com/embed/${videos.value.results[2].key}`)
const frame4 = (`https://www.youtube.com/embed/${videos.value.results[3].key}`)
</script>

<template> 部分

<template>
<div class="items-center grid grid-cols-2 gap-10  w-[100%] h-[100%] bg-gradient-to-t from-[rgb(45,45,45)] from-[-20%] via-slate-900 via-50% to-[rgb(45,45,45)] to-[100%] blur-0">
<iframe :src="frame1" class="w-[90%] h-[100%] border-2 m-5 mt-10 rounded-lg"></iframe>
<iframe :src="frame2" class="w-[90%] h-[100%] border-2 m-5 mt-10 rounded-lg"></iframe>
<iframe :src="frame3" class="w-[90%] h-[100%] border-2 m-5 mb-10 rounded-lg"></iframe>
<iframe :src="frame4" class="w-[90%] h-[100%] border-2 m-5 mb-10 rounded-lg"></iframe>
</div> 
</template>

优化后的代码 #

<script setup> 部分

<script setup>
import { ref, computed } from 'vue'

const videos = ref([])
// 提取配置项，方便后续修改
const API_KEY = '85bdec956c0ccec9c74b7d51e525b938'
const BASE_TMDB_URL = 'https://api.themoviedb.org/3'

// 封装请求逻辑，增加错误处理
async function getMovieVideos() {
  try {
    const response = await fetch(`${BASE_TMDB_URL}/movie/${movieId}/videos?api_key=${API_KEY}&language=en-US`)
    const data = await response.json()
    // 只保留前4个视频，防止数量不足时数组越界报错
    videos.value = (data.results || []).slice(0, 4)
  } catch (error) {
    console.error('获取视频列表失败:', error)
  }
}

// 调用请求函数
getMovieVideos()

// 自动生成iframe链接数组
const videoIframeUrls = computed(() => {
  return videos.value.map(video => `https://www.youtube.com/embed/${video.key}`)
})
</script>

<template> 部分

<template>
  <div class="items-center grid grid-cols-2 gap-10 w-full h-full bg-gradient-to-t from-[rgb(45,45,45)] from-[-20%] via-slate-900 via-50% to-[rgb(45,45,45)] to-[100%] blur-0">
    <iframe 
      v-for="(url, idx) in videoIframeUrls" 
      :key="idx" 
      :src="url" 
      class="w-[90%] h-[100%] border-2 m-5 rounded-lg"
      :class="idx < 2 ? 'mt-10' : 'mb-10'"
    ></iframe>
  </div>
</template>

优化说明 #

1. 消除冗余代码：不用手动创建frame1到frame4，通过数组映射自动生成链接；模板用v-for循环渲染iframe，避免重复编写标签。
2. 增加错误防护：用try-catch包裹请求逻辑，接口失败时会在控制台打印错误，不会直接导致页面崩溃。
3. 避免数组越界：用slice(0,4)只保留前4个视频，就算接口返回的视频数量少于4个，也不会出现results[3]取不到值的问题。
4. 提升可维护性：把API密钥和基础URL单独提取，后续修改配置或更换接口更便捷。
5. 样式复用：通过索引判断动态添加mt-10或mb-10类，不用给每个iframe单独写重复样式。

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