使用 Axios 获取 Json 值答案

【问题标题】：Get Json values with Axios使用 Axios 获取 Json 值
【发布时间】：2018-09-22 15:07:28
【问题描述】：

我正在尝试从this link 获取所有“标题”、“年份”和“imdbID”。

我正在使用 Vuejs 和 Axios 来执行此操作。但我不确定它是如何完成的？

这是我的代码：

<!DOCTYPE html>

<html>

<head>
    <meta charset=""utf-8>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>Web Project 2018</title>
    <link rel="stylesheet" href="">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <h2>Liste of films</h2>
        <ul>
            <li v-for="film in films">{{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}</li>
        </ul>
</div>

    <script>
        new Vue({
            el: '#app',
            data : {
                films: [],
                errors: []
            },
            created() {
                axios.get('http://www.omdbapi.com/?apikey=xxxxx&s=iron%20man')
                        .then(function(response) {
                            this.films = response.data;
                        })
                        .catch(function(error) {
                            this.errors.push(error);
                        });
            }
        })
    </script>
</body>

</html>

有了这个，我只得到一个包含 {{ film.Title }}、{{ film.Year }}、{{ film.imdbID }}

的页面

我确定这很简单，但我想不通...有什么帮助吗？

【问题讨论】：

标签： json vue.js axios

【解决方案1】：

使用箭头：

 axios.get('http://www.omdbapi.com/?apikey=xxxx&s=iron%20man')
                    .then(response => {
                        this.films = response.data.Search;
                    })
                    .catch(error => {
                        this.errors.push(error);
                    });

【讨论】：

如果您问自己为什么它有效，请参阅Arrow function 和此other question 上的文档。
是的，如果没有箭头语法 'this' 将不可用。做得好。 :)