Promise

124 阅读3分钟

Promise是异步编程的一种解决方案,从语法上讲,它是一个对象,用它可以获取异步操作的消息

它有以下三种状态:

  • pending:初始值,不是fulfilled,也不是rejected
  • fulfilled:代表操作成功
  • rejected:代表操作失败 Promise有两种状态改变的方式,既可以从pending转变为fulfilled,也可以从pending转变为rejected。一旦状态改变,就「凝固」了,会一直保持这个状态,不会再发生变化。当状态发生变化,promise.then绑定的函数就会被调用。
    注意:Promise一旦新建就会「立即执行」,无法取消。这也是它的缺点之一。举例!

image.png

        var promise=new Promise(function(resolve,reject){
            //执行异步操作
            if(//异步操作成功){
                resolve(data);
            }else{
                reject(error)
            }
        })

类似构建对象,使用new来构建一个PromisePromise接受一个「函数」作为参数,该函数的两个参数分别是resolvereject。这两个函数就是「回调函数」

resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去

reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法指定resolved状态和reject状态的回调函数。举例!

        promise.then(function(data){
            //成功时执行...
        },function(error){
            //失败时执行...
        })

Promise新建后就会立即执行。而then方法中指定的回调函数,将在当前脚本所有同步任务执行完才会执行。举例!

        var promise=new Promise(function(resolve,reject){
            console.log("resolve的前面");
            resolve()//执行resolve
            console.log("resolve的后面");
        })
        promise.then(function(){
            console.log("执行resolved");
        })
        console.log("outer");
----------------------------------
        打印结果为
        //resolve的前面
        //resolve的后面
        //outer
        //执行resolved

Promise的基本用法

1.实例化Promise对象,在构造函数中传递函数,该函数用于处理异步任务

2.resolve和reject两个参数用于处理成功和失败的两种情况,并通过p.then获取处理结果 例:

    var promise=new Promise(function(resolve,reject){
            var flag=true;
            if(flag){
            //成功时调用resolve
                resolve("成功")
            }else{
            失败时调用reject
                reject("失败")
            }
        })
        promise.then(function(result){
        //从resolve得到的正常结果
            console.log(result);
        },function(result){
        //从reject得到的错误信息
            console.log(result);
        })

Promise的常用API

实例方法:

  1. promise.then()得到异步任务的正确结果
promise.then(onFulfilled, onRejected)
//onFulfilled代表成功后执行的回调函数
//onRejected代表失败后执行的回调函数
  1. promise.catch()获取异常信息(相当于reject)
promise.then(onFulfilled).catch(onRejected)
//其实就是.then方法的别名,简化了对error的处理
//promise对象的错误,会一直向后传递,直到被捕获。
  1. promise.finally()成功与否都会执行

对象方法:

1.Promise.all()并发处理多个异步任务,所有的任务都执行完才有结果

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 3000, "first");
});
var p2 = new Promise(function (resolve, reject) {
    resolve('second');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "third");
}); 
Promise.all([p1],[p2],[p3]).then((result)=>{
	console.log(result)
})
----------------------------------
打印结果为
//三秒后显示
//(3) ['first', 'second', 'third']

2.Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果,并把第一个改变状态的promise的返回值,传给回调函数。

        var p1 = new Promise(function (resolve, reject) {
            setTimeout(reject, 3000, "one");
        });
        var p2 = new Promise(function (resolve, reject) {
            setTimeout(resolve, 1000, "two");
        });
        Promise.race([p1, p2]).then(function (value) {
            console.log('resolve', value); 
        }, function (error) {
            console.log('reject', error);
        });
----------------------------------
打印结果为
//一秒后显示
//resolve two

未完待续........