关于promises

 

当你第一次见到它们的时候，promises会让你有点困惑，但现在不要太担心这个。在一段时间之后，您将会习惯它们，特别是当您了解更多关于现代JavaScript api的时候——大多数现代的JavaScript api都是基于promises的。

让我们再看看上面的promises结构，看看我们是否能更清楚地理解它:

fetch(url).then(function(response) {
  response.text().then(function(text) {
    poemDisplay.textContent = text;
  });
});

第一行是说‘’获取位于url里的资源(fetch(url))‘’和“然后当promise解析后运行指定的函数(.then(function() { ... }))”。"解析"的意思是"在将来某一时刻完成指定的操作"。在本例中，指定的操作是从指定的URL(使用HTTP请求)获取资源，并返回对我们执行某些操作的响应。

实际上，传递给 then() 是一段不会立即执行的代码 — 而是当返回响应时代码会被运行。注意，你还可以选择把你的 promise 保存到一个变量里, 链接 .then() 在相同的位置。下面的代码会做相同的事情。

let myFetch = fetch(url);

myFetch.then(function(response) {
  response.text().then(function(text) {
    poemDisplay.textContent = text;
  });
});

因为方法 fetch() 返回一个解析HTTP响应的promise, 你在 .then() 中定义的任何函数会被自动给与一个响应作为一个参数。你可以给这个参数取任何名字，以下的例子依然可以实现：（例子里把response参数叫做狗饼干---'dogBiscuits'=狗饼干）

fetch(url).then(function(dogBiscuits) {
  dogBiscuits.text().then(function(text) {
    poemDisplay.textContent = text;
  });
});

但是把参数叫做描述其内容的名字更有意义。

现在让我们来单独看一下函数：

function(response) {
  response.text().then(function(text) {
    poemDisplay.textContent = text;
  });
}

response 对象有个 text()方法, 获取响应主体中的原始数据a并把它转换成纯文本, 那是我们想要的格式。它也返回一个promise (解析结果文本字符串), 所以这里我们再使用 .then(), 在里面我们再定义一个操作文本字符串的函数。我们设置诗歌的 <pre> 元素的 textContent 属性和这个文本字符串相同, 这样就非常简单地解决了。

值得注意的是你可以直接将promise块 (.then()块, 但也有其他类型) 链接到另一个的尾部, 顺着链条将每个块的结果传到下一个块。 这使得promises非常强大。国旗迷

下面的代码块和我们原始的例子做的是相同的事, 但它是不同的写法:

fetch(url).then(function(response) {
  return response.text()
}).then(function(text) {
  poemDisplay.textContent = text;
});

很多开发者更喜欢这种样式, 因为它更扁平并且按理说对于更长的promise链它更容易读 — 每一个promise(承诺）接续上一个promise，而不是在上一个promise的里面(会使得整个代码笨重起来，难以理解）。以上两种写法还有一个不同的地方是我们在response.text()  语句之前得包含一个 return  语句, 用来把这一部分的结果传向promise链的下一段。