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的状态改变。