Promise 是 JavaScript 语言的一个相对较新的功能,允许您推迟进一步的操作,直到上一个操作完成或响应其失败。这对于设置一系列异步操作以正常工作非常有用。本文向您展示了promises如何工作,如何在Web API中使用它们以及如何编写自己的API

Prerequisites: 基本的计算机素养,具备基础的JavaScript知识
Objective: 理解并使用学习如何使用Promies

What are promises?

我们在教程的第一篇文章中简要地了解了 Promises,接下来我们将在更深层次理解Promise。

Promise 对象本质上表示的是一系列操作的中间状态,或者说是未来某时刻一个操作完成或失败后返回的结果。Promise并不保证操作在何时完成并返回结果,但是保证在当前操作成功后执行您对操作结果的处理代码,或在操作失败后,优雅地处理操作失败的情况。

通常你不会对一个异步操作从开始执行到返回结果所用的时间感兴趣(除非它耗时过长),你会更想在任何时候都能响应操作结果,当然它不会阻塞其余代码的执行就更好了。

Promise的一种常见使用方式是在有些返回Promise对象的Web API 中。让我们设想一个视频聊天应用程序,该程序有一个展示用户的朋友列表的窗口,可以点击朋友旁边的按钮对朋友视频呼叫。

该按钮的处理程序调用getUserMedia()来访问用户的摄像头和麦克风。由于 getUserMedia() 必须确保用户具有使用这些设备的权限,并询问用户要使用哪个麦克风和摄像头(或者是否仅进行语音通话,以及其他可能的选项),因此它会产生阻塞,直到用户做出所有的决定,并且摄像头和麦克风都已启用。此外,用户可能不会立即响应权限请求。所以 getUserMedia() 可能需要很长时间。

由于 getUserMedia() 是在浏览器的主线程进行调用,整个浏览器将会处于阻塞状态直到 getUserMedia() 返回,这是不应该发生的;不使用Promise,浏览器将处于不可用状态直到用户为摄像头和麦克风做出决定。因此 getUserMedia() 返回一个Promise对象,一旦返回就继续去获取MediaStream流,而不是等待用户操作、启动选中的设备并直接返回从所选资源创建的 MediaStream 流。

上述视频聊天应用程序的代码可能像下面这样:

function handleCallButton(evt) {
  setStatusMessage("Calling...");
  navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(chatStream => {
      selfViewElem.srcObject = chatStream;
      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
      setStatusMessage("Connected");
    }).catch(err => {
      setStatusMessage("Failed to connect");
    });
}

这个函数在开头调用 setStatusMessage() 来更新状态显示信息"Calling...", 表示正在尝试呼叫。接下来调用 getUserMedia(),请求具有视频及音频轨的流,一获得这个来自摄像头的流,就将其显示在"selfViewElem"的video元素中。接下来将这个流的每个轨道添加到表示与另一个用户的连接的 WebRTC,参见RTCPeerConnection。在这之后,状态显示为"Connected"。

如果getUserMedia()失败,则catch块运行。这使用setStatusMessage()更新状态框以指示发生错误。

这里重要的是getUserMedia()调用几乎立即返回,即使尚未获得相机流。即使handleCallButton()函数已经返回到调用它的代码,当getUserMedia()完成工作时,它也会调用您提供的处理程序。只要应用程序不假设流式传输已经开始,它就可以继续运行。

注意:  如果您有兴趣,可以在文章Signaling and video calling中了解有关此高级主题的更多信息。在该示例中使用与此类似的代码,但更完整。

 回调函数的麻烦

要完全理解为什么promise是一件好事,它有助于回想旧式回调,并了解为什么它们有问题。

我们来谈谈订购披萨作为类比。为了使您的订单成功,您必须采取某些步骤,尝试按顺序执行或按顺序但在每个上一步完成之前没有意义:

  1. 你选择你想要的配料。如果你是优柔寡断,这可能需要一段时间,如果你无法下定决心或者决定换咖喱,可能会失败。
  2. 然后你下订单。返回比萨饼可能需要一段时间,如果餐厅没有烹饪所需的配料,可能会失败。
  3. 然后你收集你的披萨吃。如果你忘记了自己的钱包,那么这可能会失败,所以无法支付比萨饼的费用!

对于旧式callbacks,上述功能的伪代码表示可能如下所示:

