Javascript VueJS http 获取请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47409043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS http get request
提问by Znowman
Trying to send an http get request using Vue js. Can't see any problems with the logic, not too experienced using vuejs though.
尝试使用 Vue js 发送 http get 请求。看不出逻辑有什么问题，虽然使用 vuejs 没有太多经验。
Keep getting these two errors:
不断收到这两个错误：
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"
[Vue 警告]：挂载钩子错误：“TypeError：无法读取未定义的属性‘get’”
and
和
TypeError: Cannot read property 'get' of undefined.
类型错误：无法读取未定义的属性“get”。
var owm = new Vue({
el: '#owm',
data: {
debug: true,
weather: []
},
methods: {
loadWeather: function() {
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=766b78c39446a8fa6313c3b7b2063ade', function(data, status, request){
if(status == 200)
{
this.weather = data;
console.log(this.weather);
}
});
}
},
mounted: function () {
this.loadWeather();
}
});
Updated the code using vue resource, the errors are gone but it won't console log any data, what could be wrong?
使用 vue 资源更新了代码，错误消失了，但它不会控制台记录任何数据，可能是什么问题？
Vue.use(VueResource);
var owm = new Vue({
el: '#owm',
data: {
weather: []
},
methods: {
loadWeather: function() {
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=[API KEY]', function(data, status, request){
if(status == 200)
{
this.weather = data;
console.log(this.weather);
}
});
}
},
mounted: function () {
this.loadWeather();
}
});
EDIT: This code works, don't really understand the .then function though and why the request won't work with the callback function but the .then function does.
编辑：这段代码有效，但并不真正理解 .then 函数，以及为什么请求不能与回调函数一起使用，但 .then 函数可以。
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=[API KEY]').then((data) => {
this.weather = data;
console.log(this.weather);
回答by Manav Mandal
I tried a sample on my machine .you are using $http in wrong way. refer the docs.Since $http resolves a promise its callback can be handled inside a then function. This worked for me:
我在我的机器上尝试了一个示例。您以错误的方式使用了 $http。参考文档。由于 $http 解析了一个承诺，它的回调可以在 then 函数中处理。这对我有用：
loadWeather: function() {
var self=this;
this.$http.get('http://api.openweathermap.org/data/2.5/find?q=stockholm&type=like&appid=766b78c39446a8fa6313c3b7b2063ade').then(function(response){
if(response.status == "200"){
console.log(response);
self.weather = response.data.list[0].weather // use self instead of this
}
})
