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 123return 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（） 可以拿到错误