chooseToppings(function(toppings) {
  placeOrder(toppings, function(order) {
    collectOrder(order, function(pizza) {
      eatPizza(pizza);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

这很麻烦且难以阅读(通常称为“回调地狱”),需要多次调用failureCallback()(每个嵌套函数一次),还有其他问题。

使用promise改良

Promises使得上面的情况更容易编写,解析和运行。如果我们使用异步promises代表上面的伪代码,我们最终会得到这样的结果:

chooseToppings()
.then(function(toppings) {
  return placeOrder(toppings);
})
.then(function(order) {
  return collectOrder(order);
})
.then(function(pizza) {
  eatPizza(pizza);
})
.catch(failureCallback);

这要好得多 - 更容易看到发生了什么,我们只需要一个.catch()块来处理所有错误,它不会阻塞主线程(所以我们可以在等待时继续玩视频游戏为了准备好收集披萨),并保证每个操作在运行之前等待先前的操作完成。我们能够以这种方式一个接一个地链接多个异步操作,因为每个.then()块返回一个新的promise,当.then()块运行完毕时它会解析。聪明,对吗?

使用箭头函数,您可以进一步简化代码:

chooseToppings()
.then(toppings =>
  placeOrder(toppings)
)
.then(order =>
  collectOrder(order)
)
.then(pizza =>
  eatPizza(pizza)
)
.catch(failureCallback);

甚至这样:

chooseToppings()
.then(toppings => placeOrder(toppings))
.then(order => collectOrder(order))
.then(pizza => eatPizza(pizza))
.catch(failureCallback);

这是有效的,因为使用箭头函数 () => x()=> {return x;}  的有效简写; 。

你甚至可以这样做,因为函数只是直接传递它们的参数,所以不需要额外的函数层:

chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);

但是,这并不容易阅读,如果您的块比我们在此处显示的更复杂,则此语法可能无法使用。

注意: 您可以使用 async/await 语法进行进一步的改进,我们将在下一篇文章中深入讨论。

最基本的,promise与事件监听器类似,但有一些差异:

  • 一个promise只能成功或失败一次。它不能成功或失败两次,并且一旦操作完成,它就无法从成功切换到失败,反之亦然。
  • 如果promise成功或失败并且您稍后添加成功/失败回调,则将调用正确的回调,即使事件发生在较早的时间。

 解释promise的基本语法:一个真实的例子

Promises 很重要,因为大多数现代Web API都将它们用于执行潜在冗长任务的函数。要使用现代Web技术,您需要使用promises。在本章的后面我们将看看如何编写自己的promises,但是现在我们将看一些您将在Web API中遇到的简单示例。

在第一个示例中,我们将使用fetch()方法从Web获取图像,blob()方法来转换获取响应的原始内容到Blob对象,然后在<img>元素内显示该blob。这与我们在 first article of the series中看到的示例非常相似,但是我们会在构建您自己的基于承诺的代码时有所不同。 

  1. 首先,下载我们的 simple HTML templatesample image file

  2. <script> 元素添加在HTML <body> 的底部。

  3. <script> 元素内,添加以下行:

    let promise = fetch('coffee.jpg');

    这会调用 fetch() 方法,将图像的URL作为参数从网络中提取。这也可以将options对象作为可选的第二个参数,但我们现在只使用最简单的版本。我们将 fetch() 返回的promise对象存储在一个名为promise的变量中。正如我们之前所说的,这个对象代表了一个最初既不成功也不失败的中间状态 - 这个状态下的promise的官方术语叫作pending

  4. 为了响应成功完成操作(在这种情况下,当返回Response时),我们调用promise对象的.then()方法。 .then()块中的回调(称为执行程序)仅在promise调用成功完成时运行并返回Response对象 - 在promise-speak中,当它已被满足时。它将返回的Response对象作为参数传递。

    注意: .then()块的工作方式类似于使用AddEventListener()向对象添加事件侦听器时的方式。它不会在事件发生之前运行(当promise履行时)。最显着的区别是.then()每次使用时只运行一次,而事件监听器可以多次调用。

    我们立即对此响应运行blob()方法以确保响应主体完全下载,并且当它可用时将其转换为我们可以执行某些操作的Blob对象。返回的结果如下:

    response => response.blob()

    这是下面的简写

    function(response) {
        return response.blob();
    }
    

    好的,现在有足够的解释。在第一行JavaScript下面添加以下行。

    let promise2 = promise.then(response => response.blob());
  5. 每次调用.then()都会创建一个新的promise。这非常有用;因为blob()方法也返回一个promise,我们可以通过调用第二个promise的.then()方法来处理它在履行时返回的Blob对象。因为我们想要对blob执行一些更复杂的操作,而不仅仅运行单个方法并返回结果,这次我们需要将函数体包装成花括号(否则会抛出错误)。

    将以下内容添加到代码的末尾:

    let promise3 = promise2.then(myBlob => {})
  6. 现在让我们填写执行程序函数的主体。在花括号内添加以下行:

    let objectURL = URL.createObjectURL(myBlob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);

    这里我们运行URL.createObjectURL()方法,将其作为Blob在第二个promise实现时返回的参数传递。这将返回指向该对象的URL。然后我们创建一个<img>元素,将其src属性设置为等于对象URL并将其附加到DOM,这样图像就会显示在页面上!

如果您保存刚刚创建的HTML文件并将其加载到浏览器中,您将看到图像按预期显示在页面中。干得好!

注意: 你可能会注意到这些例子有点做作。您可以取消整个fetch()blob()链,只需创建一个<img>元素并将其src属性值设置为图像文件的URL,即coffee.jpg。然而,我们选择了这个例子,因为它以简单的方式展示了promise,而不是真实世界的适当性。

响应失败

缺少一些东西 - 如果其中一个promise失败(rejects,in promise-speak),目前没有什么可以明确地处理错误。我们可以通过运行前一个promise的 .catch() 方法来添加错误处理。立即添加:

let errorCase = promise3.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

要查看此操作,请尝试拼错图像的URL并重新加载页面。该错误将在浏览器的开发人员工具的控制台中报告。

如果您根本不操心包括的 .catch() 块,这并没有做太多的事情,但考虑一下(指.catch()块) ––这会使我们可以完全控制错误处理方式。在真实的应用程序中,您的.catch()块可以重试获取图像,或显示默认图像,或提示用户提供不同的图像URL等等。

注意: 你可以参考 our version of the example live (参阅 source code ).

将代码块链在一起

这是写出来的一种非常简便的方式;我们故意这样做是为了帮助您清楚地了解发生了什么。如本文前面所示,您可以将.then()块(以及.catch()块)链接在一起。上面的代码也可以这样写(参阅GitHub上的simple-fetch-chained.html ):

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

请记住,履行的promise所返回的值将成为传递给下一个 .then() 块的executor函数的参数。

注意: promise中的.then()/catch()块基本上是同步代码中try...catch块的异步等价物。请记住,同步try ... catch在异步代码中不起作用。

Promise术语回顾

在上面的部分中有很多要介绍的内容,所以让我们快速回过头来给你一个简短的指南,你可以将它添加到书签中,以便将来更新你的记忆。您还应该再次阅读上述部分,以确保这些概念坚持下去。

  1. 创建promise时,它既不是成功也不是失败状态。这个状态叫作pending(待定)。
  2. 当promise返回时,称为 resolved(已解决).
    1. 一个成功resolved的promise称为fullfilled实现)。它返回一个值,可以通过将.then()块链接到promise链的末尾来访问该值。 .then()块中的执行程序函数将包含promise的返回值。
    2. 一个不成功resolved的promise被称为rejected拒绝)了。它返回一个原因(reason),一条错误消息,说明为什么拒绝promise。可以通过将.catch()块链接到promise链的末尾来访问此原因。

 运行代码以响应多个Promises的实现

上面的例子向我们展示了使用promises的一些真正的基础知识。现在让我们看一些更高级的功能。首先,链接进程一个接一个地发生都很好,但是如果你想在一大堆Promises全部完成之后运行一些代码呢?

 您可以使用巧妙命名的Promise.all()静态方法完成此操作。这将一个promises数组作为输入参数,并返回一个新的Promise对象,只有当数组中的所有promise都满足时才会满足。它看起来像这样:

Promise.all([a, b, c]).then(values => {
  ...
});

如果它们都实现,那么链接的.then()块的执行器函数将被传递一个包含所有这些结果作为参数的数组。如果传递给Promise.all()的任何promise都拒绝,整个块将拒绝

这非常有用。想象一下,我们正在获取信息以在内容上动态填充页面上的UI功能。在许多情况下,接收所有数据然后才显示完整内容,而不是显示部分信息是有意义的。

让我们构建另一个示例来展示这一点。

  1. 下载我们页面模板(page template)的新副本,并再次在结束</ body>标记之前放置一个<script>元素。

  2. 下载我们的源文件(coffee.jpg, tea.jpg和 description.txt),或者随意替换成您自己的文件。

  3. 在我们的脚本中,我们将首先定义一个函数,该函数返回我们要发送给Promise.all()的promise。如果我们只想运行Promise.all()块以响应三个fetch()操作完成,这将很容易。我们可以这样做:

    let a = fetch(url1);
    let b = fetch(url2);
    let c = fetch(url3);
    
    Promise.all([a, b, c]).then(values => {
      ...
    });

    当promise是fullfilled时,传递到履行处理程序的values将包含三个Response对象,每个对象用于已完成的每个fetch()操作。

    但是,我们不想这样做。我们的代码不关心fetch()操作何时完成。相反,我们想要的是加载的数据。这意味着当我们返回代表图像的可用blob和可用的文本字符串时,我们想要运行Promise.all()块。我们可以编写一个执行此操作的函数;在<script>元素中添加以下内容:

    function fetchAndDecode(url, type) {
      return fetch(url).then(response => {
        if (type === 'blob') {
          return response.blob();
        } else if (type === 'text') {
          return response.text();
        }
      })
      .catch(e => {
        console.log('There has been a problem with your fetch operation: ' + e.message);
      });
    }

    这看起来有点复杂,所以让我们一步一步地完成它:

    1. 首先,我们定义函数,向它传递一个URL和一个表示它正在获取的资源类型的字符串。
    2. 在函数体内部,我们有一个类似于我们在第一个例子中看到的结构 - 我们调用fetch()函数来获取指定URL处的资源,然后将其链接到另一个返回解码(或“read”)的promise。 )响应body。这始终是前一个示例中的blob()方法。
    3. 但是,这里有两处不同:
      • 首先,我们返回的第二个promise会因类型值的不同而不同。在执行函数内部,我们包含一个简单的if ... else if语句,根据我们需要解码的文件类型返回不同的promise(在这种情况下,我们可以选择blobtext,但这很容易扩展这个以处理其他类型)。
      • 其次,我们在fetch()调用之前添加了return关键字。它的作用是运行整个链,然后运行最终结果(即blob()text()返回的promise作为我们刚刚定义的函数的返回值)。实际上,return语句将结果从链返回到顶部。
    4. 在块结束时,我们链接一个.catch()调用,以处理任何可能出现在数组中传递给.all()的任何promise的错误情况。如果任何promise被拒绝,catch块将告诉您哪个promise有问题。 .all()块(见下文)仍然可以实现,但不会显示有问题的资源。如果你想要.all拒绝,你必须将.catch()块链接到那里的末尾。

    函数体内部的代码是async(异步)和基于promise的,因此实际上整个函数就像一个promise ––方便啊!

  4. 接下来,我们调用我们的函数三次以开始获取和解码图像和文本的过程,并将每个返回的promises存储在变量中。在以前的代码下面添加以下内容:

    let coffee = fetchAndDecode('coffee.jpg', 'blob');
    let tea = fetchAndDecode('tea.jpg', 'blob');
    let description = fetchAndDecode('description.txt', 'text');
  5. 接下来,我们将定义一个Promise.all()块,仅当上面存储的所有三个promise都已成功完成时才运行一些代码。首先,在.then()调用中添加一个带有空执行程序的块,如下所示:

    Promise.all([coffee, tea, description]).then(values => {
    
    });

    您可以看到它需要一个包含promises作为参数的数组。执行者只有在所有三个promises的状态成为resolved时才会运行;当发生这种情况时,它将传递一个数组,其中包含来自各个promise(即解码的响应主体)的结果,类似于 [coffee-results, tea-results, description-results].

  6. 最后,在执行程序中添加以下内容。这里我们使用一些相当简单的同步代码将结果存储在单独的变量中(从blob创建对象URL),然后在页面上显示图像和文本。

    console.log(values);
    // Store each value returned from the promises in separate variables; create object URLs from the blobs
    let objectURL1 = URL.createObjectURL(values[0]);
    let objectURL2 = URL.createObjectURL(values[1]);
    let descText = values[2];
    
    // Display the images in <img> elements
    let image1 = document.createElement('img');
    let image2 = document.createElement('img');
    image1.src = objectURL1;
    image2.src = objectURL2;
    document.body.appendChild(image1);
    document.body.appendChild(image2);
    
    // Display the text in a paragraph
    let para = document.createElement('p');
    para.textContent = descText;
    document.body.appendChild(para);
  7. 保存并刷新,您应该看到所有UI组件都已加载,尽管不是特别有吸引力!

我们在这里提供的用于显示项目的代码相当简陋,但现在作为解释器。

注意: 如果您遇到困难,可以将您的代码版本与我们的代码进行比较,看看它的外观 -––see it live,也可以参阅source code

注意: 如果你正在改进这段代码,你可能想要遍历一个项目列表来显示,获取和解码每个项目,然后循环遍历Promise.all()内部的结果,运行一个不同的函数来显示每个项目取决于什么代码的类型是。这将使它适用于任何数量的项目,而不仅仅是三个。

此外,您可以确定要获取的文件类型,而无需显式类型属性。例如,您可以使用response.headers.get("content-type")检查响应的Content-Type HTTP标头,然后做出相应的反应。

 在promise fullfill/reject后运行一些最终代码

在promise完成后,您可能希望运行最后一段代码,无论它是否已实现(fullfilled)或被拒绝(rejected)。此前,您必须在.then().catch()回调中包含相同的代码,例如:

myPromise
.then(response => {
  doSomething(response);
  runFinalCode();
})
.catch(e => {
  returnError(e);
  runFinalCode();
});

在最近的现代浏览器中,.finally() 方法可用,它可以链接到常规promise链的末尾,允许您减少代码重复并更优雅地执行操作。上面的代码现在可以写成如下:

myPromise
.then(response => {
  doSomething(response);
})
.catch(e => {
  returnError(e);
})
.finally(() => {
  runFinalCode();
});

有关一个真实示例,请查看我们的promise-finally.html demo(另请参阅source code)。这与我们在上面部分中看到的Promise.all()演示完全相同,除了在fetchAndDecode()函数中我们将finally()调用链接到链的末尾:

function fetchAndDecode(url, type) {
  return fetch(url).then(response => {
    if(type === 'blob') {
      return response.blob();
    } else if(type === 'text') {
      return response.text();
    }
  })
  .catch(e => {
    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
  })
  .finally(() => {
    console.log(`fetch attempt for "${url}" finished.`);
  });
}

这会将一条简单的消息记录到控制台,告诉我们每次获取尝试的时间。

注意:finally()允许您在异步代码中编写异步等价物try/ catch / finally。

 构建自定义promise

好消息是,在某种程度上,你已经建立了自己的promise。当您使用.then()块链接多个promise时,或者将它们组合起来创建自定义函数时,您已经在创建自己的基于异步声明的自定义函数。例如,从前面的示例中获取我们的fetchAndDecode()函数。

将不同的基于promise的API组合在一起以创建自定义函数是迄今为止您使用promises进行自定义事务的最常见方式,并展示了基于相同原则的大多数现代API的灵活性和强大功能。然而,还有另一种方式。

使用Promise()构造函数

可以使用Promise() 构造函数构建自己的promise。您希望这样做的主要情况是,当您获得基于非基于promise的旧式异步API的代码时,您希望实现这一点。当您需要使用现有的旧项目代码,库或框架以及基于现代promise的代码时,这会派上用场。

让我们看一个简单的示例来帮助您入门 - 这里我们使用promise包装一个setTimeout()调用 - 这会在两秒后运行一个函数,该函数解析了promise(使用传递的resolve()调用),字符串为“Success!”。

let timeoutPromise = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve('Success!');
  }, 2000);
});

