Promise简单入门

2020-02-16 Javascript

Promise 的作用

Promise 被设计用于改善 JS 中的异步编程，与事件及回调函数对比，在异步操作方面为你提供了更多的控制权与组合性。 Promise 调度被添加到 JS 引擎作业队列，以便稍后执行。不过此处有另一个作业队列追踪着 Promise 的完成与拒绝处理函数，以确保适当的执行。

Promise 具有三种状态：挂起、已完成、已拒绝。一个 Promise 起始于挂起态，并在成功时转为完成态，或在失败时转为拒绝态。在这两种情况下，处理函数都能被添加以表明 Promise 何时被解决。 then() 方法允许你绑定完成处理函数与拒绝处理函数，而 catch() 方法则只允许你绑定拒绝处理函数。

Promise 的特点

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用，promise 状态一旦改变则不能再变。

const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

  // -> then:success1

const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

  // -> then:success1

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(1)
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})
// 1
// success 1002
// success 1002

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(1)
    resolve('success')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})
// 1
// success 1002
// success 1002

promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。

Promise.prototype.then()

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })
  // then: 1
  // then: 2

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })
  // then: 1
  // then: 2

then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数，传入非函数则会发生值穿透

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
  // 1

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
  // 1

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Javascript # Promise

···

Promise 的作用 #

Promise 的特点 #

Promise.prototype.then() #

Promise 的作用

Promise 的特点

Promise.prototype.then()