添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

1. 描述

Promise 是异步编程的一种解决方案,它是一个对象,从它可以获取异步操作的消息。主要应用在当发起一个异步操作,并需要等待处理结果才可以进行下一步操作的场景。它有以下特点:

一个 Promise 必然处于以下几种状态之一:

  1. 待定(pending) : 初始状态,既没有被兑现,也没有被拒绝。
  2. 已兑现(fulfilled) : 意味着操作成功完成。
  3. 已拒绝(rejected) : 意味着操作失败。

promise的状态 只能由pending变为 resolve 或者 pending 变为 reject 这两种过程,当状态改变以后,就称之为已定型( settled );
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都 无法 改变这个状态。
promise在状态改变之前,也就是 pending 改变为 resolve 或者 reject 之前的过程是没有办法感知到进展哪一步的,只能感知到它处在 pending 中;

2. 基本使用

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve reject
Resolve函数的作用是,将Promise对象的状态从“ 未完成 ”变为“ 成功 ”(即从 pending 变为 resolved ),在异步操作成功时调用,并将异步操作的结果作为参数传递出去; reject 函数的作用是,将 Promise 对象的状态从“ 未完成 ”变为“ 失败 ”(即从 pending 变为 rejected ),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

  1. Promise 是一个构造函数,使用它需要先 new 一个 promise 实例
const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
});
  1. Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

3. Promise.prototype.then()方法

  1. 有两个参数,第一个是resolve状态执行的函数,第二个是reject状态执行的函数;这两个参数都是回调函数;

  2. then()方法返回的是一个新的Promise的实例,因此可以进行链式调用;

  3. then()resolve参数可以返回一个值,这个值会作为下一个then()方法中的resolve函数的参数传递;使用return字段返回,或者箭头函数()=> xxxx() => { return xxx } 返回的这个值可以是普通的return xxx(字符串、变量等),也可以是return new Promise();

如果return的是同步函数,则直接使用这个return的值作为下一个then()的参数;