resolve()reject()是您调用以实现或拒绝新创建的promise的函数。在这种情况下,promise实现了一串“Success!”。

因此,当您调用此promise时,可以将.then()块链接到它的末尾,并将传递一串“Success!”。在下面的代码中,我们只是提醒该消息:

timeoutPromise
.then((message) => {
   alert(message);
})

甚至只是

timeoutPromise.then(alert);

尝试 running this live 以查看结果 (可参考 source code).

上面的例子不是很灵活 - promise只能用一个字符串来实现,并且它没有指定任何类型的reject()条件(诚然,setTimeout()实际上没有失败条件,所以它这个简单的例子并不重要)。

注意: 为什么要resolve(),而不是fullfill()?我们现在给你的答案有些复杂。

拒绝一个自定义promise

我们可以创建一个reject() 方法拒绝promise  - 就像resolve()一样,这需要一个值,但在这种情况下,它是拒绝的原因,即将传递给.catch()的错误块。

让我们扩展前面的例子,使其具有一些reject()条件,并允许在成功时传递不同的消息。

获取previous example副本,并将现有的timeoutPromise()定义替换为:

function timeoutPromise(message, interval) {
  return new Promise((resolve, reject) => {
    if (message === '' || typeof message !== 'string') {
      reject('Message is empty or not a string');
    } else if (interval < 0 || typeof interval !== 'number') {
      reject('Interval is negative or not a number');
    } else {
      setTimeout(function(){
        resolve(message);
      }, interval);
    }
  });
};

