【JavaScript】Promise

FullStackDeveloper 发布于2019-08-26 12:15 / 3355人阅读

摘要：对于这些事件，实际您并不关注在添加侦听器之前所发生的事情。如果图像元素有一个返回的方法，我们可以执行两个特点有点类似于事件侦听器，但有以下两点区别只能成功或失败一次，而不能成功或失败两次，也不能从成功转为失败或从失败转为成功。

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() 包含两个参数：一个用于成功情形的回调和一个用于失败情形的回调。这两个都是可选的，因此您可以只添加一个用于成功情形或失败情形的回调。

实例

启动一个转环来提示加载

获取一个故事的 JSON，确定每个章节的标题和网址

向页面中添加标题

获取每个章节

向页面中添加故事

停止转环

但如果此过程发生错误，也要向用户显示。我们也想在那一点停止转环，否则，它将不停地旋转、眩晕并撞上其他 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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108337.html

JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切

摘要：最受欢迎的引擎是，在和中使用，用于，以及所使用的。怎么处理每个引擎都有一个基本组件，称为调用栈。也就是说，如果有其他函数等待执行，函数是不能离开调用栈的。每个异步函数在被送入调用栈之前必须通过回调队列。例如方法是在中传递的回调函数。翻译：疯狂的技术宅原文：www.valentinog.com/blog/engine… 从Call Stack，Global Me...

zzbo 2019-06-18 11:16 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切

摘要：最受欢迎的引擎是，在和中使用，用于，以及所使用的。单线程的我们说是单线程的，因为有一个调用栈处理我们的函数。也就是说，如果有其他函数等待执行，函数是不能离开调用栈的。每个异步函数在被送入调用栈之前必须通过回调队列。翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 sh...

Simon_Zhou 2019-08-26 13:49 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
异步 JavaScript 与 Promise

摘要：为这些回调函数分别命名并分离存放可以在形式上减少嵌套，使代码清晰，但仍然不能解决问题。如果在一个结束成功或失败，同前面的说明后，添加针对成功或失败的回调，则回调函数会立即执行。异步？我在很多地方都看到过异步(Asynchronous)这个词，但在我还不是很理解这个概念的时候，却发现自己常常会被当做已经很清楚(*￣ﾛ￣)。如果你也有类似的情况，没关系，搜索一下这个词，就可以得到大致...

livem 2019-08-21 10:26 评论0 收藏0
javascript异步之Promise.all()、Promise.race()、Promise.

摘要：的执行与状态无关当得到状态不论成功或失败后就会执行，原文链接参考链接对象同期异步系列文章推荐谈一谈javascript异步javascript异步中的回调javascript异步与promisejavascript异步之Promise.resolve()、Promise.reject()javascript异步之Promise then和catchjavascript异步之async...

clasnake 2019-08-23 14:53 评论0 收藏0