JavaScript Promise:简介

Promise 可简化延迟和异步计算。Promise 表示尚未完成的操作。

Jake Archibald
Jake Archibald

开发者们,准备好迎接 Web 开发史上一个关键时刻吧。

[Drumroll begins]

JavaScript 中已支持 promise!

[烟花绽放,闪闪发光的纸片从天而降,人群欢呼雀跃]

此时,您属于以下类别之一:

  • 周围的人都在欢呼,但您不确定他们在兴奋什么。也许你甚至不确定“承诺”是什么。你耸耸肩,但闪闪发光的纸张的重量压在你的肩上。如果是,请不要担心,我花了很长时间才弄清楚为什么应该关注这些内容。您可能想从开始。
  • 你对着空气挥拳!是时候了,对吧?您之前使用过这些 Promise,但所有实现都有略微不同的 API,这让您感到困扰。官方 JavaScript 版本的 API 是什么?您可能需要先了解术语
  • 您早就知道这一点,并且对那些像刚知道一样上蹿下跳的人嗤之以鼻。花点时间好好享受一下自己的优越感,然后直接前往 API 参考

浏览器支持和填充

Browser Support

  • Chrome: 32.
  • Edge: 12.
  • Firefox: 29.
  • Safari: 8.

Source

如需使缺少完整 Promise 实现的浏览器符合规范,或向其他浏览器和 Node.js 添加 Promise,请查看 polyfill(压缩后为 2k)。

这有什么好大惊小怪的?

JavaScript 是单线程的,这意味着两个脚本无法同时运行,必须一个接一个地运行。在浏览器中,JavaScript 与许多其他内容共享一个线程,这些内容因浏览器而异。但通常情况下,JavaScript 与绘制、更新样式和处理用户操作(例如突出显示文本和与表单控件互动)位于同一队列中。其中一项活动会延迟其他活动。

作为人类,您是多线程的。您可以多指输入,也可以同时开车和进行对话。我们唯一需要处理的阻塞函数是打喷嚏,在打喷嚏期间,所有当前活动都必须暂停。这非常令人恼火,尤其是在您开车并尝试进行对话时。您肯定不想编写容易出错的代码。

您可能已经使用事件和回调来解决此问题。以下是活动:

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {
  // woo yey image loaded
});

img1.addEventListener('error', function() {
  // argh everything's broken
});

This isn't sneezy at all. 我们获取图片,添加几个监听器,然后 JavaScript 可以停止执行,直到其中一个监听器被调用。

遗憾的是,在上面的示例中,事件可能发生在我们开始监听它们之前,因此我们需要使用图片的“complete”属性来解决此问题:

var img1 = document.querySelector('.img-1');

function loaded() {
  // woo yey image loaded
}

if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

img1.addEventListener('error', function() {
  // argh everything's broken
});

这不会捕获在我们有机会监听之前出错的图片;遗憾的是,DOM 无法让我们做到这一点。此外,这会加载一张图片。如果我们想知道一组图片何时加载完毕,情况会变得更加复杂。

事件并非总是最佳方式

事件非常适合在同一对象上多次发生的情况,例如 keyuptouchstart 等。对于这些事件,您并不太关心附加监听器之前发生了什么。但对于异步成功/失败,理想情况下您希望获得如下结果:

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 只能成功或失败一次。它不能成功或失败两次,也不能从成功切换到失败,反之亦然。
  • 如果某个 promise 已成功或失败,而您稍后又添加了成功/失败回调,则系统会调用正确的回调,即使相应事件发生在之前也是如此。

这对于异步成功/失败非常有用,因为您不太关心某项内容可用的确切时间,而更关心对结果的反应。

Promise 术语

Domenic Denicola 校对了本文的初稿,并因术语问题给了我“不及格”的评分。他让我留校,强迫我抄写《States and Fates》100 次,还写了一封忧心忡忡的信给我的父母。尽管如此,我仍然经常混淆这些术语,不过下面列出了基本概念:

