Promise对象学习笔记

认识Promise对象 :

const promise=new Promise((resolve,reject)=> {
    
    //... some code
    if (当操作的结果是xxx,则返回操作成功的状态) {
        resolve(value)
    }
    else{
        reject(error)
    }
})
promise.then(function fn_resolve(value) {
    //sucess
},function fn_reject(error) {
    //failure
})

Promise构造函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。

resolve函数的作用是:将Promise对象的状态从“未完成”变为“成功”(即从pending变为resolved,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;(就是传递给then方法。还可以传一些参数))

reject函数的作用是:将Promise对象的状态从“未完成”变成“失败”(即从pending变为rejected)。在异步操作失败时调用并将异步操作报出的错误,作为参数传递出去。

 

then方法可以接收两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象状态变为rejected时调用;其中第二个函数是可选的,不一定要提供,这两个函数都可以接受Promise对象传出去的值作为参数

Promise对象执行流程:

promise对象的特点:

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、resolved(成功)、rejected(失败)。

只有异步操作的结果(即在新建Promise对象时里面的some code 代码执行的结果是否成功)来决定当前哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,意为“承诺”,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象状态改变只有两种可能,

pending->resolved或peding->rejected,只有这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为已定型。

如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。也就是说可以添加多个then,但每个then里面都是resolved或rejected被执行。

代码示例1:

function sayhello() {
    return new Promise((res,rej)=>{
        setTimeout(res,3000)
    })
    
}
sayhello().then(()=>{
    console.log('hello')
})

sayhello函数返回一个Promise对象,Promise对象在3s之后调用回调函数resolve,所以3s过后打印hello

 示例代码2:


function sayhello() {
    return new Promise((res,rej)=>{
        setTimeout(()=>{},3000)
        res();
    })
    
}
sayhello().then(()=>{
    console.log('hello')
})


程序运行后会不会在3s过后再打印hello呢?
答案是立即打印hello,setTimeout被扔到任务队列里,并不影响后续代码的执行

示例代码3(js事件周期):

let promise=new Promise((res,rej)=>{
    console.log('你好')
    res('世界')
})
promise.then((value)=>{
    console.log(value)
})
console.log('Hi')

运行结果:

示例代码4(图片懒加载):

function loadImage(url) {
    return new Promise((res,rej)=>{
        let image=new Image()
        image.onload=function () {
            res(image)
        }
        image.onerror=function () {
            rej(new Error('could not load image at'+url))
        }
        image.src=url
    })
  }

示例代码5(Promise对象的状态嵌套):

const p1=new Promise((res,rej)=>{
    setTimeout(()=>{
        rej('p1被激活')
    },3000)
})
p1.catch(value=>console.log(value))

const p2=new Promise((res,rej)=>{
    res(p1)
})
p2
.then(()=>{console.log('sucess')})
.catch(()=>{console.log('fail')})

此时p1的状态会传递给p2,也就是说p1的成功或失败影响了p2的成功或失败的回调函数的执行,p2会一直等待p1的状态改变。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值