深入理解ES6——Promise与异步编程

深入理解ES6——Promise与异步编程

背景知识

JavaScript 是单线程

同一时刻只运行执行一个代码块

事件模型

Event Loop 执行任务队列的的任务

回调模式

把函数作为参数传递给异步函数，异步函数执行完，向任务队列末尾添加一个新的的任务，改任务包含回调函数及相应的参数

容易陷入回调地狱

Promise 基础知识

生命周期

• pending 进行中
• fulfilled 异步操作成功(已完成)
• rejected 异步操作失败(已拒绝)

所有 Promise 都有 then 方法，它接收两个参数：第一个是当 Promise 的状态为 fulfilled 是调用的函数(成功函数)，第二个是当 Promise 的状态为 rejected 是调用的函数(拒绝函数)

let promise = readFile('example.txt')

promise.then(function(contents) {
  //完成
})
promise.then(function(contents) {
  //完成
}, function(err) {
  //拒绝
})
promise.then(null, function(err){
  // 拒绝
})

Promise 可以链式调用，Promise 完成后返回一个新的 Promise 对象，可以链式调用

创建已处理的 Promise

• Promsie.resolve() 方法只接收一个参数并返回一个完成状态的 Promise，也就是不会有任务编排过程，而且需要向 Promise 添加一至多个完成处理程序来获取值。

  向任务队列中添加一个新任务，并指定延迟执行这个任务，叫任务编排。像 setTimeout 、setInterval这样的函数

• Promise.reject() 同上，区别是创建的是已拒绝的 Promise

捕获错误

let promise = new Promise(function(resolve, reject) {
  throw new Error('Expection')
})
promise.catch(function(err){
  console.log(err.message) // Expection
})

全局 Promise 拒绝处理

Promise 有争议的问题：如果在没有拒绝处理程序的情况下拒绝一个 Promise，那么不会提示失败。

Node.js 环境的拒绝处理

串联 Promise

Promise 链式的返回值，用 return 可以返回给下一个 Promise

resolve 中的 return 返回给下一个 Promise.resolve

reject 中的 return 返回给下一个 Promise.reject

let p1 = new Promise(function(resolve, reject) {
  resolve(42)
})

p1.then(function(value) {
  console.log(value) // 42
  return value + 1
}).then(function(value) {
  console.log(value) // 43
})

响应多个 Promise

Promise.all()

let p1 = new Promise((resolve, reject) => {
  resolve(1)
})

let p2 = new Promise((resolve, reject) => {
  resolve(2)
})

let p3 = new Promise((resolve, reject) => {
  resolve(3)
})

let p4 = Promise.all([p1, p2, p3])

p4.then((value) => {
  console.log(Array.isArray(value)) // true
  console.log(value[0]) // 1
  console.log(value[1]) // 2
  console.log(value[3]) // 3
})

表示所有的 Promise 执行成功才返回成功，有一个 Promise 失败 即返回失败，传入的是一个 Promise 数据，返回的结果也是数据，并且结果与参数传入顺序对应。

Promise.race()

传给 Promise.race() 方法的 Promise 会进行竞选，哪个 Promise 状态先完成，返回哪个状态，不管 fulfilled 还是 rejected

自 Promise 继承

class MyPromise extends Promise {
  // 使用默认的构造函数
  
  success(resolve, reject) {
    return this.then(resolve, reject)
  }
  
  fail(reject) {
    return this.then.catch(reject)
  }
}

let promise = new MyPromise(function(resolve, reject) {
  resolve(42)
})

promise.then(function(value) {
  console.log(value) // 42
}).catch(function(value) {
  console.log(value)
})

很多第三方类库就是通过继承 Promise 实现的，比如：

wx.request({
  method: 'GET',
  url: 'mp.wx.com',
  success(res) {
    
  },
  fail(err) {
    
  }
})

其实内部就是包装了一个 Promise

基于 Promise 的异步任务执行

TODO：

小结

---