承诺可以是:

  • fulfilled - 与 Promise 相关的操作成功完成
  • rejected - 与 Promise 相关的操作失败
  • 待处理 - 尚未完成或拒绝
  • 已结算 - 已完成或已拒绝

规范还使用术语 thenable 来描述类似 Promise 的对象,即具有 then 方法的对象。这个词让我想起了前英格兰足球队主教练 Terry Venables,所以我尽可能少用它。

JavaScript 中引入了 promise!

Promise 已经存在一段时间了,以库的形式存在,例如:

上述 Promise 和 JavaScript Promise 具有一种称为 Promises/A+ 的通用标准化行为。如果您是 jQuery 用户,那么您可能知道 jQuery 也有类似的东西,称为 Deferreds。不过,Deferred 不符合 Promise/A+ 标准,这使得它们略有不同且不太有用,因此请注意。jQuery 也有Promise 类型,但这只是 Deferred 的一个子集,存在相同的问题。

虽然 Promise 实现遵循标准化行为,但其总体 API 各不相同。JavaScript promise 在 API 方面与 RSVP.js 类似。以下是创建 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。

与普通旧版 JavaScript 中的 throw 类似,通常(但并非必须)使用 Error 对象进行拒绝。错误对象的好处在于,它们会捕获堆栈轨迹,从而使调试工具更加实用。

以下是使用该承诺的方法:

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

then() 接受两个实参,一个用于成功情况的回调,另一个用于失败情况的回调。这两个参数都是可选的,因此您可以只为成功或失败情况添加回调。

JavaScript promise 最初在 DOM 中称为“Future”,后来重命名为“Promise”,最终移至 JavaScript 中。将它们放在 JavaScript 中而不是 DOM 中非常棒,因为它们将在非浏览器 JS 上下文(例如 Node.js)中可用(它们是否在其核心 API 中使用它们是另一个问题)。

尽管它们是 JavaScript 功能,但 DOM 并不排斥使用它们。事实上,所有具有异步成功/失败方法的新 DOM API 都将使用 Promise。 配额管理字体加载事件ServiceWorkerWeb MIDIStreams 等功能已在采用这种方式。

与其他库的兼容性

JavaScript Promises API 会将任何具有 then() 方法的对象视为类似 Promise 的对象(或 Promise 术语中的 thenable sigh),因此如果您使用的库返回 Q Promise,也没问题,它会与新的 JavaScript Promise 完美配合。

不过,正如我所提到的,jQuery 的 Deferreds 有点…没用。 幸运的是,您可以将它们转换为标准 promise,因此建议您尽快执行此操作:

var jsPromise = Promise.resolve($.ajax('/whatever.json'))

在此示例中,jQuery 的 $.ajax 会返回一个 Deferred。由于它具有 then() 方法,因此 Promise.resolve() 可以将其转换为 JavaScript promise。不过,有时 deferred 会向其回调传递多个实参,例如:

var jqDeferred = $.ajax('/whatever.json');

jqDeferred.then(function(response, statusText, xhrObj) {
  // ...
}, function(xhrObj, textStatus, err) {
  // ...
})

而 JS promise 会忽略除第一个之外的所有其他 promise:

jsPromise.then(function(response) {
  // ...
}, function(xhrObj) {
  // ...
})

幸运的是,这通常是您想要的结果,或者至少让您能够获得想要的结果。另请注意,jQuery 不遵循将 Error 对象传递到拒绝中的惯例。

让复杂的异步代码变得更简单

好了,我们来编写一些代码。假设我们想:

  1. 启动旋转动画以指示正在加载
  2. 获取故事的 JSON,其中包含标题和每个章节的网址
  3. 为网页添加标题
  4. 提取每个章节
  5. 将故事添加到页面中
  6. 停止旋转微调器

