JavaScript中的Promise使用详解
熟悉前端开发的都一定写过回调方法(callback),简单的说,回调方法是一个函数被作为参数传递给另一个函数,比如下面的代码
function say (value) {
alert(value);
}
function execute (someFunction, value) {
someFunction(value);
}
execute(say, 'hello word');
say函数作为参数传递给execute函数,一般来说我们会碰到的回调嵌套都不会很多,一般就一到两级,但是某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——地狱回调。
那么如何解决地狱回调,保持我们的代码简短,这时Promise就出场了,Promise对象可以理解为一次执行的异步操作,使用Promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。我们用Promise对象改造上面的代码
function say(value) {
return new Promise(function(resolve, reject) {
resolve(value)
})
}
function execute(value) {
return new Promise(function(resolve, reject) {
resolve(value)
})
}
execute('hello word').then((value)=>{
say(value).then((sayValue)=>{
alert(sayValue)
})
})
上面代码只是根据第一段代码做的演示,代码量增加了,但是比传统的解决方案更合理和更强大。
Promise正如字面意思-承诺,“承诺将来会执行”约定的事情。我们首先需要了解Promise的三种状态:
pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
先来构造下一个Promise实例
const promise = new Promise(function(resolve, reject) {
// … some code
If (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数。
Resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
Reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
还是拿第二段代码演示,讲下运行过程,首先是这段代码
execute('hello word').then((value)=>{
say(value).then((sayValue)=>{
alert(sayValue)
})
})
首先是调用execute方法,传入‘hello word’,这个execute方法返回promise对象。调用用then方法接收值,再调用say方法,传入execute方法返回的值,再调用then方法接收,最后alert。
暂时就写到这,后期在更新。
本文来自「青年码农」公众号,作者:青年码农,转载请注明原文链接:https://www.cnblogs.com/nmgwap/p/16331641.html