JavaScript 回调函数/Promise/ async/await

并发和并行

并行和并发是两个概念，容易混淆是因为并行和并发在中文意思上相近，其实在英文中，这是完全不相同的东西，并行(parallelism)、并发(concurrency)。

并行(parallelism)：是微观概念，假设CPU有两个核心，则我们就可以同时完成任务A和任务B，同时完成多个任务的情况就可以称之为并行。

并发(concurrency)：是宏观概念，现在有任务A和任务B，在一段时间内，通过任务之间的切换完成这两个任务，这种情况称之为并发。

回调函数

回调函数广泛存在于我们所编写的​​JavaScript​​代码中，它表现在事件绑定，Ajax请求或者其他的情况下，一个回调函数可表现成如下形式

ajax(url, () => {
  console.log('这里是回调函数');
})

回调地狱： 回调函数很好的解决了某些异步情况，但过度滥用回调函数会造成回调地狱，即回调函数过长，嵌套过深。过长或者嵌套过深的回调函数，会让回调函数存在强耦合关系，一旦有一个函数有所改动，那么可能会牵一发而动全身。一个回调地狱可能如下所示：

ajax(firstUrl, () => {
  console.log('这里是首次回调函数');
  ajax(secondUrl, () => {
    console.log('这里是第二次回调函数');
    ajax(threeUrl, () => {
      console.log('这里是第三次回调函数');
      // todo更多
    })
  })
})

Generator

在ES6之前，一个函数一旦执行将不会被中断，一直到函数执行完毕，在ES6之后，由于​​Generator​​​的存在，函数可以暂停自身，待到合适的机会再次执行。用​​Generator​​可以解决回调地狱。

function *fetch() {
  yield ajax(url, () => {console.log('这里是首次回调函数');});
  yield ajax(url, () => {console.log('这里是第二次回调函数');});
  yield ajax(url, () => {console.log('这里是第三次回调函数');});
}
var it = fetch();
var result1 = it.next();
var result2 = it.next();
var result3 = it.next();

Promise

​​Promise​​​翻译过来就是承诺的意思，​​Promise​​​一共有三种状态：​​pending(等待中)​​​、​​resolve(完成)​​​和​​reject(拒绝)​​​，这个承诺意味着在将来一定会有一个表决，并且只能表决一次，表决的状态一定是​​resolve(完成)​​​或者​​reject(拒绝)​​​，一个​​Promise​​可能会是如下的形式：

// 普通的Promise
function foo() {
  return new Promise((resolve,reject) => {
    // 第一次表决有效，其后无论是resolve()还是reject()都无效
    resolve(true); 
    resolve(false);
  })
}

// Promise解决回调地狱
ajax(url).then(res => {
  console.log('这里是首次回调函数');
}).then(res => {
  console.log('这里是第二次回调函数');
}).then(res => {
  console.log('这里是第三次回调函数');
})

async/await

如果一个方法前面加上了​​async​​​，那么这个方法就会返回一个​​Promise​​​，​​async​​​就是将函数用​​Promise.resolve()​​​包裹了下，并且​​await​​​只能配合​​async​​​使用，不能单独出现。一个​​async/await​​可能会是如下的形式：

// 普通的async/await
async function foo() {
  let number = await 3; // await自动用promise.resolve()包装
  console.log(number);
}
foo();

// async/await解决回调地狱
async function fetch() {
  var result1 = await ajax(url1);
  var result2 = await ajax(url2);
  var result3 = await ajax(url3);
}
fetch();