如何使用Vue.js和Axios获取接口中的Title、Year与imdbID？
2026-5-22
用Vue.js + Axios提取JSON指定字段的实现方案
嘿，我来帮你搞定这个需求！咱们一步步来，先把你的代码补全并实现功能，我会给你详细解释每一部分：
首先，先补全你的HTML结构和Vue代码，完整实现应该是这样的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Web Project 2018</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <!-- Vue挂载的根元素 --> <div id="app"> <h2>电影列表</h2> <!-- 循环渲染提取到的数据 --> <ul> <li v-for="movie in movies" :key="movie.imdbID"> <strong>{{ movie.Title }}</strong> - {{ movie.Year }} (ID: {{ movie.imdbID }}) </li> </ul> <!-- 展示错误信息 --> <p v-if="error" style="color: red;">{{ error }}</p> </div> <script> new Vue({ el: '#app', data() { return { movies: [], // 存储提取后的电影数据 error: '' // 存储请求错误信息 } }, mounted() { // 组件挂载后发起请求，这里替换成你的目标API链接 axios.get('你的目标JSON链接地址') .then(response => { // 假设返回的JSON里有一个包含电影的数组，比如Search字段（常见于OMDB API） // 遍历数据，只提取需要的三个字段 this.movies = response.data.Search.map(movie => ({ Title: movie.Title, Year: movie.Year, imdbID: movie.imdbID })) }) .catch(err => { this.error = '数据请求失败：' + err.message console.error(err) }) } }) </script> </body> </html>
关键部分解释：
- HTML结构：我们给Vue指定了挂载根元素
#app，并用v-for循环渲染提取后的电影数据，同时添加了错误提示区域。 - Vue数据定义：
movies数组用来存储我们最终需要的字段数据，error用来捕获请求失败的信息。 - 请求时机：用
mounted钩子函数，确保组件挂载完成后再发起API请求，这是Vue里获取初始数据的常用时机。 - 数据提取：用
Array.map()方法遍历接口返回的电影数组，只保留Title、Year、imdbID三个字段，避免冗余数据存入我们的data。 - 错误处理：Axios的
catch块用来捕获请求过程中的错误，比如网络问题、接口返回异常等，方便调试和给用户提示。
注意事项：
- 记得把代码里的
你的目标JSON链接地址替换成你实际要请求的API链接。 - 如果你的接口返回的结构不是
response.data.Search，要根据实际的JSON结构调整，比如如果直接返回的是电影数组，就改成response.data.map(...)。
内容的提问来源于stack exchange，提问作者Tibo