… 但也要在过程中出现问题时告知用户。我们还需要在此时停止旋转微调器,否则它会一直旋转,让人眼花缭乱,并撞到其他界面。

当然,您不会使用 JavaScript 来呈现故事,以 HTML 形式呈现速度更快,但在处理 API 时,这种模式非常常见:多次提取数据,然后在所有数据提取完毕后执行某些操作。

首先,我们来处理从网络提取数据的问题:

将 XMLHttpRequest 转换为 Promise

如果可以向后兼容,旧版 API 将更新为使用 Promise。XMLHttpRequest 是一个理想的候选对象,但与此同时,我们先编写一个简单的函数来发出 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);
})

现在,我们可以发出 HTTP 请求,而无需手动输入 XMLHttpRequest,这非常棒,因为我越少看到令人恼火的 XMLHttpRequest 驼峰式命名,我的生活就会越快乐。

then() 并不是故事的结局,您可以将多个 then 链接在一起,以转换值或依次运行其他异步操作。

转换值

只需返回新值即可转换值:

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
})

举个实际的例子,我们回到以下代码:

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

响应采用 JSON 格式,但我们目前以纯文本格式接收。我们可以更改 get 函数以使用 JSON responseType,但也可以在 Promise 领域中解决此问题:

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

由于 JSON.parse() 仅接受一个实参并返回转换后的值,因此我们可以使用快捷方式:

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

事实上,我们可以非常轻松地创建一个 getJSON() 函数:

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

getJSON() 仍会返回一个 promise,该 promise 会提取网址,然后将响应解析为 JSON。

将异步操作加入队列

您还可以链接多个 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 发出异步请求,该请求会返回一组要请求的网址,然后我们请求其中的第一个网址。此时,Promise 真正开始从简单的回调模式中脱颖而出。

您甚至可以创建一个快捷方法来获取章节:

var storyPromise;

function getChapter(i) {
  storyPromise = storyPromise || getJSON('story.json');

  return storyPromise.then(function(story) {
    return getJSON(story.chapterUrls[i]);
  })
}

// and using it is simple:
getChapter(0).then(function(chapter) {
  console.log(chapter);
  return getChapter(1);
}).then(function(chapter) {
  console.log(chapter);
})

我们不会在调用 getChapter 之前下载 story.json,但下次调用 getChapter 时,我们会重复使用故事 promise,因此 story.json 只会提取一次。Yay Promises!

错误处理

如前所述,then() 接受两个实参,一个用于成功,一个用于失败(或用 Promise 的术语来说,一个用于兑现,一个用于拒绝):

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

您还可以使用 catch()

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

catch() 没什么特别之处,只是 then(undefined, func) 的语法糖,但可读性更高。请注意,上述两个代码示例的行为并不相同,后者等同于:

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

这种差异虽然微不足道,但非常有用。Promise 拒绝会跳过,直接进入下一个带有拒绝回调的 then()(或 catch(),因为它们是等效的)。使用 then(func1, func2) 时,系统将调用 func1func2,但不会同时调用这两者。但使用 then(func1).catch(func2) 时,如果 func1 拒绝,两者都会被调用,因为它们是链中的单独步骤。请考虑以下情况:

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don't worry about it");
}).then(function() {
  console.log("All done!");
})

上述流程与普通的 JavaScript try/catch 非常相似,在“try”中发生的错误会立即转到 catch() 块。以下是上述流程的流程图(因为我喜欢流程图):

蓝色线条表示已兑现的承诺,红色线条表示被拒绝的承诺。

JavaScript 异常和 promise

拒绝会在 promise 被明确拒绝时发生,如果构造函数回调中抛出错误,也会隐式发生拒绝:

var jsonPromise = new Promise(function(resolve, reject) {
  // JSON.parse throws an error if you feed it some
  // invalid JSON, so this implicitly rejects:
  resolve(JSON.parse("This ain't JSON"));
});