在这里,我们将两个方法传递给一个自定义函数 - 一个用来做某事的消息,以及在做这件事之前要经过的时间间隔。在函数内部,我们返回一个新的Promise对象 - 调用该函数将返回我们想要使用的promise。

Promise构造函数中,我们在if ... else结构中进行了一些检查:

  1. 首先,我们检查消息是否适合被警告。如果它是一个空字符串或根本不是字符串,我们会使用合适的错误消息拒绝该promise。
  2. 接下来,我们检查间隔是否是适当的间隔值。如果是负数或不是数字,我们会使用合适的错误消息拒绝promise。
  3. 最后,如果参数看起来都正常,我们使用setTimeout()在指定的时间间隔过后,使用指定的消息解析promise。

由于timeoutPromise()函数返回一个Promise,我们可以将.then().catch()等链接到它上面以利用它的功能。现在让我们使用它 - 将以前的timeoutPromise用法替换为以下值:

timeoutPromise('Hello there!', 1000)
.then(message => {
   alert(message);
})
.catch(e => {
  console.log('Error: ' + e);
});

当您按原样保存并运行代码时,一秒钟后您将收到消息提醒。现在尝试将消息设置为空字符串或将间隔设置为负数,例如,您将能够通过相应的错误消息查看被拒绝的promise!您还可以尝试使用已解决的消息执行其他操作,而不仅仅是提醒它。

