js Promise的基本使用

从语法上来说: Promise 是一个构造函数

从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功 / 失败的结果值

• Promise是一个构造函数，通过 new 操作符可创建一个 promise 实例
• 该构造函数接收一个函数作为参数，这个函数我们通常称为执行器（executor）函数
• 执行器函数接收两个参数：这两个参数作为函数可调用并可以传入相应数据，通常我们以resolve和reject进行命名
  • 第一个参数 resolve ：异步操作执行成功后的回调函数
  • 第二个参数 reject：异步操作执行失败后的回调函数

const promise = new Promise((resolve, reject) => { // 执行器
  // 异步操作
  setTimeout(() => {
    const rand = Math.random() * 100
    // 模拟成功或失败
    if (rand >= 50) {
        // 成功时执行
      resolve()
    } else {
        // 失败时执行
      reject()
    }
  }, 1000)
})

 

resolve函数的作用：

将promise实例的状态从 pending 变为 fulfilled，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去

reject函数的作用：

将 promise 实例的状态从 pending 变为 rejected，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

promise实例具有三种状态

• pending（进行中，最初状态）
• resolved：（已成功，有时候也称为fulfilled）
• rejected：(已失败)

 

then 方法

Promise原型对象上具有then方法，该方法是为 promise 实例指定处理程序的主要方法，promise 实例可以直接调用，then 方法接收两个可选参数（onResolved 处理程序，onRejected 处理程序），该方法返回一个新的 promise 实例

• 提供第一个参数onResolved处理程序：fulfilled状态的回调函数
• 提供第二个参数onRejected处理程序：rejected状态的回调函数

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const rand = Math.random() * 100
    if (rand >= 50) {
        // 执行resolve 并传入相应数据
      resolve({name: 'James', age: 36})
    } else {
       // 执行reject 并传入异常
      reject(new Error('Error'))
    }
  }, 1000)
})

promise.then(
  (value) => {
    // 当promise实例的状态为 fulfilled 时执行
    console.log('执行成功时的结果值数据', value)
  },
  (error) => {
    // 当promise实例的状态为 rejected 时执行
    console.log('执行失败时的结果值数据', error)
  }
)

因为 promise 实例的状态发生改变，只会存在一种结果，传入两个处理程序，要么状态变为 fulfilled，onResolved 执行，要么状态变为 rejected，onRejected 执行。当然，若状态永远处于pending，则这两个处理程序都不会执行

关于链式调用

前面我们提到，then方法最终会返回一个新的 promise 实例，因此可以进行链式调用，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({name: 'James', age: 36})
  }, 1000)
})

promise.then(
  (value) => {
    console.log('onResolved1', value)
    return value
  },
).then(
  (value) => {
    console.log('onResolved2', value)
    return value
  },
).then(
  (value) => {
    console.log('onResolved3', value)
    return value
  }
)