[TOC]
# Callbacks
傳統(tǒng)解決異步的方法：回調(diào)函數(shù)
~~~
// levelOne() is called a high-order function because
// it accepts another function as its parameter.
function levelOne(value, callback) {
var newScore = value + 5;
callback(newScore);
}
// Please note that it is not mandatory to reference the callback function (line #3) as callback, it is named so just for better understanding.
function startGame() {
var currentScore = 5;
console.log('Game Started! Current score is ' + currentScore);
// Here the second parameter we're passing to levelOne is the
// callback function, i.e., a function that gets passed as a parameter.
levelOne(currentScore, function (levelOneReturnedValue) {
console.log('Level One reached! New score is ' + levelOneReturnedValue);
});
}
startGame();
~~~
現(xiàn)在想象一下，如果我們必須為另外10個 levels 實現(xiàn)相同的邏輯，那么這個代碼將成為什么。你已經(jīng)恐慌了嗎？好吧，我！隨著嵌套回調(diào)函數(shù)的數(shù)量增加，讀取代碼變得更加困難，甚至更難調(diào)試。
這通常被親切地稱為 callback hell **回調(diào)地獄**。有沒有辦法解決這個回調(diào)地獄？
# Promises
~~~
// This is how a sample promise declaration looks like. The promise constructor
// takes one argument which is a callback with two parameters, `resolve` and
// `reject`. Do something within the callback, then call resolve if everything
// worked, otherwise call reject.
var promise = new Promise(function(resolve, reject) {
// do a thing or twenty
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
~~~
使得整個代碼更易于閱讀，更容易理解發(fā)生了什么，以及接下來發(fā)生了什么等等。
它們更容易組合，這大致意味著組合多個 Promise “就行”，而組合多個回調(diào)常常不行。
# Generators/Yield
由于 Generator 函數(shù)可以交出函數(shù)的執(zhí)行權(quán)，整個 Generator 函數(shù)可以看作一個封裝的異步任務(wù)，或者說是異步任務(wù)的容器。
1）遇到`yield`表達式，則暫停執(zhí)行后面的操作，并緊跟在`yield`后面的那個表達式的值，作為返回的對象的`value`屬性值。
2）下次調(diào)用`next`方法時，再繼續(xù)往下執(zhí)行，直到遇到下一個`yield`表達式。
3）若沒有再遇到新的`yield`表達式，則一直運行到函數(shù)結(jié)束，直到`return`語句為止，并將`return`語句后面的表達式的值，作為返回的對象的`value`屬性值。
4）若該函數(shù)沒有`return`語句，則返回的對象的`value`屬性值為`undefined`。
> Generator 函數(shù)可以返回一系列的值，因為可以有任意多個`yield`；正常函數(shù)只能返回一個值，因為只能執(zhí)行一次`return`
異步操作需要暫停的地方，都用yield語句注明。Generator 函數(shù)的執(zhí)行方法如下：
~~~
function* gen(x) {
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
~~~
調(diào)用函數(shù)，返回一個內(nèi)部指針(遍歷器)g。
# Async/Await
ECMA2017以來，javascript支持 Async- await，在NodeJs的7.6版本中實現(xiàn)。它們允許您編寫基于承諾的代碼，就像它是同步代碼一樣，但不會阻塞主線程。它們使您的異步代碼不那么“聰明”，更具可讀性。
說實話，async-awaits只不過是 `Promise` 之上的語法糖（即最終會被解析為 Promise 形式），但它使異步代碼的外觀和行為更像是同步代碼，這正是它的力量所在。
`await`會暫停`async`后面的代碼，先執(zhí)行`async`外面的同步代碼（**等待承諾時，函數(shù)將以非阻塞方式暫停，直到承諾處理完成**），等著 Promise 對象`fulfilled`，然后把`resolve`的參數(shù)作為`await`表達式的運算結(jié)果。
`await` 有效地使每個調(diào)用看起來好像是同步的，而不是阻止JavaScript的單線程。此外， **`async` 函數(shù)總是返回一個 `Promise`** ，因此它們可以被其他 `async` 函數(shù)調(diào)用。
~~~
function timeout(ms){
return new Promise((resolve) =>{
console.log("Enter Promise");
setTimeout(function(){
console.log("==setTimeout==");
resolve('resolve!');
}, ms)
})
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
/* body... */
}
console.log('!!!!START!!!')
asyncPrint('hello world', 550).then(res=>{ //如果這里的換成 alert('pending'); 你可以看到被阻塞的效果??！
console.log('Done');
})
console.log('!!!!END!!!');
~~~
只有返回 `promise` 或者 具有`async` 關(guān)鍵字修飾的 函數(shù) 才是 “awaitable”。
~~~
function levelOne(value) {
var promise, newScore = value + 5;
return promise = new Promise(function(resolve) {
resolve(newScore);
});
}
function levelTwo(value) {
var promise, newScore = value + 10;
return promise = new Promise(function(resolve) {
resolve(newScore);
});
}
function levelThree(value) {
var promise, newScore = value + 30;
return promise = new Promise(function(resolve) {
resolve(newScore);
});
}
// the async keyword tells the javascript engine the any function inside this function having the keyword await, should be treated as asynchronous code and should continue executing only once that function resolves or fails.
async function startGame() {
var currentScore = 5;
console.log('Game Started! Current score is ' + currentScore);
currentScore = await levelOne(currentScore);
console.log('You have reached Level One! New score is ' + currentScore);
currentScore = await levelTwo(currentScore);
console.log('You have reached Level Two! New score is ' + currentScore);
currentScore = await levelThree(currentScore);
console.log('You have reached Level Three! New score is ' + currentScore);
}
startGame();
~~~
注意：由于同步特性，`Async / await` 稍微慢一些。連續(xù)多次使用它時應(yīng)該小心，因為await關(guān)鍵字會停止執(zhí)行后面的所有代碼 - 就像在同步代碼中一樣。
~~~
// this function will return true after 1 second (see the async keyword in front of function)
async function returnTrue() {
// create a new promise inside of the async function
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(true), 1000) // resolve
});
// wait for the promise to resolve
let result = await promise;
// console log the result (true)
console.log(result);
}
// call the function
returnTrue();
~~~
## 使用try / catch 錯誤處理
因為 `await` 等待的 Promise 可能出現(xiàn)異常錯誤，所以捕獲錯誤，可以放在`try..catch..`中，或者 `then()..catch()..`。
~~~
async function getSomeData(value){
try {
const result = await fetchTheData(value);
return result;
}
catch(error){ //任何錯誤都將在該catch塊中結(jié)束
// Handle error
}
}
~~~
`Async / Await` 是我們代碼庫的最佳選擇：
1. `Async / Await` 允許使用更少的代碼行，更少的輸入和更少的錯誤，提供簡潔明了的代碼庫。最終，它使復(fù)雜的嵌套代碼再次可讀。
2. 使用 `try / catch` 處理錯誤（在一個地方，而不是在每個調(diào)用中）
3. 錯誤堆棧是有意義的，而不是從Promises收到的模糊錯誤，它們很大并且很難找到錯誤發(fā)生的位置。最重要的是，錯誤指向錯誤發(fā)生的函數(shù)。
[Generators/Yield 與 Async/Await 關(guān)系](http://www.ruanyifeng.com/blog/2015/05/async.html)
# Observables
https://medium.com/front-end-hacking/modern-javascript-and-asynchronous-programming-generators-yield-vs-async-await-550275cbe433
# Coroutine（協(xié)程）
傳統(tǒng)的編程語言，早有異步編程的解決方案（其實是多任務(wù)的解決方案）。其中有一種叫做"協(xié)程"（coroutine），意思是多個線程互相協(xié)作，完成異步任務(wù)。協(xié)程并不是一個新的概念，其他語言中很早就有了。
它的運行流程大致如下：
* 第一步，協(xié)程A開始執(zhí)行
* 第一步，協(xié)程A執(zhí)行到一半，進入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B。
* 第三步，（一段時間后）協(xié)程A恢復(fù)執(zhí)行
* 上面流程的協(xié)程A，就是異步任務(wù)，因為它分成兩段（或多段）執(zhí)行。
協(xié)程既可以用單線程實現(xiàn)，也可以用多線程實現(xiàn)。
多個線程（單線程的情況下，即多個函數(shù)）可以并行執(zhí)行，但是只有一個線程（或函數(shù)）處于正在運行的狀態(tài)，其他線程（或函數(shù)）都處于暫停態(tài)，線程（或函數(shù)）之間可以交換執(zhí)行權(quán)，也就是說，一個線程（或函數(shù)）執(zhí)行到一半，可以暫停執(zhí)行，將執(zhí)行權(quán)交給另一個線程（或函數(shù)），等到稍后收回執(zhí)行權(quán)的時候，再恢復(fù)執(zhí)行。這種可以并行執(zhí)行、交換執(zhí)行權(quán)的線程（或函數(shù)），就稱為協(xié)程。
**所謂協(xié)程：是指多個線程相互協(xié)作，完成異步任務(wù)。**
Generator 函數(shù)是協(xié)程在 ES6 中的實現(xiàn)，最大特點就是可以交出函數(shù)的執(zhí)行權(quán)。
# ---來一題---
出個題考考大家吧：
~~~
async function as1(){
console.log('as1 start');
await as2(); // 會阻塞后面代碼，跳出當前 async 函數(shù)繼續(xù)執(zhí)行外部代碼
console.log('as1 end');
}
// 不是 promise resolve，會導(dǎo)致當前微任務(wù)的外部任務(wù)完成，再回頭執(zhí)行該函數(shù)
async function as2(){
console.log('as2');
}
console.log('script start');
setTimeout(function(){
console.log('setTimeout');
},0)
as1();
new Promise(function(resolve){
console.log('prom1');
resolve();
}).then(function(){
console.log('prom2');
});
console.log('script end');
~~~
# 參考
> [Generator 函數(shù)的含義與用法](http://www.ruanyifeng.com/blog/2015/04/generator.html)
> [ES6 異步進階第二步：Generator 函數(shù)](https://www.jianshu.com/p/8c85189e7605 )
> [JavaScript中的Generator(生成器)](https://cloud.tencent.com/developer/article/1601616)
> [Generator函數(shù)](https://cloud.tencent.com/developer/article/1663312)
[Handling Concurrency with Async/Await in JavaScript](https://blog.vanila.io/handling-concurrency-with-async-await-in-javascript-8ec2e185f9b4)
[深入理解 JavaScript 異步](https://github.com/wangfupeng1988/js-async-tutorial)
- 步入JavaScript的世界
- 二進制運算
- JavaScript 的版本是怎么回事？
- JavaScript和DOM的產(chǎn)生與發(fā)展
- DOM事件處理
- js的并行加載與順序執(zhí)行
- 正則表達式
- 當遇上this時
- Javascript中apply、call、bind
- JavaScript的編譯過程與運行機制
- 執(zhí)行上下文(Execution Context)
- javascript 作用域
- 分組中的函數(shù)表達式
- JS之constructor屬性
- Javascript 按位取反運算符 (~)
- EvenLoop 事件循環(huán)
- 異步編程
- JavaScript的九個思維導(dǎo)圖
- JavaScript奇淫技巧
- JavaScript：shim和polyfill
- ===值得關(guān)注的庫===
- ==文章==
- JavaScript框架
- Angular 1.x
- 啟動引導(dǎo)過程
- $scope作用域
- $q與promise
- ngRoute 和 ui-router
- 雙向數(shù)據(jù)綁定
- 規(guī)范和性能優(yōu)化
- 自定義指令
- Angular 事件
- lodash
- Test