解决异步的几种方案

Promise

• es6加入标准，低版本ie不支持
• Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
• 三种状态
  • ① pending 进行中
  • ② fulfilled 已成功
  • ③ rejected 已失败
• 一旦状态改变，就不会再变。只可能①->②，①->③，这两种情况发生，状态就凝固了，会一直保持这个结果

new Promise(function (resolve, reject) {
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

• 所有写在回调函数里的代码都会被执行。resolve()/reject()被调用时，状态就凝固了。

• .then对应resolve，.catch对应reject,如果.then中有两个函数，第一个是成功，第二个是失败

• Promise允许then重复调用，第二次开始，每次的参数为上一次的返回值，当catch下面有then时，下面的then都会顺序执行

• .finally是可选函数，是promise的出口，无论什么状态，都会执行

• promise.all([p1,p2,p3]) 全成功，执行.then

  ​ 部分失败，执行.catch

• Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Generator

• generator是一种函数声明方式，用来解决异步问题，调用后得到一个对象

function* helloGenerator() {
       yield "hello";
       yield "generator";
       return;
   }
   var h = helloGenerator();
   console.log(h.next());//{ value: 'hello', done: false }
   console.log(h.next());//{ value: 'generator', done: false }
   console.log(h.next());//{ value: 'undefined', done: true }

• var h = helloGenerator();仅仅是创建了这个函数的句柄，并没有执行，需要next()
• 经过上面的分析，yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置。
• 总结一下，Generator函数是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。

asnyc/await

• es7， Async/Await 可以让你轻松写出同步风格的代码同时又拥有异步机制，更加简洁，逻辑更加清晰。

• 特点

  • async/await更加语义化，async 是“异步”的简写，async function 用于申明一个 function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；
  • async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）
  • 可以通过多层 async function 的同步写法代替传统的callback嵌套

• asnyc function语法

  • 自动将常规函数转换成Promise，返回值也是一个Promise对象
  • 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
  • 异步函数内部可以使用await

  async function name([param[, param[, ... param]]]) { statements }
  //name: 函数名称。
  //param:  要传递给函数的参数的名称
  //statements: 函数体语句。
  //返回值: 返回的Promise对象会以async function的返回值进行解析，或者以该函数抛出的异常进行回绝。
  

• await语法

  • await 放置在Promise调用之前，await 强制后面点代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果
  • await只能在async函数内部使用,用在普通函数里就会报错

  [return_value] = await expression;
  expression:  一个 Promise  对象或者任何要等待的值。
  //返回值:返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。