注意: 您可以在GitHub上找到我们的这个示例版本custom-promise2.html(另请参阅source code)。

一个更真实的例子

上面的例子是故意做得简单,以使概念易于理解,但它并不是实际上完全同步。异步性质基本上是使用setTimeout()伪造的,尽管它仍然表明promises对于创建具有合理的操作流程,良好的错误处理等的自定义函数很有用

我们想邀请你学习的一个例子是Jake Archibald's idb library,它真正地显示了Promise()构造函数的有用异步应用程序。这采用了 IndexedDB API,它是一种旧式的基于回调的API,用于在客户端存储和检索数据,并允许您将其与promises一起使用。如果您查看main library file,您将看到我们在上面讨论过的相同类型的技术。以下块将许多IndexedDB方法使用的基本请求模型转换为使用promise:

function promisifyRequest(request) {
  return new Promise(function(resolve, reject) {
    request.onsuccess = function() {
      resolve(request.result);
    };

    request.onerror = function() {
      reject(request.error);
    };
  });
}

这可以通过添加一些事件处理程序来实现,这些事件处理程序在适当的时候实现(fullfill)和拒绝(reject)promise。

总结

当我们不知道函数的返回值或返回需要多长时间时,Promises是构建异步应用程序的好方法。它们使得在没有深度嵌套回调的情况下更容易表达和推理异步操作序列,并且它们支持类似于同步try ... catch语句的错误处理方式。

Promise适用于所有现代浏览器的最新版本;promise有兼容问题的唯一情况是Opera Mini和IE11及更早版本。

本文中,我们没有涉及的所有promise的功能,只是最有趣和最有用的功能。当您开始了解有关promise的更多信息时,您会遇到更多功能和技巧。

大多数现代Web API都是基于promise的,因此您需要了解promise才能充分利用它们。这些API包括WebRTCWeb Audio APIMedia Capture and Streams等等。随着时间的推移,Promises将变得越来越重要,因此学习使用和理解它们是学习现代JavaScript的重要一步。

参见

 本章内容

文档标签和贡献者

此页面的贡献者: PYGC, masterZSH, wangfangping, kafm, zijieee
最后编辑者: PYGC,