我刚刚实现了我的第一个函数,它根据 AngularJS 中的另一个Promise返回一个Promise,并且它起作用了。但在此之前,我决定只做到这一点,我花了2小时来阅读,并试图了解背后的Promise的概念。我想如果我能写一段简单的代码来模拟 Promise 的工作原理,那么我就能从概念上理解它,而不是在不真正知道它是如何工作的情况下使用它。我写不出那个代码。
那么,有人可以用普通的 JavaScript 说明 Promise 是如何工作的吗?
我刚刚实现了我的第一个函数,它根据 AngularJS 中的另一个Promise返回一个Promise,并且它起作用了。但在此之前,我决定只做到这一点,我花了2小时来阅读,并试图了解背后的Promise的概念。我想如果我能写一段简单的代码来模拟 Promise 的工作原理,那么我就能从概念上理解它,而不是在不真正知道它是如何工作的情况下使用它。我写不出那个代码。
那么,有人可以用普通的 JavaScript 说明 Promise 是如何工作的吗?
一个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中的action,调用异步函数的代码会定义action。
由于其中任何一个都可以以任何顺序发生,因此调用异步函数的代码可以挂在 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*
正如我们所看到的,在失败的情况下,错误函数被触发(它总是 的第二个参数then
),然后链中的下一个函数在没有给定参数的情况下被触发。
对于高级知识,我邀请您来到这里。
请检查这个简单的Promise代码。这将帮助您更好地理解 Promise 功能。
Promise是一个可能在未来某个时间产生单个值的对象:一个已解决的值,或一个未解决的原因。Promise可能处于 3 种可能的状态之一:已完成、拒绝或未决。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}`)
})