异步Promise及状态特点

Promise

　异步通信编程的一种解决方案，它比传统回调式更加的强大；解决了ES6前多层次嵌套的同步、异步，执行顺序混乱且不好维护等问题。

　Promise使用 new 来调用 Promise 的构造器来进行实例化，接受一个函数作为参数，并且要传入resolve、reject两个参数执行回调， new Promise((resolve,reject)=>{}) 。

resolve执行成功后（状态为Fulfilled）的回调函数

reject执行失败后（状态为Rejected）的回调函数

let p=new Promise((resolve,reject)=>{
// 异步操作后,返回成功或失败
// 判断成功或失败去执行resolve或reject
    if(true){
        resolve("异步成功");
    }else{
        reject("异步失败");
    }
});

　把原来多层嵌套的的回调函数分离出来，通过

.then执行resolve的回调函数

.catch执行reject的回调函数

　　　可进行连缀链式操作.then().catch()

p.then((val)=>{
    console.log(val);
}).catch((reason)=>{
    console.log(reason);
})

　　　catch() 方法也可以作为 then 的第二参数存在，

//一体化操作
p.then((val)=>{
    console.log(val);
},(reason)=>{
    console.log(reason);
})

模拟多层异步通信的实例测试，异步多个内容，并按指定顺序执行，

　　不进行Promise异步的执行顺序

// 模拟异步1
setTimeout(()=>{
    console.log("1.返回异步通信");
},3500);
// 模拟异步2
setTimeout(()=>{
    console.log("2.返回异步通信");
},800);
// 模拟异步3
setTimeout(()=>{
    console.log("3.返回异步通信");
},1500);

　　　按照时间： 2.返回异步通信 3.返回异步通信 1.返回异步通信

Promise异步：

let p1=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("异步1");
    },3500);
});
let p2=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("异步2");
    },800);
});
let p3=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("异步3");
    },1500);
});

p1.then(val=>{
    console.log(val);
    return p2;
}).then(val=>{
    console.log(val);
    return p3;
}).then(val=>{
    console.log(val);
})

　　　同时(3500)：异步1 异步2 异步3

状态特点

　Promise对象异步操作的三种状态：

　　　（1）Pending 初始状态 (进行中)

　　　（2）Fulfilled 成功

　　　（3）Rejected失败

　异步操作执行后，它得到的结果来决定其当前状态，其它任何操作都无法改变.

　Promise状态只有两种运行方式：1、从 Pending 到 Fulfilled

　　　　　　　　　　　　　　　 2、从 Pending 到 Rejected

　当状态已经固定后，此时就变成 Resolved (已完成)，

　　　　pending → resolve 方法 → fulfilled → resolved

　　　　pending → reject 方法 → rejected → resolved

let p=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("异步成功");
    },3500);
});
console.log(p); //Promise {<pending>}

p.then(val=>{
    console.log(val);
    console.log(p); //Promise {<fulfilled>: '异步成功'}
})

更多方法

Promise.all()

　　使用Promise.all()，可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据（谁跑的慢，以谁为准）。

　　Promise.all() 方法的参数必须具有 iterator (迭代器)接口，且返回的每个成员都是 Promise 实例。

　接受一个数组作为参数，p1、p2、p3 都是 Promise 对象的实例。

let p=Promise.all([p1,p2,p3]);
p.then(val=>{
    console.log(val); //(3) ['异步1', '异步2', '异步3']
})

　p 的状态由 p1、p2、p3 决定，分成两种情况：

　　　① 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

　　　② 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race()

　　谁跑的快，以谁为准执行回调，只输出第一个改变状态的实例。

　　只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

let pp=Promise.race([p1,p2,p3]);
    pp.then(val=>{
    console.log(val); //异步2
})

语法糖：

　　resolve() 直接返回成功的 Promise实例

　　reject() 直接返回失败 Promise实例

let ps=Promise.resolve("成功");

等同于：

let pj=Promise.reject("失败");

ps.then(val=>{
    console.log(val); //成功
    // return pj;
    }).catch(reason=>{
    // console.log(reason);
});

常用类型：保持类型统一性

function getp(){
    if(true){
        return new Promise(resolve=>{
            resolve("成功");
        })
    }else{
        return 0;
    }
}
getp().then(val=>{
    console.log(val);
})

　如果值为true，可以正常返回 ,但如果为false则会报错，

　为了让类型统一，将返回的 0 改成 Promise类型，这时候就可以用到语法糖

posted @ 2021-11-30 22:07 十七日尾阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

十七日尾

异步Promise及状态特点

公告