资讯专栏INFORMATION COLUMN

ES6:promise是啥?强力一波!

adam1q84 / 3212人阅读

摘要:了解记录学习到的知识点,学习阮一峰大神书的一些心得回调地狱感受一下吓人不。。。。。改良一波舒服多了有没有是一种异步的解决方案,比传统的回调更合理且强大。简单来说就是一个容器,里面存在着某个未来发生的事件通常是一个异步操作的结果。

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

2.一旦状态改变就不会再变,任何时候都能得到结果:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102491.html

相关文章

  • React的ref是啥强力一波

    摘要:原理就是父组件把的回调函数当做传递给子组件,然后子组件把这个函数和当前的绑定,最终的结果是父组件的存储的是子组件中的。 React ref 理解:通过指定ref获得你想操作的元素,然后进行修改 string 使用方法 var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.g...

    MorePainMoreGain 评论0 收藏0
  • 2019-我的前端面试题

    摘要:先说下我面试情况,我一共面试了家公司。篇在我面试的众多公司里,只有同城的面问到相关问题,其他公司压根没问。我自己回答的是自己开发组件面临的问题。完全不用担心对方到时候打电话核对的问题。 2019的5月9号,离发工资还有1天的时候,我的领导亲切把我叫到办公室跟我说:阿郭,我们公司要倒闭了,钱是没有的啦,为了不耽误你,你赶紧出去找工作吧。听到这话,我虎躯一震,这已经是第2个月没工资了。 公...

    iKcamp 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<