js callback->Promise->async/awai

之前在知乎上听了个live，当时在发布，没认真听、也没怎么听清，今天又重新听了一遍，理了一下中间的技术以及一些知识点。

异步

异步的发展趋势 callback -> Promise -> async/await

callback

callback很好理解，回调函数，一般作为参数传递，执行完异步请求之后，执行。比较常见的是jQuery中的deferred，就是封装的比较好的callback的代表（个人理解，如果有不同意见可以提）。

专门去查了一下jQuery的deferred，开头有这么一段话，可以证明是封装了的callback。

The Deferred object, introduced in jQuery 1.5, is a chainable utility object created by calling the jQuery.Deferred()
method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

Promise

Promise自从被纳入了Es6之后，开始使用的越来越多，但是它不支持低版本浏览器，可以使用 polyfill 来使其支持ie8以上版本。

主要知识点有以下几点：
1、 一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）
2、 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
3、 promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
4、 then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。

使用Promise的优势

1、多个异步调用，同步/并行

Promise.all([a(), b(), 10]).then(functionC);   //这是 primise 的异步写法

2、竞争

如果说Promise.all是promise对象之间的“与”关系，那么Promise.race就是promise对象之间的“或”关系。
比如，我要实现“点击按钮或者5秒钟之后执行”：

var btn = document.getElementsByTagName('button');
Promise.race(wait(5000), waitFor(btn, click)).then(function(){ console.log('run!')})

3、异常处理

异常处理一直是回调的难题，而promise提供了非常方便的catch方法：在一次promise调用中，任何的环节发生reject，都可以在最终的catch中捕获到：

Promise.resolve()
  .then(function(){
    return loadImage(img1);
  })
  .then(function(){
    return loadImage(img2);
  })
  .then(function(){
    return loadImage(img3);
  })
  .catch(function(err){
    //错误处理
  })

4、复杂流程

promise有一种非常重要的特性：then的参数，理论上应该是一个promise函数，而如果你传递的是普通函数，那么默认会把它当做已经resolve了的promise函数。这种特性适合与currying函数结合。

async/await

这边我参考的是这篇 async 函数的含义和用法。