Promise的基本使用

219 阅读3分钟

利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;

  通过new实例化Promise, 构造函数需要两个参数, 第一个参数为函数执行成功以后执行的函数resolve, 第二个函数为函数执行失败以后执行的函数reject:

new Promise(function(resolve , reject) {

});   

通过Promise,我们把回调函数用线性的方式写出来,而不是一层套一层, 这个函数有四层回调;

fn("args", function(a) {

fn1("foo", function(b) {
    fn2("bar", function(c) {
        fn3("baz", function(d) {
            alert("回调成功,获知的内容为:"+a+b+c+d)
        })
    })
})

})   以上的Demo只有包含成功的回调, 如果失败的回调也算的话, 也就更麻烦了;

  

  如果使用Promise的方式,我们可以改装成线性的代码, 更加符合阅读习惯,只要在then函数下写逻辑即可;

new Promise(function(resolve , reject) {

resolve(1);

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(2);
});

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(3);
});

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(4);
});

}).then(function(val) {

console.log(val);

}); Promise实例的三种状态:

  每一个实例化的Promise都有三个状态;pending(等待) rejected(拒绝) resolved(解决) ,默认的状态为pending,如果执行了resolve(), 那么这个promise的状态会变为resolve,如果执行了reject(), 那么这个promise的状态就会变成rejected, 而且这些状态是不可撤销的,一经更改,不会再变了;

  then方法:promise有一个then方法,then方法接收两个参数, 第一个为函数的成功回调, 第二个为函数的失败回调:

var promise = new Promise(function(resolve , reject) {

resolve(); //执行成功回调;

});

console.log(0);

promise.then(function(val) {

console.log(1); 

}, function() {

console.log("失败");

});

console.log("2");

var promise = new Promise(function(resolve , reject) {

reject();

});

console.log(0);

promise.then(function(val) {

console.log(1);

}, function() {

console.log("失败");

});

console.log("2");

  then方法每一次都是返回不同的Promise实例,then的第一个参数是成功回调, 这个成功回调的参数为: 上一个Promise实例执行resolve方法的参数;

  一般来说, then方法会返回当前的promise, 如果在then方法里面return 一个新的Promise实例,那么此时的then返回的就是新的Promise实例, 利用这个特性,就可以实现多层回调;

复制代码 new Promise(function(resolve , reject) {

resolve(1);

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(2);
});

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(3);
});

}).then(function(val) {

console.log(val);
return new Promise(function(resolve , reject) {
    resolve(4);
});

}).then(function(val) {

console.log(val);

});

  不管代码是异步还是同步的, 都可以用Promise的then方法, 同步的代码直接写在then方法第一个参数, 把需要参数通过resolve传给下一个then方法,

  如果是异步的代码, 就直接return一个Promise实例:

new Promise(function(resolve , reject) {

resolve(1);

}).then(function(val) {

console.log(val);
return 2;

}).then(function(val) {

console.log(val);
return 3;

}).then(function(val) {

console.log(val);
return new Promise(function(resolve,reject) {
    //异步操作些这里
    resolve(4);
});

}).then(function(val) {

console.log(val);
return 5;

}).then(function(val) {

console.log(val);

});

以上只是Promise的一些基础知识, 还有一些其他的知识点, 就不一一介绍了(Promise.resolve的不同参数, 与Generator一起使用, Promise的附加方法, 等等等等);