js进阶笔记之Promise

目录

为什么用Promise

Promise的基本语法

Promise的then方法

then的链式调用

Promise的相关方法

---

为什么用Promise

JS代码分为同步代码和异步代码

同步: 代码依次执行，上一个任务完成后，下一个任务才执行

异步 遇到耗时任务不必等待其完成，继续执行后面的任务，如定时器，事件回调，ajax请求(axios) js是单线程的,先执行同步代码，后执行异步代码

异步的实现: 通过回调函数来执行的 ,异步容易造成回调地狱

需求 先发第一次请求，等这次请求回来再发另一次请求容易造成回调地狱

为了优化异步流程->Promise

回调函数->Promise->generator->async await

Promise的基本语法

Promise是一个内置构造函数，接受一个函数（executor)作为参数，

该参数函数立即调用，该执行函数可以放同步或异步，

参数函数接受两个形参  resolve   ,reject  ； resolve   ,reject  是函数
 resolve（）调用表示成功，reject（）调用表示失败。

  const promise = new Promise((resolve, reject) => {
        //  任务
        // console.log(123)
        setTimeout(() => {
          console.log('执行')
          resolve('data数据')
    
          //  reject('失败')
        }, 1000)
      })

      )

Promise的then方法

​ promise实例身上有个then方法，then方法有两个参数 ​

第一个参数 成功时候的回调 ​

第二个参数 失败的时候的回调

promise三个状态 默认状态（等待态pending），成功态(fulfilled)，失败态(rejected)

成功了就不能失败

      const promise = new Promise((resolve, reject) => {
        //  任务
        // console.log(123)
        setTimeout(() => {
          console.log('执行')
          resolve('data数据')
          // 成功了就不能失败
          //  reject('失败')
        }, 1000)
      })

      // promise实例身上有个then方法, then方法有两个参数
      // 第一个参数 成功时候的回调
      // 第二个参数 失败时候的回调
      promise
        .then(
          (data) => {
            console.log(data)
            return new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve('data数据2')
              }, 1000)
            })
          },
          (reason) => {
            console.log(reason)
          }
        )
        .then((data) => {
          console.log(data)
        })
      console.log(456)

then的链式调用

return 的是 基本数据   ，会走下一个then 成功回调
出错了 ， 走下一个then失败回调
返回一个promise实例，它成功走then的成功回调，它失败走then的失败回调

      const promise = new Promise((resolve, reject) => {
        //  任务
        // console.log(123)
        setTimeout(() => {
          console.log('执行')
          resolve('data数据')
          // 成功了就不能失败
          //  reject('失败')
        }, 1000)
      })

      promise
        .then(
          (data) => {
            console.log(data)
            // return 基本数据 会走下一个then成功回调
            // 出错了 走下一个then失败回调
            // 返回一个promise实例，它成功走then的成功回调，它失败走then的失败回调
            // return 'hello'
            //  throw 123
            return new Promise((resolve, reject) => {
              resolve('ok')
            })
          },
          (reason) => {
            console.log(reason)
          }
        )
        .then(
          (data) => {
            console.log(data)
          },
          (r) => {
            console.log(r)
          }
        )
      console.log(456)

Promise的相关方法

promise 6个静态方法：all( ) ， any( )， race( ) ， allSettled( ) ，reject( ), resolve( )

all
Promise.all( )返回值是promise实例
接收一个数组，数组里可以放多个promise对象
Promise.all( ).then(res)  拿到结果 

静态方法Promise.all( [promise1, promise2，promise3])返回是一个promise
只要有一个失败就不走了，打印失败的信息，就走第二个回调
所有的都成功了，才走then的第一个回调

或者在then后面用.catch（）{ }捕获错误的信息

     const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok1')
                resolve('ok1')
            }, 3000)
        })

        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok2')
                //reject('出错啦')
            }, 1000)
        })

        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok3')
                resolve('ok3')
            }, 1000)
        })

           Promise.all([p1, p2, p3])
        .then((res) => {
          console.log(res) // [p1的成功结果，p2的成功结果，p3的成功结果，]
          //) ['ok1', 'ok2', 'ok3']
        })
        .catch((err) => {
          console.log(err)
        })

allSettled静态方法
Promise.allSettled( )返回数组中每一promise的状态，值
不论成功或失败都能获取每一个promise的具体值

allSettled得到每一个promise的详细结果，无论该promise是成功还是失败

  const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok1')
                resolve('ok1')
            }, 3000)
        })

        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok2')
                //reject('出错啦')
            }, 1000)
        })

        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok3')
                resolve('ok3')
            }, 1000)
        })

      Promise.allSettled([p1, p2, p3])
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    

race()
Promise.race( [  ])只要谁先执行完，就打印谁的结果
Promise.race()谁先回来(不管成功还是失败)就打印谁的结果

   const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok1')
                resolve('ok1')
            }, 3000)
        })

        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok2')
                //reject('出错啦')
            }, 1000)
        })

        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok3')
                resolve('ok3')
            }, 1000)
        })

      Promise.race([p1, p2, p3])
        .then((res) => {
          console.log(res) //ok2
        })
        .catch((err) => {
          console.log(err)
        })

any（）
Promise.any( )
得到第一个成功的promise
都不成功打印都失败了

  const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok1')
                resolve('ok1')
            }, 3000)
        })

        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok2')
                //reject('出错啦')
            }, 1000)
        })

        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                // reject('ok3')
                resolve('ok3')
            }, 1000)
        })

        Promise.any([p1, p2, p3])
        .then((res) => {
          console.log(res) 
        })
        .catch((err) => {
          console.log(err)
        })

Promise.reject()得到一个失败的promise
Promise.resolve()得到一个成功的promise
相当于new了一个promise
catch（） 可以拿到错误