Promise 简单理解与使用

一、概念

  • Promise 是异步编程的一种解决方案,其实是一个构造函数,自身上有 all、resolve、reject 这几个方法,实例对象上有 then、catch 等方法。
  • 简单理解,Promise 是一个容器,里面保存着某个未来才会结束的事件(通常是异步操作,如ajax请求)的结果。

二、特点

1. 对象的状态不受外界影响

有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪种状态,任何其他操作都无法改变这个状态。

2. 一旦状态改变,就不会再变

Promise 对象的状态改变,只有两种可能:从 pending 变为 fulfilled 和从 pending 变为 rejected。只要这两种情况发生其中的一种,状态就凝固了,不会再变了,会一直保持这个结果。(初始化一个新的promise对象,这时的状态为pending)。

三、执行顺序

Promise 新建后会立即执行,不过 then 方法是回调函数,将在当前脚本所有同步任务执行完才会执行:

let p = new Promise((resolve, reject) => {
  console.log(promise)
  resolve()
})
p.then(() => {
  console.log('resolved')
})
console.log('---end---')

// 执行顺序
// promise
// ---end---
// resolved

四、用法

1. 基本用法

let flag = false
// resolve和reject这两个函数由js引擎提供,不用自己部署(Promise构造函数接收函数作为参数)
let p = new Promise((resolve, reject) => {
  if(flag) {
    resolve()
  } else {
    reject()
  }
})
p.then(() => {
  console.log("成功")  // 成功回调
})
p.catch(() => {
  console.log("失败")  // 失败回调
})

2. resolve 函数的作用

将 Promise 对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果作为参数传递出去。

3. reject 函数的作用

将 Promise 对象的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。

4. then 方法的作用

可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用,第二个回调函数是 Promise 对象的状态变为 rejected 时调用。

// 上面的then()代码块可以改为:
p.then(() => {
  console.log("成功")
}, () => {
  console.log("失败")
})

5. catch 方法的作用

和 then 方法的第二个参数一样,用来指定 reject 的回调。

五、all()

Promise 的 all 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调:

let flag = false
function fn1() {
  flag = true
  let p = new Promise((resolve, reject) => {
    if(flag) {
      resolve(flag)
    }
  })
  return p
}
function fn2() {
  flag = false
  let p = new Promise((resolve, reject) => {
    if(!flag) {
      resolve(flag)
    }
  })
  return p
}

// all方法中的参数以数组形式进行传入,如果数组中有一个异步操作未完成,那么then()不会执行
Promise.all([fn1, fn2]).then((res) => {
  console.log(res)  // [true, false]
})

六、race()

race 方法的用法与 all 方法一样,只不过 race 方法只要有一个异步操作执行完毕后,就可以执行then回调:

// 将以上代码修改一下
let flag = false
function fn1() {
  flag = true
  let p = new Promise((resolve, reject) => {
    if(flag) {
      resolve(flag)
    }
  })
  return p
}
function fn2() {  
  let p = new Promise((resolve, reject) => { // 此异步函数不会执行
    if(!flag) {
      resolve(flag)
    }
  })
  return p
}

// race方法中只要有一个异步操作执行,就可以调用then()
Promise.race([fn1, fn2]).then((res) => {
  console.log(res)  // true
})

你可能感兴趣的:(前端,javascript,开发语言)