promise在JavaScript中是如何工作的
How do promises work in JavaScript?
我刚刚实现了我的第一个函数,该函数基于AngularJS中的另一个promise返回promise,并且成功了。但在我决定只做之前,我花了两个小时阅读并试图理解承诺背后的概念。我想,如果我能写一段简单的代码来模拟promise的工作方式,那么我就能够从概念上理解它,而不是在不知道它是如何工作的情况下使用它。我不会写那个代码。
那么,有人能用普通的JavaScript说明一下promise是如何工作的吗?
var promise = {
isDone: false,
doneHandler: null,
done: function(f) {
if (this.isDone) {
f();
} else {
this.doneHandler = f;
}
},
callDone: function() {
if (this.doneHandler != null) {
this.doneHandler();
} else {
this.isDone = true;
}
}
};
你可以先定义动作,然后触发它:
promise.done(function(){ alert('done'); });
promise.callDone();
你可以先触发动作,然后定义它:
promise.callDone();
promise.done(function(){ alert('done'); });
演示:http://jsfiddle.net/EvN9P/
在异步函数中使用promise时,该函数会创建空promise,保留对它的引用,并返回引用。处理异步响应的代码将触发promise中的操作,而调用异步函数的代码将定义该操作。
由于这两种情况中的任何一种都可以按任何顺序发生,因此调用异步函数的代码可以挂起promise,并随时定义操作。
为了简单理解Javascript中的promise。您可以参考以下示例。只需在一个新的php/html文件中复制粘贴即可运行。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function test(n){
alert('input:'+n);
var promise = new Promise(function(fulfill, reject) {
/*put your condition here */
if(n) {
fulfill("Inside If! match found");
}
else {
reject(Error("It broke"));
}
});
promise.then(function(result) {
alert(result); // "Inside If! match found"
}, function(err) {
alert(err); // Error: "It broke"
});
}
</script>
</head>
<body>
<input type="button" onclick="test(1);" value="Test"/>
</body>
</html>
- 单击测试按钮
- 它将创造新的希望
- 如果条件为真,则满足响应
- 之后承诺。然后调用,并根据实现结果打印结果
- 如果拒绝承诺,则返回错误消息
可能最简单的promise用法示例如下:
var method1 = (addings = '') => {
return new Promise(resolve => {
console.log('method1' + addings)
resolve(addings + '_adding1');
});
}
var method2 = (addings = '') => {
return new Promise(resolve => {
console.log('method2' + addings)
resolve(addings + '_adding2');
});
}
method1().then(method2).then(method1).then(method2);
// result:
// method1
// method2_adding1
// method1_adding1_adding2
// method2_adding1_adding2_adding1
这是最基本的。有了它,你可以尝试拒绝:
var method1 = (addings = '*') => {
return new Promise((resolve, reject) => {
console.log('method1' + addings)
resolve(addings + '_adding1');
});
}
var method2 = (addings = '*') => {
return new Promise((resolve, reject) => {
console.log('method2' + addings)
reject();
});
}
var errorMethod = () => {
console.log('errorMethod')
}
method1()
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod);
// result:
// method1*
// method2*_adding1
// errorMethod
// method2*
// errorMethod
// method2*
正如我们所看到的,在失败的情况下,会触发error函数(这始终是then
的第二个参数),然后在没有给定参数的情况下触发链中的下一个函数。
为了获得更高的知识,我邀请你来这里。
请检查这个简单的承诺代码。这将帮助您更好地理解promise功能。
承诺是指在未来某个时候可能产生单个值的对象:要么是已解决的值,要么是未解决的原因。承诺可能处于三种可能的状态之一:履行、拒绝或未决。Promise用户可以附加回调来处理已实现的值或拒绝的原因。
let myPromise = new Promise((resolve, reject)=>{
if(2==2){
resolve("resolved")
}else{
reject("rejected")
}
});
myPromise.then((message)=>{
document.write(`the promise is ${message}`)
}).catch((message)=>{
document.write(`the promise is ${message}`)
})
检查
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- 最大高度转换不;不工作,工作缓慢
- Gulp-rev:不是第一次工作,而是在第一次工作之后工作
- 在JavaScript中的类中,push和concat的工作方式有何不同
- JQuery - Ajax: encodeUriComponent不工作(EncodeUri工作)