如何使用 Vue.js 访问 API？答案

【问题标题】：How to access an API with Vue.js?如何使用 Vue.js 访问 API？
【发布时间】：2017-05-05 04:56:09
【问题描述】：

我是 JavaScript 和 Vue.js 的新手，在使用 Vue.js 访问 api 时遇到问题。我尝试访问的 API 具有如下所示的 JSON：

{
    "coord": {
        "lon": -88.99,
        "lat": 40.51
    },
    "weather": [
        {
            "id": 800,
            "main": "Clear",
            "description": "clear sky",
            "icon": "01n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 2.09,
        "pressure": 1022.3,
        "humidity": 69,
        "temp_min": 2.09,
        "temp_max": 2.09,
        "sea_level": 1052.03,
        "grnd_level": 1022.3
    },
    "wind": {
        "speed": 12.66,
        "deg": 205.502
    },
    "clouds": {
        "all": 0
    },
    "dt": 1482203059,
    "sys": {
        "message": 0.186,
        "country": "US",
        "sunrise": 1482239741,
        "sunset": 1482273134
    },
    "id": 4903780,
    "name": "Normal",
    "cod": 200
}

它自己的 API 链接有效，但我认为我在运行程序时没有访问它。即使我不尝试解析 JSON 并仅显示从 api 收集的所有数据，我的变量仍然是空的。所以，我必须做错事才能访问 api。另外，在访问api之后，会像这样解析它：例如，访问标签“temp”=>“data.main.temp”

var weather = new Vue({
        el: '#weather',

        data: {
            getTemp: ''
        },

        created: function () {
            this.fetchData();
        },        

        methods: {
            fetchData: function () {
                this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
                    function (data) {
                        this.getTemp = data.main.temp;
                    }
            }
        }

    })
    ;

HTML 代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
</head>

<body>
<div id="weather">
    {{getTemp}}
</div> <!--end of weather-->
</body>

<script src="app.js"></script>

</html>

【问题讨论】：

标签： javascript json api vue.js vue-resource

【解决方案1】：

我看到this的范围有问题，this的范围在$http.get黑色内部发生了变化，您需要进行以下更改：

    methods: {
        fetchData: function () { 
            var vm = this
            this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
                function (data) {
                    vm.getTemp = data.main.temp;
                }
        }
    }

您也可以查看我的类似答案here。

【讨论】：

谢谢，它仍然无法正常工作，但这会在以后给我带来麻烦。
@thefreebird777 如果您在 $http 调用中控制台日志数据，您是否从 API 获取数据？
不，我不是。但是，如果我将 API url 放在地址栏中，它就可以工作，所以链接很好。
你能检查一下你在 $http 调用中的 console.log(data.main) 得到了什么吗？
(process:1374): GLib-CRITICAL **: g_path_get_basename: assertion 'file_name != NULL' failed

【解决方案2】：

我想在您的代码中使用 Promise，并在此处进行一些其他调整

var weather = new Vue({
        el: '#weather',

        data: {
            getTemp: []
        },

        created: function () {
            this.fetchData();
        },        

        methods: {
            fetchData: function () {
                this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID')
                          .then(response => {
                             this.getTemp = response.data
                             // or like this this.getTemp = response.json()
                          })
            }
        }

    })
    ;

【讨论】：

不应该是：this.data.getTemp = response.data?
@kiltek 不，它不应该
好的，它神奇地发现了自己。让它适用于您的版本。
它是如何计算出来的？ @BelminBedak
@adelriosantiago 不确定，但我猜它使用了某种代理。