Promise笔记

Promise 笔记

1、promise 的基本概念

首先，Promise 它 拥有三种状态以及对应的标识符

Pending --> 创建后就会是这种的状态

Fulfilled --> resolve （成功、接受）

Reject --> reject （失败、拒绝）

Promise的状态一旦改变就确定了。 Pending --> resolve/reject 不可逆

2、promise 的基本操作

当 promise 创建后，并且函数内部没有相应的 resolve/reject 函数的时候，他就是 pending 状态

const p1 = new Promise((resolve, reject) => {
})
console.log('p1: ', p1); // 此时的输出是 pending 状态的

​
另外两个状态都是自己通过判断来完成的， resolve === 成功 ， reject === 失败

​ 与之对应的语法就是 .then 和 .catch

​ 通过判断进入 resolve 会执行.then 里面的代码，进入reject 就会执行 .catch 里面的代码

const flag = true
const pro = new Promise((resolve, reject) => {
  if (flag){
    resolve('resolve')
  } else {
    reject('reject')
  }
})
pro.then((res) => {
  console.log('成功了', res)
})
.catch((err) => {
  console.log('失败了', err)
})

补充一个 .finally ，这是无论你前面如何判断，如何进入，都会进入这个函数

const flag = true
const pro = new Promise((resolve, reject) => {
  if (flag){
    resolve('resolve')
  } else {
    reject('reject')
  }
})
pro.then((res) => {
  console.log('成功了', res)
})
.catch((err) => {
  console.log('失败了', err)
})
.finally(() => {
  console.log('pro中的 finally');
})

3、promise的链式调用

我们知道了，pro.then 是在进入 resolve 后会执行的内容，promise可以支持多个.then 按顺序执行

并且第二次.then传入的参数，是 第一次处理后传出来的值

只有 .then 可以这样使用 .catch 只会进入第一次就结束

// Promise 的链式调用
const flag = true
const pro2 = new Promise((resolve, reject) => {
  if (flag){
    resolve(200)
  }else {
    reject(404)
  }
}).then(res => res + 100)
.then(res => console.log('这是第二个res:', res))
.catch(res => console.log('这是错误的res: ', res))
.finally(() => console.log('pro2中的finally'))

当然，如果直接进入 reject 也会直接 进入第一个然后结束

const flag = false
const pro2 = new Promise((resolve, reject) => {
  if (flag){
    resolve(200)
  }else {
    reject(404)
  }
}).then(res => res + 100)
.then(res => console.log('这是第二个res:', res))
.catch(res => console.log('这是错误的res: ', res))
.catch(res => console.log('这是错误的第二个res: ', res))
.finally(() => console.log('pro2中的finally'))

当然最后还是会进入 .finally

4、promise 的异步

    // Promise的  异步 变成  同步
    function one(){
      return 'I AM one'
    }

    function two(){
      setTimeout(() => {
        console.log('I AM two!');
      }, 3000)
    }

    function three(){
      return 'I AM three'
    }


    function run(){
      console.log(one());
      two();
      console.log(three());
    }

    run()

如果加入 async 和 await

// Promise的  异步 变成  同步
function one(){
  return 'I AM one'
}

// function two(){
//   setTimeout(() => {
//     console.log('I AM two!');
//   }, 3000)
// }
function two(){
  return new Promise ((resolve, reject) => {
    setTimeout(() => {
      resolve('I AM TWO')
    }, 3000)
  })
}

function three(){
  return 'I AM three'
}


// function run(){
//   console.log(one());
//   two();
//   console.log(three());
// }

async function run(){
  console.log(one());
  console.log(await two());
  console.log(three());
}

run()

如此便可以，保证 在执行完 two 后，再执行 three

5、promise的 all/race 方法

.all 方法，promise 的一个方法，这个方法传入的 参数是 一个 promise 数组

有两种情况:

​ 1、当传入的 promise 数组，全部都是 resolve 的时候，输出一个 promise中 resolve 的 结果集合

// promise 的 all /race 方法
const createPromise = (delay, flag = true) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (flag){
        resolve(`成功${delay}`)
      }else {
        reject(`失败${delay}`)
      }
    }, delay)
  })
}
Promise.all([createPromise(1000), createPromise(2000), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))

并且会在，最后一个执行完毕后，再将 结果数组 一并输出

​ 2、当传入的 promise 数组，只要有一个 是 reject（错误、失败、拒绝）状态，那么最后输出的 结果 就只有一个 错误状态

// promise 的 all /race 方法
const createPromise = (delay, flag = true) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (flag){
        resolve(`成功${delay}`)
      }else {
        reject(`失败${delay}`)
      }
    }, delay)
  })
}
Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
.then(res => console.log('成功 ', res))
.catch(err => console.log('失败 ', err))

等待两秒后输出，就是因为，只要promise 数组中有一个 判断出了 reject 就会停止后面的判断，直接输出那一个错误信息

.race 方法，顾名思义就是 赛跑，的意思，谁先结束，就执行谁，不管对错，只返回一个

const createPromise = (delay, flag = true) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (flag){
        resolve(`成功${delay}`)
      }else {
        reject(`失败${delay}`)
      }
    }, delay)
  })
}
// Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
// .then(res => console.log('成功 ', res))
// .catch(err => console.log('失败 ', err))

Promise.race([createPromise(2000, false), createPromise(1000), createPromise(3000)])
  .then(res => console.log('成功 ', res))
  .catch(err => console.log('失败 ', err))

当 1000 的定义为 false 时：

const createPromise = (delay, flag = true) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (flag){
        resolve(`成功${delay}`)
      }else {
        reject(`失败${delay}`)
      }
    }, delay)
  })
}
// Promise.all([createPromise(1000), createPromise(2000, false), createPromise(3000)])
// .then(res => console.log('成功 ', res))
// .catch(err => console.log('失败 ', err))

Promise.race([createPromise(2000), createPromise(1000, false), createPromise(3000)])
  .then(res => console.log('成功 ', res))
  .catch(err => console.log('失败 ', err))

没了。。。