jsonPromise.then(function(data) {
  // This never happens:
  console.log("It worked!", data);
}).catch(function(err) {
  // Instead, this happens:
  console.log("It failed!", err);
})

这意味着,最好在 promise 构造函数回调中完成所有与 promise 相关的工作,这样系统会自动捕获错误并将其转换为拒绝。

then() 回调中抛出的错误也是如此。

get('/').then(JSON.parse).then(function() {
  // This never happens, '/' is an HTML page, not JSON
  // so JSON.parse throws
  console.log("It worked!", data);
}).catch(function(err) {
  // Instead, this happens:
  console.log("It failed!", err);
})

实际应用中的错误处理

借助我们的故事和章节,我们可以使用 catch 向用户显示错误:

getJSON('story.json').then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  addHtmlToPage(chapter1.html);
}).catch(function() {
  addTextToPage("Failed to show chapter");
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

如果提取 story.chapterUrls[0] 失败(例如,http 500 或用户处于离线状态),它将跳过所有后续的成功回调,包括 getJSON() 中尝试将响应解析为 JSON 的回调,还会跳过将 chapter1.html 添加到网页的回调。而是继续执行 catch 回调。因此,如果之前的任何操作失败,系统都会在网页中添加“未能显示章节”消息。

与 JavaScript 的 try/catch 类似,系统会捕获错误并继续执行后续代码,因此微调器始终处于隐藏状态,这正是我们想要的。上述代码会变为以下代码的非阻塞异步版本:

try {
  var story = getJSONSync('story.json');
  var chapter1 = getJSONSync(story.chapterUrls[0]);
  addHtmlToPage(chapter1.html);
}
catch (e) {
  addTextToPage("Failed to show chapter");
}
document.querySelector('.spinner').style.display = 'none'

您可能只是出于日志记录目的而希望捕获 catch(),而无需从错误中恢复。为此,只需重新抛出错误即可。我们可以在 getJSON() 方法中执行此操作:

function getJSON(url) {
  return get(url).then(JSON.parse).catch(function(err) {
    console.log("getJSON failed for", url, err);
    throw err;
  });
}

因此,我们成功提取了一个章节,但我们想要提取所有章节。让我们来实现这一目标。

并行性和序列化:兼具两者的优势

以异步方式思考并不容易。如果您难以入门,请尝试编写代码,就像它是同步代码一样。在此示例中:

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'

这样可以!但它会同步并锁定浏览器,同时下载内容。为了使此操作异步进行,我们使用 then() 使各项操作依次发生。

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';
})

但是,我们如何循环遍历章节网址并按顺序提取它们?以下方法不起作用

story.chapterUrls.forEach(function(chapterUrl) {
  // Fetch chapter
  getJSON(chapterUrl).then(function(chapter) {
    // and add it to the page
    addHtmlToPage(chapter.html);
  });
})

forEach 不支持异步,因此我们的章节会以下载顺序显示,这基本上就是《低俗小说》的写作方式。这不是《低俗小说》,所以我们来解决这个问题。

创建序列

我们希望将 chapterUrls 数组转换为一系列 promise。我们可以使用 then() 来实现此目的:

// 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);
  });
})

这是我们首次看到 Promise.resolve(),它会创建一个 promise,该 promise 会解析为您提供的任何值。如果您向其传递 Promise 的实例,它将只是返回该实例(注意:这是对规范的更改,某些实现尚未遵循)。如果您向其传递类似 Promise 的内容(具有 then() 方法),它会创建一个以相同方式实现/拒绝的真正 Promise。如果您传入任何其他值,例如 Promise.resolve('Hello'),它会创建一个以该值兑现的 promise。如果您在调用时不带任何值(如上所示),则会以“undefined”完成。

还有一个 Promise.reject(val),它会创建一个 promise,该 promise 会拒绝您提供的值(或 undefined)。

我们可以使用 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())

