[Javascript] Promise

Posted 2020-08-04 TonyYPZhang

Promise 代表着一个异步操作，这个异步操作现在尚未完成，但在将来某刻会被完成。

Promise 有三种状态

• pending : 初始的状态，尚未知道结果
• fulfilled ： 代表操作成功
• rejected : 代表操作失败

 

如果 Promise 操作 fulfilled 或者 rejected ，并且对应的处理函数被声明了，则该处理函数被调用。

 

Promise vs 事件监听器(event listener) 

事件监听器善于处理同一对象上重复发生的事情，例如按键、点击鼠标等。对于这些事件，你只关心添加回调函数之后的发生的事情。当处理结果导向的异步事件时，你的代码可能是

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

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

 

要实现同样的功能，Promise 的代码更加简洁，更加直观。

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

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

 

Promise 和 事件监听器很相似，除了以下几点

1. Promise 只经历一次执行，成功或者失败。Promise 不会被执行第二次，也不可以转变执行结果，即执行无法从成功变成失败，反之亦然。而事件监听器可以被反复执行。

2. 如果 Promise 已经执行完毕，成功或者失败，然后再给 Promise 添加对应的回调函数，那么这个对应的回调函数仍然会被执行。也就是说，Promise 添加回调函数后，回调函数先检查在自己被添加之前事件是否已发生，如果发生则执行，如果没有发生就继续等待。而事件监听器只对自己被添加后的事件负责，忽略在自己被添加前的事件。

上面两点非常有利于处理结果导向的异步事件。因为你只需要关系事件发生的结果，成功或者失败，而不需了解事件发生的准确时间。

 

Promise 的使用

Promise 早已存在一些库里面，例如

• Q
• when
• WinJS
• RSVP.js

 

创建 Promise 

类库中的 Promise 实现大多都遵循标准行为，Promises/A+。 但是 API 会有些不一样。 javascript 自带的 Promise 采用类似 RSVP.js 的 API 。

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 构造函数接受一个回调函数作为参数。在创建 Promise 对象时候，执行该回调函数。根据回调函数的结果，成功或者失败，把执行控制权交给 reolve() 或者 reject() 函数。不过 reolve() 或 reject() 真正被执行的时间是在他们通过 Promise.then() 被添加之后。

 

使用 Promise 

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

Promise.then() 接受两个参数，一个用于处理 Promise 执行成功的情况，另一个用于处理 Promise 失败的情况。两个参数都是可选的，所以可以只传函数给第一个参数，用于处理 Promise 成功的情况，也可以只传函数给第二个参数，用于处理 Promise 失败的情况。

 

链式调用(chaining)

Promise.prototype.then() 和 Promise.prototype.catch() 返回的是一个 Promise ，所以可以形成链式调用。链式调用可用于值传递，或者依次地进行后续的异步操作。

值传递

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() 只是简单地调用另一个函数时，可以只传另一个函数的函数名。例如

get(\'story.json\').then(function(response) {
  return JSON.parse(response);
}).then(function(response) {
  console.log("Yey JSON!", response);
});

可以简化为

get(\'story.json\').then(JSON.parse).then(function(response) {
  console.log("Yey JSON!", response);
});

实战代码如下

function getJSON(url) {
  return get(url).then(JSON.parse);
}

 

串联多个异步操作

如果 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);
});

发送一个 story.json 的请求，获得的结果是一个 story 对象，包含着多个 chapter 的 URL。根据第一个 chapter URL ，再次请求 JSON 数据。执行成功后，最后运行 console.log 。

 

例子

已知一个目标资源 story.json，需要实现下面几步

1. 向 story.json 发送请求，获得各个章节的 URL，

2. 向各个章节的 URL 发送请求，分别获得各章节内容

3. 将章节内容添加到 html 页面中 

同步请求数据

由于是同步请求，所有请求都依次阻塞进行。在请求过程中页面也会被阻塞，无进行其他操作。这种方式可以实现数据加载，但是用户体验差。

try {
  var story = getJSONSync(\'story.json\');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector(\'.spinner\').style.display = \'none\';

 

Promise 异步请求数据

getJSON(\'story.json\').then(function(story) {
  addHtmlToPage(story.heading);

  // TODO: for each url in story.chapterUrls, fetch & display
}).then(function() {
  // And we\'re all done!
  addTextToPage("All done");
}).catch(function(err) {
  // Catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  // Always hide the spinner
  document.querySelector(\'.spinner\').style.display = \'none\';
});

上面是一个框架代码，加载每一章节的功能尚未实现。由于数组的 forEach 函数不是异步操作，所以无法简单地使用 forEach 对每一章节进行异步请求。可以将数组转换为 Promise 队列来实现遍历效果。

// Start off with a promise that always resolves
var sequence = Promise.resolve();

// Loop through our chapter urls
story.chapterUrls.forEach(function(chapterUrl) {
  // Add these actions to the end of the sequence
  sequence = sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter.html);
  });
});

或者用 array.reduce 来实现

// Loop through our chapter urls
story.chapterUrls.reduce(function(sequence, chapterUrl) {
  // Add these actions to the end of the sequence
  return sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter.html);
  });
}, Promise.resolve());

将框架代码和加载章节的代码组合起来

getJSON(\'story.json\').then(function(story) {
  addHtmlToPage(story.heading);

  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
    // Once the last chapter\'s promise is done…
    return sequence.then(function() {
      // …fetch the next chapter
      return getJSON(chapterUrl);
    }).then(function(chapter) {
      // and add it to the page
      addHtmlToPage(chapter.html);
    });
  }, Promise.resolve());
}).then(function() {
  // And we\'re all done!
  addTextToPage("All done");
}).catch(function(err) {
  // Catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  // Always hide the spinner
  document.querySelector(\'.spinner\').style.display = \'none\';
});

实现的效果如下:

 

现在，能执行异步无阻塞地依次加载数据，并且先加载先显示。不过，这种加载方式还有优化空间。

Promise 优化版1

并行加载数据，全部加载后同时显示。效果如下

 

Promise 优化版2

并行加载数据，根据章节顺序，依次显示各个加载完成的章节。这种加载方式的效果最好。使用 Chrome 浏览器时候，感觉数据加载很快，猜想就是用这种方式进行数据加载的。

效果如下

 

最后两个优化版的思路和代码参考 JavaScript Promise, Jake Archibald

 

参考资料

Promise - JavaScript | MDN

JavaScript Promise, Jake Archibald