异步编程-Promise

date: 2020-05-30 16:46:12 tags: [js, 异步编程]

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。 封装的构造函数

举个例子来了解

var p1 = new Promist((resolve, reject) => {
  setTimeout(() => {
    console.log('执行完成')
    resolve('操作成功数据')
  }, 1000)
})

运行上面代码，1S后输出'执行完成'，只new了一个对象，在没有调用的时候，传入的函数就已经执行了，所以用Promise的时候一般会创建包在一个函数中

var runAsync =  function() {
  var p1 = new Promist((resolve, reject) => {
    setTimeout(() => {
      var num = Math.random()
      if(num <= 0.5){
        resolve('操作成功数据')
      }else{
        reject('操作失败数据')
      }
    }, 1000)
  })
  retuen p1
}
// 调用
runAsync().then(data => {
  console.log('data') // 操作成功数据
}, data2 () {
  console.log('data2') // 操作失败数据
})
// 或者这样调用
runAsync().then(data => {
  console.log('data') // 操作成功数据
}).catch(data2 () {
  console.log('data2') // 操作失败数据
  // 如果代码出错也会到这里
})

链式操作

var runAsync1 = function(){
  var p = new Promist((resolve, reject) => {
    setTimeout(() => {
      console.log('异步1执行完成')
      resolve('操作成功数据1')
    }, 1000)
  })
  retuen p
}
var runAsync2 = function(){
  var p = new Promist((resolve, reject) => {
    setTimeout(() => {
      console.log('异步2执行完成')
      resolve('操作成功数据2')
    }, 1000)
  })
  retuen p
}
var runAsync3 = function(){
  var p = new Promist((resolve, reject) => {
    setTimeout(() => {
      console.log('异步3执行完成')
      resolve('操作成功数据3')
    }, 1000)
  })
  retuen p
}


// 调用
runAsync1().then(data => {
  console.log(data) // 操作成功数据1
  retuen runAsync2
}).then(data => {
  console.log(data) // 操作成功数据2
  retuen runAsync3
}).then(data => {
  console.log(data) // 操作成功数据3
})

all 和 race 用法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：

Promise.all([runAsync1(), runAsync2(), runAsync3()]).then(data => {
  console.log(data) //  [操作成功数据1， 操作成功数据2， 操作成功数据3]
})

rece 类似all, 不过会在第一个异步方法执行完毕时触发

Promise.rece([runAsync1(), runAsync2(), runAsync3()]).then(data => {
  console.log(data) //  操作成功数据1
})