JavaScript精进之路 — 异步的实现（上）

(function test() {
  setTimeout(function () {
    console.log(4);
  }, 0);
  new Promise(function executor(resolve) {
    console.log(1);
    for (var i = 0; i < 10000; i++) {
      i == 9999 && resolve();
    }
    console.log(2);
  }).then(function () {
    console.log(5);
  });
  console.log(3);
})();

//《你不知道的JavaScript（中卷）》
listen("click", function handler(evt) {
  setTimeout(function request() {
    ajax("http://some.url.1", function response(text) {
      if (text == "hello") {
        handler();
      } else if (text == "world") {
        request();
      }
    });
  }, 500);
});

doA(function () {
  doC();

  doD(function () {
    doF();
  });

  doE();
});

doB();

function result(data) {
  console.log(a);
}

var a = 0;

ajax("..pre-cached-url..", result);
a++;

function add(getX, getY, cb) {
  var x, y;
  getX(function (xVal) {
    x = xVal;
    // both are ready?
    if (y != undefined) {
      cb(x + y); // send along sum
    }
  });
  getY(function (yVal) {
    y = yVal;
    // both are ready?
    if (x != undefined) {
      cb(x + y); // send along sum
    }
  });
}

// `fetchX()` and `fetchY()` are sync or async
// functions
add(fetchX, fetchY, function (sum) {
  console.log(sum); // that was easy, huh?
});

function add(xPromise, yPromise) {
  // `Promise.all([ .. ])` takes an array of promises,
  // and returns a new promise that waits on them
  // all to finish
  return (
    Promise.all([xPromise, yPromise])

      // when that promise is resolved, let's take the
      // received `X` and `Y` values and add them together.
      .then(function (values) {
        // `values` is an array of the messages from the
        // previously resolved promises
        return values[0] + values[1];
      })
  );
}

// `fetchX()` and `fetchY()` return promises for
// their respective values, which may be ready
// *now* or *later*.
add(fetchX(), fetchY())
  // we get a promise back for the sum of those
  // two numbers.
  // now we chain-call `then(..)` to wait for the
  // resolution of that returned promise.
  .then(function (sum) {
    console.log(sum); // that was easier!
  });

	new Promise (function (…){…})
	```，传入的函数将会被立即执行。

4. 【识别Promise】识别Promise是否为真正的Promise很重要。定义某种称为thenable的东西，将其定义为任何具有then(..)方法的对象和函数，任何这样的值就是Promise一致的thenable。如果Promise决议遇到了这样的thenable的值，那么就会被搁浅在这里，导致难以追踪的bug。

5. 【Promise解决信任问题的方法】有五种回调导致的信任问题，分别来讲：
	* 调用过早： 由于一个任务有时候同步完成，有时候异步完成。如果使用回调会导致Zalgo出现，使用Promise无论是立即决议的revealing-constructor模式，还是异步执行的内容，都会基于最前面所讲的任务队列来进行异步调用，这样就解决了调用过早的问题.
	* 调用过晚：由于同步then调用时不被允许的，所以，一个Promise被决议之后，这个Promise上所有的通过then(…)注册的回调都会下一个异步时机点一次被立即调用。任意一个都无法影响或延误对其他回调的调用（不能插队）
 Ex:

```javascript
p.then( function(){
	p.then( function(){
		console.log( "C" );
	} );
	console.log( "A" );
} );
p.then( function(){
	console.log( "B" );
} );
// A B C

function runme() {
var i = 0;

new Promise(function(resolve) {
  resolve();
})
.then(function() {
  i += 2;
});
alert(i);
} //0

var p = new Promise(function (resolve, reject) {
  resolve(42);
});

p.then(
  function fulfilled(msg) {
    foo.bar();
    console.log(msg); // never gets here :(
  },
  function rejected(err) {
    // never gets here either :(
  },
);

//来自：http://imweb.io/topic/57a0760393d9938132cc8da9
getUserAdmin().then(function(result) {
    if ( /*管理员*/ ) {
        getProjectsWithAdmin().then(function(result) {
            /*根据项目id，获取模块列表*/
            getModules(result.ids).then(function(result) {
                /*根据模块id，获取接口列表*/
                getInterfaces(result.ids).then(function(result) {
                    // ...
                })
            })
        })
    } else {
        //...
    }
})


//链式流
getUserAdmin().then(function(reult) {
    if ( /*管理员*/ ) {
        return getProjectsWithAdmin();
    } else {
        return getProjectsWithUser();
    }
}).then(function(result) {
    /*获取project id列表*/
    return getModules(result.ids);
}).then(function(result) {
    /*获取project id列表*/
    return getInterfaces(result.ids)
}).then(function(result) {
    // ...
})

var p = Promise.resolve(21);

p.then(function (v) {
  console.log(v); // 21

  // fulfill the chained promise with value `42`
  return v * 2;
})
  // here's the chained promise
  .then(function (v) {
    console.log(v); // 42
  });

var p = Promise.resolve(21);

p.then(function (v) {
  console.log(v); // 21

  // create a promise and return it
  return new Promise(function (resolve, reject) {
    // fulfill with value `42`
    resolve(v * 2);
  });
}).then(function (v) {
  console.log(v); // 42
});

var p = Promise.resolve(21);

p.then(function (v) {
  console.log(v); // 21

  // create a promise to return
  return new Promise(function (resolve, reject) {
    // introduce asynchrony!
    setTimeout(function () {
      // fulfill with value `42`
      resolve(v * 2);
    }, 100);
  });
}).then(function (v) {
  // runs after the 100ms delay in the previous step
  console.log(v); // 42
});

catch(function(err){…})

var p = Promise.resolve(42);

p.then(
  function fulfilled(msg) {
    // numbers don't have string functions,
    // so will throw an error
    console.log(msg.toLowerCase());
  },
  function rejected(err) {
    // never gets here
  },
);

// `foo()` is a Promise-aware function

// `timeoutPromise(..)`, defined ealier, returns
// a Promise that rejects after a specified delay

// setup a timeout for `foo()`
Promise.race([
  foo(), // attempt `foo()`
  timeoutPromise(3000), // give it 3 seconds
]).then(
  function () {
    // `foo(..)` fulfilled in time!
  },
  function (err) {
    // either `foo()` rejected, or it just
    // didn't finish in time, so inspect
    // `err` to know which
  },
);

// `click(..)` binds the `"click"` event to a DOM element
// `request(..)` is the previously defined Promise-aware Ajax

var p = new Promise(function (resolve, reject) {
  click("#mybtn", resolve);
});

p.then(function (evt) {
  var btnID = evt.currentTarget.id;
  return request("http://some.url.1/?id=" + btnID);
}).then(function (text) {
  console.log(text);
});
//第二次按下就不会有任何操作，不会再次执行resolve