Promise 处理异步操作的js标准内置对象

Promise 处理异步操作的js标准内置对象

基础用法

Promise 用来处理异步操作的js标准内置对象，到了ES2017有更高级的async/await来处理异步操作
创建并使用一个promise

// 创建promise对象
let pro = new Promise((resolve, reject) => {
  setTimeout(() =>  {
    // 正常完成
    resolve('success')
    // 异常情况
    //reject('fail')
  }, 500)
})
// 使用promise对象
pro.then(res => {
  // 正常完成
  console.log(res)
}).catch(err => {
  // 异常情况
  console.log(err)
}).finally(() => {
  // 正常异常都会执行
})

常见的写法还有通过函数返回一个promise

// 定义函数
function getApi() {
  return new Promise((resolve, reject) => {
    setTimeout(() =>  {
      resolve('success')
    }, 500)
  })
}
// 使用
getApi().then(res => {
  console.log(res)
})

进阶

批量处理多个异步操作

Promise.all([pro1, pro2, pro3])

Promise.all([pro1, pro2, pro3]) 传入多个promise

返回一个promise pro4

pro4.then为全部执行成功的结果数组

pro1, pro2, pro3中任意一个执行reject则进入catch

let pro1 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro1')
  }, 500)
})
let pro2 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro2')
  }, 100)
})
let pro3 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro3')
  }, 500)
})

Promise.all([pro1, pro2, pro3]).then(results => { // 全部执行成功
  results.forEach(item => {
    console.log(item)
  })
}).catch(reason => { // reason为第一个执行reject的异常结果
  console.log(reason)
})

// 运行结果：
// pro1
// pro2
// pro3

Promise.allSettled([pro1, pro2, pro3])

与Promise.all()类似，区别在于Promise.allSettled()会返回所有的执行结果，无论是否成功

let pro1 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro1')
  }, 500)
})
let pro2 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro2')
  }, 100)
})
let pro3 = new Promise((resolve, reject) => {
  setTimeout(function () {
    reject('pro3') // 执行失败处理
  }, 500)
})

Promise.allSettled([pro1, pro2, pro3]).then(results => { // 全部执行成功
  results.forEach(item => {
    console.log(item)
  })
}).catch(reason => { // reason为第一个执行reject的异常结果
  console.log(reason)
})

// 运行结果：
// { status: 'fulfilled', value: 'pro1' }
// { status: 'fulfilled', value: 'pro2' }
// { status: 'rejected', reason: 'pro3' }

Promise.race([pro1, pro2, pro3])

无论成功失败，返回最先执行完成的promise的执行结果

let pro1 = new Promise((resolve, reject) => {
  setTimeout(function () {
    resolve('pro1')
  }, 500)
})
let pro2 = new Promise((resolve, reject) => {
  setTimeout(function () {
    reject('pro2')
  }, 100)
})
Promise.race([pro1, pro2]).then(results => {
	console.log(item) // 未被调用
}).catch(reason => {
  console.log(reason) // pro2最先执行完成，所以运行结果：pro2
})