此示例与上一个示例执行相同的操作,但不需要单独的“序列”变量。系统会针对数组中的每个项调用 reduce 回调。 第一次调用时,“sequence”为 Promise.resolve(),但对于其余调用,“sequence”为我们从上一次调用返回的任何内容。array.reduce 非常适合将数组精简为单个值,在本例中,该值是一个 promise。

我们来总结一下:

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';
})

这样,我们就得到了同步版本的完全异步版本。但我们可以做得更好。目前,我们的网页下载方式如下:

浏览器非常擅长同时下载多项内容,因此我们逐个下载章节会损失性能。我们希望同时下载所有这些文件,然后在所有文件都下载完毕后进行处理。 幸运的是,有一个 API 可以实现此目的:

Promise.all(arrayOfPromises).then(function(arrayOfResults) {
  //...
})

Promise.all 接受一个 Promise 数组,并创建一个在所有 Promise 成功完成时兑现的 Promise。您会获得一个结果数组(无论 Promise 实现为哪个值),该数组的顺序与您传入的 Promise 的顺序相同。

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

  // Take an array of promises and wait on them all
  return Promise.all(
    // Map our array of chapter urls to
    // an array of chapter json promises
    story.chapterUrls.map(getJSON)
  );
}).then(function(chapters) {
  // Now we have the chapters jsons in order! Loop through…
  chapters.forEach(function(chapter) {
    // …and add to the page
    addHtmlToPage(chapter.html);
  });
  addTextToPage("All done");
}).catch(function(err) {
  // catch any error that happened so far
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

根据连接情况,这比逐个加载快几秒,并且代码比我们的第一次尝试要少。章节可以按任意顺序下载,但会按正确的顺序显示在屏幕上。

不过,我们仍然可以提升感知性能。当第一章到达时,我们应该将其添加到页面中。这样,用户便可在其余章节到达之前开始阅读。如果第三章已发布,我们不会将其添加到页面中,因为用户可能不会意识到第二章缺失。当第二章到来时,我们可以添加第二章和第三章,依此类推。

为此,我们同时提取所有章节的 JSON,然后创建一个序列以将其添加到文档中:

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

  // Map our array of chapter urls to
  // an array of chapter json promises.
  // This makes sure they all download in parallel.
  return story.chapterUrls.map(getJSON)
    .reduce(function(sequence, chapterPromise) {
      // Use reduce to chain the promises together,
      // adding content to the page for each chapter
      return sequence
      .then(function() {
        // Wait for everything in the sequence so far,
        // then wait for this chapter to arrive.
        return chapterPromise;
      }).then(function(chapter) {
        addHtmlToPage(chapter.html);
      });
    }, Promise.resolve());
}).then(function() {
  addTextToPage("All done");
}).catch(function(err) {
  // catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

这样就实现了两全其美!传送所有内容所需的时间相同,但用户可以更快地获得第一部分内容。

在这个简单的示例中,所有章节几乎同时到达,但如果章节更多、更大,一次显示一个章节的好处就会更加明显。

如果使用 Node.js 样式的回调或事件来实现上述功能,代码量大约会增加一倍,但更重要的是,代码也不太容易理解。不过,这并不是 Promise 的全部内容,当它们与其他 ES6 功能结合使用时,会变得更加简单。

加分赛:扩展功能

自从我最初撰写本文以来,使用 Promise 的功能已大大扩展。自 Chrome 55 以来,异步函数允许将基于 Promise 的代码编写为同步代码,但不会阻塞主线程。如需详细了解,请参阅我的异步函数文章。主要浏览器广泛支持 Promise 和异步函数。您可以在 MDN 的 Promiseasync 函数参考文档中找到相关详细信息。

非常感谢 Anne van Kesteren、Domenic Denicola、Tom Ashworth、Remy Sharp、Addy Osmani、Arthur Evans 和 Yutaka Hirano 对本文进行校对并提供更正/建议。

此外,还要感谢 Mathias Bynens 更新了本文的各个部分。