// 场景一:then() return 一个变量/值
const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('p1的value'), 3000)
p1.then(value => {
  console.log(value)//  p1的value
  return `第一个then返回的value` // 注意:这里如果没有return一个变量,下面的打印的value 就是 undefined
  .then(value => {
    console.log(value)//  第一个then返回的value

如果是return一个new Promise 则会等待这个promise执行完以后,成功则执行resolve函数,失败则执行reject函数,而参数则是使用这个promise传出来的值作为参数;

// 场景二:then() return 一个promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('成功'), 3000)
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('失败了')), 3000)
p1.then(function (post) {
  return p2
}).then(
  (resolve) => console.log(resolve),
  (reject) => console.log(reject)
// => Error: 失败了 at eval ...

总结一下,then()方法的链式调用是由于本身就返回了一个新的promise实例对象,resolve函数需要返回一个值作为下一个then()方法的实参,如果没有返回值,则是undefined

4. 同时发起多个异步操作

Promise.all()

// 1.定义多个promise实例,p1, p2, p3,作为数组传入
const p = Promise.all([p1, p2, p3]);
p.then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});
  • 只有p1p2p3的状态变成fulfilled,p的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。
  • 只要p1p2p3之中有一个被rejectedp的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
  • 上面代码中,promises是包含 3 个 Promise 实例的数组,只有这 3个实例的状态都变成fulfilled,或者其中有一个变为rejected,才会调用Promise.all方法后面的回调函数。

注意,如果作为参数的Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()catch方法。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

上面代码中,p1resolvedp2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的Promise 实例,p2指向的实际上是这个实例。该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。
如果p2没有自己的catch方法,就会调用Promise.all()的catch方法。

Promise使用与理解1. 描述Promise 是异步编程的一种解决方案,它是一个对象,从它可以获取异步操作的消息。主要应用在当发起一个异步操作,并需要等待处理结果才可以进行下一步操作的场景。它有以下特点:一个 Promise 必然处于以下几种状态之一:待定(pending): 初始状态,既没有被兑现,也没有被拒绝。已兑现(fulfilled): 意味着操作成功完成。已拒绝(rejected): 意味着操作失败。promise的状态 只能由pending变为resolve或者pendin
Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验。于是便有了 CommonJSPromises/A 规范,用于解决回调金字塔问题。本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解。 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的某个时间点可以被解析的值。它允许你以一种同步的方式编写异步代码。例如,如果你想要使用 Promise
JS 是基于单线程事件循环”的概念构建的,回调函数不会立即执行,由事件轮询去检测事件是否执行完毕,当执行完有结果后,将结果放入回调函数的参数中,然后将回调函数添加到事件队列中等待被执行。 同时也讲了回调函数的问题: 一是“回调地狱”,因为异步回调函数的特点:回调函数是作为异步函数的参数,一层一层嵌套,当嵌套过多,将使代码逻辑变得混乱,也无法做好错误捕捉和处理(只能在回调函数内部 try catch)。 二是回调的执行方式不符合自然语言的线性思维方式,不容易被理解。 三是控制反转(控制权在其他人的代码上),假如异步函数是别人提供的库,我们把回调函数传进去,我们并不能知道异步函数
下面给大家介绍vue中promise使用   promise是处理异步的利器,在之前的文章《ES6promise》中,我详细介绍了promise使用, 在文章《js动画实现&&回调地狱&&promise》中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解。   进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品请求出来,注意: 必须要按照顺序。 在商品页, created 钩子函数触发获取分类的http请求,请求到结果后,开始请求所有的
类型“number”不是 ES5/ES3 中的有效异步函数返回类型,因为其未引用与 Promise 相符的构造函数值。ts(1055) 解决方法: // 改写法为如下: async function name1(num: number, num1: number):Promise<number> { 在异步编程中直接使用传统回调的方式去完成复杂的异步流程,那就无法避免大量的回调函数嵌套,这就会导致回调地狱问题。举个例子: 为了避免这个问题,CommonJS社区提出了Promise的规范,在ES2015中被纳入规范。 Promise实际上就是一个对象用来表示异步任务在执行过后是成功还是失败。一开始这个承诺是待定的状态,在执行过后有两个结果,成功或者失败。不管是成功还是失败,都会有对应得反应方法。 在结果产生后对应得方法都会自动执行,出自之外还有一个特性,就是这个结果一旦产生那就无法
Promise 是抽象的异步处理对象 构造方法Promise 有三个状态:  上面我们提到 Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 和 .   resolve函数的作用是,将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved), 在异步操作成功时调用,并将异步操作的结果作为参数传递出去。   reject函数的作用是,将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected
Promise的学习小结 1.Promise的概念 Promise异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法 Promise对象有以下两个特点: (1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字
PromiseES6新增的一个内置类(不兼容IE浏览器),我们叫他期约、或者约定。和人类语言相似,意思是对某个现阶段不存在的东西进行约定操作 Promise是一种设计模式(承诺者模式) 该设计模式的组成:立承诺 ==》根据承诺执行动作 要干什么事情、状态(成功,失败)、成功/失败后对应要做的事情。后续需要做的事情,按照之前的承诺去履行就行了。 Promise是为了管理“异步编程”代码,解决异步编程中回调的问题
PromiseJavaScript中是一种异步编程的方式,它可以使我们更轻松地处理请求和响应。然而,初学Promise时,它的内部工作流程和语义会让人感到困惑。 一方面,Promise作为一种异步编程的方式,不同于传统的回调函数,它可以更好地控制代码的流程,避免了回调地狱的问题。但是,Promise内部的状态管理、抛出错误和异常处理等方面,需要我们花时间深入学习。 另一方面,Promise使用也需要我们比较好的理解JavaScript的事件循环机制,才能更好理解Promise的实现过程和使用方法。 总而言之,Promise的语义和工作流程需要我们进行较多的学习和掌握,需要一定的时间去理解和熟练使用。但是一旦掌握,它将成为我们进行异步编程的重要工具。
乐乐    : 语法有待优化 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout 关于Promise.catch()错误捕获机制的理解 qq_38751958: 可能作者这里也没有理解清楚 关于Promise.catch()错误捕获机制的理解 qq_38751958: 这里是作者表述的有问题,不会影响外层,是指不会影响外层代码的执行 关于Promise.catch()错误捕获机制的理解 neimingyouyu: 非常感谢整理,但是倒数第二个例子的说明应该有误,try/catch和promise的异常若未被捕获,都会传递到外层的,第4行的catch已经捕获了(即使catch里面不作处理),所以第10行代码不会执行。 关于Promise.catch()错误捕获机制的理解 Cheney9501: