Promise、手写一个Promise

Promise

1、如何创建一个 new Promise（课堂里让大家背过）
2、如何使用 Promise.prototype.then（可查 MDN）
3、如何使用 Promise.all（可查 MDN）
4、如何使用 Promise.race（可查 MDN）

function fn(){
    return new Promise((resolve, reject) =>{
    //异步代码
        成功时调用 resolve(数据)
        失败时调用 reject(错误)
    })
}
fn().then(onsuccess, onfail)
        .then(onsuccess2, onfail2)
        .catch(onerror)
        .always(onother)

promise后面( )的内容为回调，条件达成了帮你去做某事，比如console.log()：指向的是.then的第一个成功函数

Promise.all([promise1,promise2]).then(success1,fail1)

promise1和promise2都成功才会调用success1

Promise.race([promise1,promise2]).then(success1,fail1)

promise1和promise2只要有一个成功就会调用success1
promise1和promise2只要有一个失败就会调用fail1
总之，谁第一个成功或失败，就认为是race的成功或失败

手写一个Promise

function fn(){
    return new Promise((resolve, reject) =>{
    //异步代码
        成功时调用 resolve(数据)
        失败时调用 reject(错误)
    })
}
//类似new Function('x','y','return x+y');new Array(len)等，new Promise()中的参数是异步成功后要报出的号码

//异步操作：成功后resolve报出号码，resolve就是.then的第一个成功函数
fn().then(()=>{},()=>{})

从哪来：自定义class对象，声明方法
到哪去：要实现状态变化、函数执行、.then 下面这个函数

p= new Promise2((resolve,reject)=>{
    setTimeout(() =>{
        resolve(100)
    },1000)
})
p.then((data)=>console.log(data))

在Promise2这个自定义对象中，要处理的是异步成功后报出号码
//异步分为成功和失败（成功执行resolve、失败reject）
//怎么知道成功：setTimeout1秒后执行resolve()、
// 怎么报出：把自定义的this.resolve作为resolve()来执行（resolve是一个参数）
// 改变state状态、再是把.then的第一个成功函数作为succeed函数执行
（.then的第一个成功函数成为resolve()来执行：this.succeed = succeed）

class Promise2{
    succeed = null
    fail = null
    state = 'pending'
    constructor(fn){
        fn(this.resolve.bind(this),this.reject.bind(this))
    }
    //某个时机到了，调用resolve方法，状态改为fulfilled
    resolve(result){
        setTimeout(() =>{
            this.state= 'fulfilled'
            this.succeed(result)
            
        })
    }
    //如果中间出错了，改为调用reject
    reject(reason){
        setTimeout(() =>{
            this.state= 'rejected'
            this.fail(reason)
        })
    }
    then(succeed,fail){
        this.succeed = succeed
        this.fail =fail
    }
}
p= new Promise2((resolve,reject)=>{
    setTimeout(() =>{
        resolve(100)
    },1000)
})
p.then((data)=>console.log(data))
//undefined(函数输出)
//100
p.state
//fulfilled

new Promise2()这里面的箭头函数相当于参数，传给constructor（），也就是fn

(resolve,reject)=>{
    setTimeout(() =>{
        resolve(100)
    },1000)
}

constructor(fn){
fn(this.resolve.bind(this),this.reject.bind(this))
    }

可参考class写法
constructor()里就是函数的参数

原：function Person(name,age){
    this.name=name
    this.age= age
}
Person.prototype.sayHi=function(){}

新：class Person{
    constructor(name,age){
        this.name= name;
        this.age = age
    }
    sayHi(){ console.log() }
}

//某个时机到了，调用resolve方法，状态改为fulfilled
    resolve(result){
        setTimeout(() =>{
            this.state= 'fulfilled'
            this.succeed(result)
            
        })
    }
    //时机一到，就去修改succeed

    then(succeed,fail){
        this.succeed = succeed
        this.fail =fail
    }

、、、、、、、、、、
p= new Promise2((resolve,reject)=>{
    setTimeout(() =>{
        resolve(100)
    },1000)
})
p.then((data)=>console.log(data))

最终梳理

到哪去：要实现状态变化、函数执行、.then 下面这个函数
new Promise2对象解决异步问题，
相当于new Function（‘x’,‘y’,‘return x+y’） ，告诉新函数对象要去做的事
这里也是告诉Promise对象要去做的事

某个时间到了（setTimeout(()=>{},1000)）就报号提醒(resolve(100))

从哪来：自定义class对象，声明方法
新函数要去整合
new Promise相当于什么，有什么功能，参数接的是Array的len,还是Function的’return ’

class相当于自己定义了一个对象，然后给这个对象赋上方法和参数

Promise参数是一个函数，做的事是时间到了后报号提醒
这个作为参数的函数怎么去执行

constructor( fn){   //作为参数
    //让这个传进来的函数执行
    //相当于 function  ( resolve,reject ){   
    //           setTimeout(() =>{
    //                resolve(100)
    //                },1000)
    //  }(  this.resolve  ,  this.reject  )   这里的执行传的是Promise自定义的this.resolve和reject方法
   
fn( this.resolve  ,  this.reject )
}
类似于    //私有属性
constructor( name,age){  this.name = name;this.age= age }

怎么判断成功还是失败（resolve还是reject）：1秒后执行resolve

触发自定义的resolve方法:做放出数据的处理（报号）

this.resolve( data ){
    setTimeout({
        this.state= fulfilled
        this.succeed ( data)
    })
}

这里的succeed函数是怎么来的
又是怎么把数据给放出来

当p=new Promise2()
执行p.then((data)=>console.log(data))时

触发自定义的then方法，把执行的.then()中的函数传给this.succeed
让this.resolve中的succeed来执行console.log()

this.then(succeed){
    this.succeed  =  succeed
}

衔接this.resolve里的this.succeed

this.resolve( data ){
    setTimeout({
        this.state= fulfilled
        this.succeed ( data)
    })
}

我的错误理解

对Promise的理解错误
以为 new Promise2（(resolve,reject)=>{
setTimeout(() =>{
resolve(100)
},1000)
}）这里resolve执行的是报号，后面的.then是有人去提醒，把这两个拆开来看了

其实resolve就是后面的第一个.then