我正在编写一个简单的应用程序,需要从API获取一些天气数据。端点。 我是React的新手,所以这可能是我不了解如何在React中使用promises。
这是我的代码:
var React = require('react');
var Weather = React.createClass({
getInitialState: function() {
console.log('GetInitialState', 'info');
return {
foo : 1,
weatherConditions : "No weather data"
};
},
update: function() {
console.log('Updating State', 'primary');
let self = this;
function httpRequestWeather(url) {
return new Promise(function(resolve, reject) {
var weatherRequest = new XMLHttpRequest();
weatherRequest.open("GET", url, true);
weatherRequest.onreadystatechange = function() {
if ( this.status === 200) {
console.log("request finished and response is ready");
console.log(this.response);
// only returns when I post code here
self.setState({
weatherConditions: this.response
});
resolve(this.response);
} else{
reject(new Error("no weather data"));
}
};
weatherRequest.send();
});
}
httpRequestWeather("www.weatherendpoint.con/json").then(function(responseText){
let text = JSON.parse(responseText);
//never gets triggered
self.setState({
weatherConditions: "Hi"
});
}).catch(function(){
//always triggered
self.setState({
weatherConditions: "Buy"
});
});
this.setState({foo: 2});
},
render: function() {
console.log('Render', 'success');
let condition = this.state.weatherConditions;
return (
<div>
<span>{condition} </span>
<span>{this.state.foo} </span>
</div>
)
},
componentWillMount: function() {
console.log('ComponentWillMount', 'warning');
this.update();
},
componentDidMount: function() {
console.log('ComponentDidMount', 'warning');
this.update();
},
shouldComponentUpdate: function() {
console.log('ShouldComponentUpdate', 'info');
return true;
}
});
module.exports = Weather;
基本上,问题是在这个功能中我必须触发 self.setState({weatherConditions:this.response});
function httpRequestWeather(url) {
return new Promise(function(resolve, reject) {
var weatherRequest = new XMLHttpRequest();
weatherRequest.open("GET", url, true);
weatherRequest.onreadystatechange = function() {
if ( this.status === 200) {
console.log("request finished and response is ready");
console.log(this.response);
// only returns when I post code here
self.setState({
weatherConditions: this.response
});
resolve(this.response);
} else{
reject(new Error("no weather data"));
}
};
weatherRequest.send();
});
}
如果我尝试在promise promise上设置状态,我总是得不到解决。
httpRequestWeather("www.weatherendpoint.con/json").then(function(responseText){
let text = JSON.parse(responseText);
//never gets triggered
self.setState({
weatherConditions: "Hi"
});
}).catch(function(){
//always triggered
self.setState({
weatherConditions: "Buy"
});
我做错了什么?谢谢!
答案 0 :(得分:1)
执行请求时出错。您应该先检查错误,看看为什么会得到错误,并根据错误流量设置state
。
httpRequestWeather("www.weatherendpoint.con/json")
.then(function(responseText){
let text = JSON.parse(responseText);
self.setState({
weatherConditions: "Hi"
});
}).catch(function(err){
console.log('Error on request:', err);
self.setState({
error: err
});
});
答案 1 :(得分:0)
如果您想在成功和错误条件下调用self.setState(...)
,那么以下模式可能会有用:
asyncRequest()
.then(function(data) {
return { /* properties */ }; // state object (success)
}, function(err) {
console.log(err);
return { /* properties */ }; // state object (something suitable to describe an error)
})
.then(self.setState);
所以在这里你可以写:
httpRequestWeather() // pass url if necessary
.then(function(weatherData) { // make sure `httpRequestWeather()` delivers data, not a JSON string.
return {
'weatherConditions': weatherData,
'error': null
};
}, function(err) {
console.log('Error on request:', err); // optional
return {
'weatherConditions': 'unknown',
'error': err
}
})
.then(self.setState);
上面的特定属性只是我对可能有用的内容的看法,并且可以根据self.setState
(和/或self.render
)期望的内容进行调整。例如,error
属性可能是不必要的。