[英]Promise.then() doesn't work on first button click
我的问题是,当我第一次在页面加载时单击“ NewQuoteButton”时,出现错误: quoteGenerator.getQuote(...).then is not a function
。 但是,如果再次单击该按钮,则可以正常生成报价。 另外,在Chrome检查器中检查“网络”标签后,我注意到我收到的来自API的请求和响应很多,而所显示的报价却落后了。
我是Promises的新手,目前正在练习与显示模块模式一起使用它。 我的理解是,一个Promise调用then(),该方法将一个函数以已解析的promise的值作为参数。 因此,我的getQuote()应该可以工作,因为它返回一个包含引号对象的Promise。 有人可以指出我正确的方向。 谢谢!
const quoteGenerator = (function(){
let url = "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous";
let apiHeader = new Headers({
"X-Mashape-Key": "..."
});
let init = {
headers : apiHeader,
}
let quoteInfo = {};
let getQuote = function(){
fetch(url, init)
.then(response => {
if (response.ok){
return response.json();
}
throw new Error("Get request failed");
}, networkError => console.log("Error: " + networkError))
.then(jsonResponse => {
quoteInfo = Promise.resolve({
quote: jsonResponse.quote,
author: jsonResponse.author
});
});
return quoteInfo;
};
return {
getQuote : getQuote
};
})();
//Triggers when user clicks on social media button to share quote.
//Checks to see if quote has been generated from quoteGenerator before
//sharing it, if not, then button does nothing.
const clickHandler = (function(){
let triggerClicked = function(){
$("#twitter").on("click", function(e){
e.preventDefault();
window.open("https://twitter.com/intent/tweet?text=asdf");
});
$("#newQuoteButton").on("click", function(e){
//ERROR BELOW//
quoteGenerator.getQuote().then(function(quoteInfo){
//ERROR ABOVE//
$("#quoteSection > h2").html("<i class='fa fa-quote-left'></i>" +
quoteInfo.quote + "<i class='fa fa-quote-right'></i>");
$("#author").html("<i>- " + quoteInfo.author + "</i>");
}).catch(function(e){
console.log(e);
});
});
};
return {
handleClicks: triggerClicked
}
})();
clickHandler.handleClicks();
返回Promise
链中的数据,并由@nnnnnn指出
getQuote()
返回quoteInfo
。 第一次调用promise尚未完成,因此quoteInfo
仍然是它初始化为的空{}
对象。
可以从代码中省略quoteInfo
let getQuote = function() {
return fetch(url, init)
.then(response => {
if (response.ok){
return response.json();
}
throw new Error("Get request failed");
}, networkError => console.log("Error: " + networkError))
.then(jsonResponse => {
return {
quote: jsonResponse.quote,
author: jsonResponse.author
};
});
};
$("#newQuoteButton").on("click", function(e){
//ERROR BELOW//
quoteGenerator.getQuote().then(function(quoteInfo){
//ERROR ABOVE//
$("#quoteSection > h2")
.html("<i class='fa fa-quote-left'></i>"
+ quoteInfo.quote + "<i class='fa fa-quote-right'></i>");
$("#author").html("<i>- " + quoteInfo.author + "</i>");
}).catch(function(e){
console.log(e);
});
});
您需要返回提取调用
let getQuote = function(){
return fetch(url, init) // <<<<<<< use 'return'
.then(resp => {
return resp.ok ? resp.json() : Promise.reject(Error('Get request failed'));
})
.catch(networkError => {
console.error('Error: ' + networkError);
return Promise.reject(networkError); // <<<< have to call reject here, or throw
})
.then(jsonResponse => {
return {
quote: jsonResponse.quote,
author: jsonResponse.author
};
});
};
动态输入FTW :)
4个提示:
使用console.error而不是console.log进行错误,因为这会写入stderr而不是stdout
使用单引号-它们更易于阅读IMO
IMO承诺的捕获块通常比使用“错误返回”更干净
对错误使用真实的Error对象,而不仅仅是消息,否则将难以跟踪。 您不需要new关键字,只需调用Error()。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.