Promise-个人知识记录

肆柒呀
102 阅读2分钟

一、定义&作用

1、promise是什么？

是一种异步程序执行的机制——《JS高级程序设计》

2、作用

  • 为了解决 代码嵌套形成的回调地狱

二、语法

1、完整写法

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('666')
  }, 100)
  setTimeout(() => {
    reject('999')
  }, 200)
})
  .then(v => console.log(v)) // then的形参为resolve传入的值
  .catch(err => console.log(err)) // catch的形参为reject传入的值
  .finally(() => {
        console.log('不管成功还是失败都会执行')
      })
// 只接收第一个返回的结果  666

2、简写

// 成功状态简写
Promise.resolve('666').then(v => console.log(v))
// 失败状态简写
Promise.reject('999').then(err => console.log(err))

三、应用场景/解决的问题

1、取消正在执行中的期约

  • 原理：利用promise只接收首个状态的值，只要先于其他状态前返回一个(resolve/reject)状态,后续状态的值将不接收
  • promise内部已经调用的方法无法终止！
<body>
  <button id="start">Start</button>
  <button id="cancel">Cancel</button>
</body>
<script>
  // 开始按钮
  const start = document.querySelector('#start')
  // 中止按钮
  const cel = document.querySelector('#cancel')

  start.addEventListener('click', () => {
    new Promise((resolve, reject) => {
      console.log('开始啦')
      setTimeout(() => {
        resolve('成功啦')
      }, 2000)
      // 终止按钮绑定resolve/reject状态
      cel.addEventListener('click', () => {
        reject('终止啦')
        // reject('终止啦')
      })
    })
      .then(v => console.log(v))
      .catch(err => console.log(err))
  })
</script>

四、扩展

- Promise.all

1、定义&作用

  • 多个异步函数同时调用，接收所有resolve返回的值

2、语法

  • 其形参接收一个数组
  • 数组内所有Promise对象都返回resolve状态，接收所有resolve状态的值，在.than里返回一个包含所有接收值的数组。
  • 数组内有一个Promise对象返回reject状态,其首个reject状态的值在.catch接收，后续如果还有reject状态返回将直接报错
    const p1 = new Promise((resolve, reject) => {
      resolve('p1', console.log(111))
    })
    const p2 = Promise.resolve('p2')
    const p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('p3')
      }, 1000)
    })
    const p4 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('p4')
      }, 1100)
    })
    const xxx = 'xxx'
    // 也可以接收非Promise对象
    Promise.all([p1, p2, p3, xxx])
      .then(v => console.log(v))
      .catch(err => console.log(err))

- Promise.race

1、定义&作用

  • 多个异步函数同时调用，接收第一个返回的值

2、语法

  • 其形参接收一个数组
  • 接收数组返回的首个状态（resolve/reject）的值，但数组内的Promise对象不会终止执行
// 一秒后返回resolve状态，值为：p1
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1')
  }, 1000)
})
// 返回reject状态，值为：p2
const p2 = Promise.reject('p2')
// 返回reject状态，值为：p3
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p3')
  }, 1100)
})

Promise.race([p1, p2, p3])
  .then(v => console.log(v))
  .catch(err => {
    console.log('err', err)
  })
// 结果为：err p2

五、结果/结论的验证过程

1、验证：接收首个状态的值后，不接收后面状态的值

let xxx = ''
new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('aaa')
  }, 1000)
  setTimeout(() => {
    // 将xxx='bbb'换成'bbb'
    resolve('bbb')
  }, 2000)
})
  .then(v => {
    xxx = v
  })
  .catch(err => {
    xxx = err
  })
setTimeout(() => {
  console.log(xxx)
}, 1100)
setTimeout(() => {
  console.log(xxx)
}, 2100)
// 输出结果：
// aaa
// aaa

2、验证：接收reject（首个）状态后，（后续）resolve状态内的代码会继续执行

let xxx = ''
new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('aaa')
  }, 1000)
  setTimeout(() => {
    resolve((xxx = 'bbb'))
  }, 2000)
})
  .then(v => {
    xxx = v
  })
  .catch(err => {
    xxx = err
  })
setTimeout(() => {
  console.log(xxx)
}, 1100)
setTimeout(() => {
  console.log(xxx)
}, 2100)
// 输出结果：
// aaa
// bbb
avatar
文章
阅读
粉丝