ES6：promise是啥？强力一波！

2024年1月27日 186次阅读 来源: QangLee

title: ES6：了解promise
subtitle: 记录学习到的知识点，学习阮一峰大神es6书的一些心得

回调地狱感受一下：

let target = {
    data:"callBack hell!!!",
    timeout:1000
}
let asyncFunc = function(cb,data = this.data){
    setTimeout( (dataTemp) => {
        console.log(dataTemp);
        cb();
    }, this.timeout,data);
}.bind(target);
asyncFunc(()=>{
    asyncFunc(()=>{
        asyncFunc(()=>{
            asyncFunc(()=>{
                asyncFunc(()=>{
                    asyncFunc(()=>{
                        console.log("吓人不。。。。。");
                    })
                })
            })
        })
    })
})

回调套多了，简直没法看。。。

promise改良一波

let target = {
    data: "promise ~~",
    timeout: 1000
}
let asyncFunc = function (data = this.data) {
    var pObj = new Promise((resolve,reject) => {
        setTimeout( (dataTemp) => {
            console.log(data);
            resolve(data)
        }, this.timeout,data);
    })
    return pObj;
}.bind(target)
asyncFunc()
.then(()=>asyncFunc())
.then(()=>asyncFunc())
.then(()=>asyncFunc())
.then(()=>asyncFunc())
.then(()=>asyncFunc())
.then(()=>asyncFunc("舒服多了有没有"))

promise

  • 是一种异步的解决方案，比传统的回调更合理且强大。
  • 简单来说就是一个容器，里面存在着某个未来发生的事件（通常是一个异步操作）的结果。
  • 语法上来讲是一个对象，通过他能够得到异步操作的信息
  • promise可以将各种异步操作用同样的方法进行处理，因为它提供了统一的api
  • 异步操作以同步操作的流程表现

三种状态：

  • Pending 进行中
  • Fulfilled 已成功
  • rejected 已失败

两个特点：

1.promise对象的状态不受外界影响</font>：只有异步操作的结果才会决定该对象目前处于什么状态，除此以外的其他操作都无法改变，这也是为什么叫‘promise’，中文意思叫‘承诺’

2.一旦状态改变就不会再变，任何时候都能得到结果</font>：

  • promise对象的状态改变只有两种可能：Pending->Fulfilled和Pending->Rejected，
  • resolved-已定型：只要状态发生改变就会凝固，一直保持这个结果，这时叫做resolved

  • 厉害了：与事件不同，当其触发了，错过再监听就得不到结果了，但是promise内部的异步函数执行完了，再去添加回调还能得到结果,示例代码：

    let pObj = new Promise((resolve,reject)=>{
    console.log("测试执行后，在添加回调是否可以");
    let bSuccess = true;
    bSuccess ? resolve("yes") : reject("no");
})
pObj.then(res => { console.log(res) })

注意

promise对象一旦创建立即执行，上面的代码为例，不能中途取消。如果不设置reject,内部炸了，也不能传递到外层代码-mark-后面会有介绍这点

resolve,reject,.then(),.catch()

`new Promise((resolve,reject)=>{
let bSuccessed = true;
if(bSuccessed){

resolve("Fulfilled");resolve("Fulfilled");

}else{

//失败
reject("Rejected");

}
}).then(res).catch(res)`

Promise的构造函数接受的参数是一个函数，这个函数中的两个参数：resolve，reject，是由js引擎提供，不需要自己设置，确实看起来有点怪,这两个参数都接受Promise对象传递出来的值作为参数

  • resolve：改变状态从 Pending -> Fulfilled
  • reject：改变状态从 Pending -> Rejected
    原文作者：QangLee
    原文地址: https://segmentfault.com/a/1190000018419605
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