Promise

promise 所实行的使命

事宜关于统一对象上发作屡次的事变（如 keyup、touchstart 等）异常有效。关于这些事宜，现实您并不关注在增加侦听器之前所发作的事变。然则，假如关系到异步胜利/失利，抱负的状况是您愿望：

img1.callThisIfLoadedOrWhenLoaded(function() {
  // loaded
}).orIfFailedCallThis(function() {
  // failed
});

// and…
whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
  // all loaded
}).orIfSomeFailedCallThis(function() {
  // one or more failed
});

这就是 promise 所实行的使命。

假如 HTML 图象元素有一个返回 promise 的“ready”要领，我们能够实行：

img1.ready().then(function() {
  // loaded
}, function() {
  // failed
});

// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
  // all loaded
}, function() {
  // one or more failed
});

Promise两个特性

Promise 有点类似于事宜侦听器，但有以下两点区分：

1. promise 只能胜利或失利一次，而不能胜利或失利两次，也不能从胜利转为失利或从失利转为胜利。
2. 假如 promise 已胜利或失利，且您以后增加了胜利/失利回调，则将会挪用准确的回调，纵然事宜发作在先。

Promise状况

1. A promise is fulfilled if promise.then(f) will call f "as soon as possible."
2. A promise is rejected if promise.then(undefined, r) will call r "as soon as possible."
3. A promise is pending if it is neither fulfilled nor rejected.

建立 promise 的步骤

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

Promise 组织函数包括一个参数和一个带有 resolve（剖析）和 reject（谢绝）两个参数的回调。在回调中实行一些操纵（比方异步），假如一切都一般，则挪用 resolve，不然挪用 reject.

Promise 的运用示例

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

then() 包括两个参数：一个用于胜利情况的回折衷一个用于失利情况的回调。这两个都是可选的，因而您能够只增加一个用于胜利情况或失利情况的回调。

实例

1. 启动一个转环来提醒加载
2. 猎取一个故事的 JSON，肯定每一个章节的题目和网址
3. 向页面中增加题目
4. 猎取每一个章节
5. 向页面中增加故事
6. 住手转环
7. 但假如此历程发作毛病，也要向用户显现。我们也想在那一点住手转环，不然，它将不停地扭转、眩晕并撞上其他 UI 控件。

从收集中猎取数据:

对 XMLHttpRequest 实行 promise

编写一个作出 GET 要求的简朴函数

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

运用该功用

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})

如今我们无需手动键入 XMLHttpRequest 即可作出 HTTP 要求。

返回新值会转变值

var promise = new Promise(function(resolve, reject) {
  resolve(1);
});

promise.then(function(val) {
  console.log(val); // 1
  return val + 2;
}).then(function(val) {
  console.log(val); // 3
})

异步操纵行列

能够链接多个 then，以便按递次运转异步操纵。

当从 then() 回调中返回某些内容时，这有点儿奇异。假如返回一个值，则会以该值挪用下一个 then()。然则，假如您返回类似于 promise 的内容，下一个 then() 则会守候，并仅在 promise 发生效果（胜利/失利）时挪用。比方：

getJSON('story.json').then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  console.log("Got chapter 1!", chapter1);
})

http://caibaojian.com/promise…
https://github.com/googlesamp…