JavaScript异步的四种方式

JavaScript的四种常用异步操作方式:callback、Promise、Generator、asnyc/await

一、callback回调函数

回调是一个函数作为参数传递到另一个函数里，在那个函数执行完后再执行。

function f1 (callback) {
    setTimeout(function () {
　　　　 console.log("1")
        callback();
    },1000);
    }
function f2(){
        console.log("2")
    }
    f1(f2);

缺点是会陷入回调地狱。

二、Promise(ES6)

• Promise对象代表一个异步操作，有三种状态：pending(进行中),resolved(已成功)和rejected(已失败)。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态改变只有两种可能：pending=>resolved,pending=>rejected。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法接收两个回调函数，第一个回调函数是Promise对象的状态变为resolved时调用。第二个回调函数是Promise对象的状态变为rejected时调用。
缺点是：

• 无法取消Promise，一旦新建就立即执行，无法中途取消。
• 不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 当初与pending状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

三、Generator(ES6)

function* G() {
    const a = yield 100
    console.log('a', a)  // a aaa
    const b = yield 200
    console.log('b', b)  // b bbb
    const c = yield 300
    console.log('c', c)  // c ccc
}
const g = G()
g.next()    // value: 100, done: false
g.next('aaa') // value: 200, done: false
g.next('bbb') // value: 300, done: false
g.next('ccc') // value: undefined, done: true

相比Promise，Generator流程更加直观、语义化。
Generator的问题在于，函数的执行需要执行器每次都需要通过g.next()方式执行。

四、async/await(ES2017)

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

asnyc函数解决了上述问题，流程清晰、直观、语义明显。
同时asnyc函数自带执行器，执行的时候无需手动加载。