你可能不知道的 Promise

最新推荐文章于 2024-09-30 10:03:03 发布
原创 最新推荐文章于 2024-09-30 10:03:03 发布 · 362 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了 Promise 的相关知识，包括其三种状态及状态改变规则。还详细阐述了 then、catch、finally 等方法，以及 Promise.all()、Promise.race() 等静态方法的功能和使用方式。此外，提到了 Promise.try() 和 Promise 与 Generator 的结合，最后补充了简单实现。

你可能不知道的 Promise

参考

简介

  • Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）
  • 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
  • 一旦状态改变，就不会再变
  • 状态只能 pending->fulfilled/rejected
  • 如果状态改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果

then

  • 接受两个方法参数，第一个参数是 resolved 状态的回调函数，第二个参数（可选）是 rejected 状态的回调函数
  • then 方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）
  • then 方法可以采用链式回调，后一个 then 接收的参数是前一个的返回值
  • 后一个 then 的状态取决于前一个 then 返回的状态
var promise = new Promise((resolve, reject) => {
  reject(1)
})
promise.then(null, data => {
  console.log(data) // 1
})
promise.then(null, data => {
  console.log(data) // 1
})

// 第一个执行的是 rejected，第二个执行的是 resolved
new Promise((resolve, reject) => {
  reject(1)
})
  .then(null, data => {
    console.log(data) // 1
  })
  .then(data => {
    console.log(data) // undefined
  })

new Promise((resolve, reject) => {
  reject(1)
})
  .then(null, data => {
    console.log(data) // 1
    return Promise.reject(data + 1)
  })
  .then(null, data => {
    console.log(data) // 2
  })

catch

  • 指定发生错误时的回调函数
  • rejected 状态或者 then 方法处理数据出错都会触发
  • 拥有 then 的后三种状态
new Promise((resolve, reject) => {
  reject(1)
})
  .catch(data => {
    console.log(data) // 1
    return Promise.reject(data + 1)
  })
  .then(null, data => {
    console.log(data) // 2
  })

new Promise((resolve, reject) => {
  resolve(1)
})
  .catch(data => {
    console.log(data) // 1
  })
  .catch(data => {
    console.log(data) // 不执行
  })

new Promise((resolve, reject) => {
  resolve(1)
})
  .catch(data => {
    console.log(data) // 1
  })
  .then(data => {
    console.log(data) // undefined
  })

finally (ES2018 引入)

  • 指定不管 Promise 对象最后状态如何，都会执行的操作
  • 不接受任何参数
  • finally 方法总是会返回原来的值，也就是在你的链式调用里边加不加它都不会影响原本的流程。在上述代码实例中任何一个位置添加 finally 都不会影响原本的输出
const loading = true
http.get('/xxx').then(
  data => {
    // 处理
    loading = false
  },
  data => {
    // 处理
    loading = false
  }
)

const loading = true
http
  .get('/xxx')
  .then(
    data => {
      // 处理
    },
    data => {
      // 处理
    }
  )
  .finally(() => {
    loading = false
  })

Promise.all()

var p = Promise.all([p1, p2])

  • 将 p1, p2，包装成一个新的 Promise 实例 p
  • 接受一个数组作为参数，参数可以试 Promise，也可以不是。不是的时候会自动转换为 Promise
  • 当 p1, p2 都返回 resolve，p 才会 resolve。p 的接收值是 p1, p2 返回值组成的一个数组
  • 当 p1, p2 其中有一个 reject，p 就会返回 reject。p 的接收值是 p1, p2 中第一个 reject 的返回值

Promise.race()

与 Promise.all 类似，不同的是只要 p1, p2 其中有一个的状态发生变化，p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给 p 的回调函数。

Promise.resolve()

  • 将现有对象转为 Promise 对象
  • 参数是 Promise 实例，那么 Promise.resolve 将不做任何修改、原封不动地返回这个实例
  • 参数是一个 thenable 对象，thenable 对象指的是具有 then 方法的对象。Promise.resolve 方法会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then 方法
  • 如果参数是一个原始值，或者是一个不具有 then 方法的对象，则 Promise.resolve 方法返回一个新的 Promise 对象，状态为 resolved。并且将其接收的参数传递下去
  • 如果没有参数，则 Promise.resolve 方法返回一个新的 Promise 对象，状态为 resolved。

Promise.reject()

  • 返回一个新的 Promise 实例，该实例的状态为 rejected
  • 将接收的参数原封不动地作为后续方法的参数

Promise.try()

  • 不知道或者不想区分，函数 f 是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管 f 是否包含异步操作，都用 then 方法指定下一步流程，用 catch 方法处理 f 抛出的错误。
  • Promise.try 就是模拟 try 代码块，就像 promise.catch 模拟的是 catch 代码块

Promise + Generator

实现类似 async/await 功能，实际上他就是通过这两个结合实现的

const g = function*() {
  const foo = yield new Promise(function(resolve, reject) {
    resolve('foo')
  })
  console.log(foo)
}
function run(generator) {
  const it = generator()
  function go(result) {
    if (result.done) return result.value
    return result.value.then(
      function(value) {
        return go(it.next(value))
      },
      function(error) {
        return go(it.throw(error))
      }
    )
  }
  go(it.next())
}
run(g)

2020-09-01 补充简单的实现

参考链接

function isPromise(o) {
  return o && typeof o.then === "function";
}

function rejectFactory(value) {
  const run = () => {
    if (this.status !== "pending") return;
    this.status = "rejected";
    this.value = value;
    this.rejectedQueue.forEach((rejected) => rejected(this.value));
  };
  setTimeout(run, 0);
}

function resolveFactory(value) {
  const run = () => {
    if (this.status !== "pending") return;
    this.status = "fulfilled";
    this.value = value;
    if (isPromise(value)) {
      this.value.then(
        (v) => this.resolvedQueue.forEach((resolved) => resolved(v)),
        (e) => this.rejectedQueue.forEach((rejected) => rejected(e))
      );
    } else {
      this.resolvedQueue.forEach((resolved) => resolved(this.value));
    }
  };
  setTimeout(run, 0);
}

class P {
  constructor(resolver) {
    this.value = undefined;
    this.status = "pending";
    this.resolvedQueue = [];
    this.rejectedQueue = [];
    try {
      resolver(resolveFactory.bind(this), rejectFactory.bind(this));
    } catch (error) {
      rejectFactory.call(this, error);
    }
  }

  then(onResolve, onReject) {
    if (!onResolve) onResolve = (o) => o;
    if (!onReject) onReject = (o) => P.reject(o);
    return new P((resolve, reject) => {
      function next(type) {
        return (value) => {
          try {
            const ans = (type === 1 ? onResolve : onReject)(value);
            if (isPromise(ans)) {
              ans.then(resolve, reject);
            } else {
              resolve(ans);
            }
          } catch (error) {
            reject(error);
          }
        };
      }
      if (this.status === "pending") {
        this.resolvedQueue.push(next(1));
        this.rejectedQueue.push(next());
      } else if (this.status === "fulfilled") {
        next(1)(this.value);
      } else {
        next()(this.value);
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(onFinally) {
    if (!onFinally) onFinally = () => {};
    if (this.status === "pending") {
      this.resolvedQueue.push(onFinally);
      this.rejectedQueue.push(onFinally);
    } else {
      onFinally();
    }
    return this;
  }

  static resolve(value) {
    return new P((resolve) => resolve(value));
  }

  static reject(value) {
    return new P((resolve, reject) => reject(value));
  }

  static all(iterable) {
    return new Promise((resolve, reject) => {
      let len = iterable.length;
      let values = new Array(len);
      let count = 0;
      if (len === 0) {
        resolve(values);
        return;
      }
      iterable.forEach((item, i) => {
        if (isPromise(item)) {
          item.then(
            (value) => {
              count += 1;
              values[i] = value;
              if (count === len) resolve(values);
            },
            (error) => {
              reject(error);
            }
          );
        } else {
          count += 1;
          values[i] = item;
          if (count === len) resolve(values);
        }
      });
    });
  }

  static race(iterable) {
    return new Promise((resolve, reject) => {
      iterable.forEach((item) => {
        if (isPromise(item)) {
          item.then(
            (value) => resolve(value),
            (error) => reject(error)
          );
        } else {
          resolve(item);
        }
      });
    });
  }

  static any(iterable) {
    return new Promise((resolve, reject) => {
      let len = iterable.length;
      let count = 0;
      if (len === 0) {
        reject("AggregateError: All promises were rejected");
        return;
      }
      iterable.forEach((item, i) => {
        if (isPromise(item)) {
          item.then(
            (value) => {
              resolve(value);
            },
            () => {
              count += 1;
              if (count === len) {
                reject("AggregateError: All promises were rejected");
              }
            }
          );
        } else {
          resolve(item);
        }
      });
    });
  }

  static allSettled(iterable) {
    return new Promise((resolve) => {
      let len = iterable.length;
      let count = 0;
      let values = new Array(len);
      if (len === 0) {
        resolve(values);
        return;
      }
      iterable.forEach((item, i) => {
        if (isPromise(item)) {
          item.then(
            (value) => {
              count += 1;
              values[i] = {
                status: "fulfilled",
                value,
              };
              if (count === len) resolve(values);
            },
            (reason) => {
              count += 1;
              values[i] = {
                status: "rejected",
                reason,
              };
              if (count === len) resolve(values);
            }
          );
        } else {
          count += 1;
          values[i] = {
            status: "fulfilled",
            value: item,
          };
          if (count === len) resolve(values);
        }
      });
    });
  }
}
你不知道的JavaScript----promise
每天都要努力学习哦~~
11-19 609
通过如下场景来阐述：我到快餐店的柜台，点了一个芝士汉堡。通过下订单并付款，我已经发出了一个对某个值（芝士汉堡）的请求。我已经启动了一次交易。但是，通常我不能马上就得到这个汉堡。收银员会交给我某个东西来代替汉堡：一张带有订单号的收据。收据就是一个IOU（I owe you，我欠你的）承诺（promise），保证了最终我会得到我的汉堡。所以我得好好保留我的收据，我知道这代表了我未来的汉堡，所以不需要担心， 只是现在我还是很饿！
Promise ? 我 promise 你一个详细的手撕过程
Mr_wyt的博客
08-14 388
Promise的手写过程不是很难，大家自己动手理清思路和重要，下面是我手写Promise的源码，就实现了一些常用Promise的方法,所有的测试都能跑通,XDM放心食用,更详细的讲解放在最后了！
promise系列之finally方法
photobooth的博客
05-11 3261
promise的finally方法特点介绍，以及相关的测试代码
彻底掌握 Promise - 原生 Promise.finally 的实现(六)
记得抬头微笑
04-22 3816
目录前言一、finally的使用方法具体使用方法执行结果二、实现原理三、具体实现总结 前言 在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.youkuaiyun.com/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法，下面这篇文章，主要讲述 Promise.finally 方法的实现。 finally()方法返回一个Promise。在promise结束时，无论结果是
【ES9系列】Promise.finally()
webFrontEndDev的博客
11-19 718
Promise.prototype.finally() Promise.prototype.finally() 方法返回一个Promise，在promise执行结束时，无论结果是fulfilled或者是rejected，在执行then()和catch()后，都会执行finally指定的回调函数。这为指定执行完promise后，无论结果是fulfilled还是rejected都需要执行的代码提供了...
深度解读Promise.prototype.finally
u012443286的博客
08-22 1074
由一个问题引发的血案：手写源码实现Promise.prototype.finally。我们知道，对于promise来讲，当状态敲定，无论状态兑现或拒绝时都需要调用的函数，可以使用Promise.prototype.finally的回调来实现。那么如何手写实现Promise.prototype.finally呢？问题恐怕并不很简单，本文主要做finally的细节和实现做一些详细的解读。
Promise-详解
qq_48109675的博客
09-19 3249
是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度
你知道promise吗
最新发布
02-27
嗯，用户问的是“你知道promise吗”，我需要先确认他们的背景。可能他们是在学习JavaScript的异步编程，遇到了回调地狱的问题，所以想了解Promise。或者他们可能对Promise的概念不太清楚，需要基础解释。 首先，我...
《你不知道的JavaScript》.pdf
10-11
《你不知道的JavaScript》系列是一套专注于深入探讨JavaScript语言内部原理和机制的丛书。本书的宗旨是帮助那些仅仅满足于表层使用的JavaScript开发者，深化理解JavaScript这一广泛使用的前端技术。在这一系列中，...
JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
01-20
JavaScript是Web开发中不可或缺的一部分，它负责为网页添加交互性和动态功能。JavaScript引擎是这个过程的核心，它解析和执行代码，使我们的脚本能够运行。本文将深入探讨JavaScript引擎的工作原理，特别是调用栈和...
关于Promise中finally的用法
lee_uncle的博客
02-07 5143
平常在工作中经常会遇到一些加载loading的需求，一般都在请求前设置loading展示，请求完成后关闭loading，刚开始我下意识把关闭loading放到then方法里面去处理，发现如果请求出现错误的情况，页面loading是还在的，就需要在catch方法里重写一遍导致代码重复，后面才了解到finally方法可以处理Promise的then和catch方法中代码重复的功能。Promise对象的finally()方法用于在Promise成功或拒绝时使用。
精进 JavaScript ｜ 这些手写你都会吗 ？
小王的技术库
10-13 3037
不知道今年大家有没有感受到来自互联网的“寒气”，至少我是感受到了，面试的时候手写代码时很常见很常见的事情了。有时候没遇到过还真一时半会写不出来，企业招聘的要求也是越来越高，尤其是一些大厂会对 JS 的功底有着更加苛刻的要求，所以学会手写常见的 JS 模块好像已经快变为一个基本技能了，也慢慢变为我们手写 webpack 手写 mini-vue 的一个coding基础 了。当然我们也不完全是为了去准备面试而去学习这些常见模块。死磕这些难啃的骨头之后，你会从中学到很多优秀的思想，对你的职业生涯也是很有帮助的。
generator函数+yield+Promise搭配使用（顺带回顾react框架的dva）
会点php的前端小渣渣
12-17 1466
写react代码、或者写 dva.js框架的时候，经常会用到generator函数（经过封装 call、put） 主要很久没写generator函数和react了，特此回顾下。 /* 1.先定义一个generator函数 + 搭配 Promise语法。 2.再使用yield 返回出Promise 3.由于使用fn(5).next().value接收的是个Promise，所以就可以使用then了 4.react 里面的yelid 看不到.next().value 这种，说明被封装过了 */ ...
Promise 原型方法Promise.prototype.finally()
陈开心的博客
11-12 2084
finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式，避免了同样的语句需要在then()和catch()中各写一次的情况。 语法 p.finally(onFinally); p.finally(function() { // set...
Promise多个请求、finally、链式调用学习
黄彪博客
06-24 2296
文章目录文章参考基本语法捕获异常处理链式调用promise的finally方法应用场景异步应用场景使用说明两个请求没有必然关系，各自执行回调即可两个请求有先后顺序，一定要先请求One之后再用Two多个请求都成功，但是请求之间没有关系多个请求只需要一个成功就做逻辑处理axios多个异步请求全部成功之后处理的业务请求封装使用案例 文章参考 阮一峰 ES6 promise vue实力封装axios 基本语法 早期浏览器兼容：Promise对象是ES6的内容，我们可以使用babel做一个转换，基本语法如下：
Promise 的 finally 怎么实现的？
csdn_Levy的博客
09-30 534
finally()方法接受一个函数作为参数，这个函数不接收任何参数，也就是说，你不能在finally()的回调函数中直接获取到Promise的结果。finally()返回的是一个Promise，这个Promise在原始Promise解析完成后才会解析，并且它解析为原始Promise的值。在规范中，Promise的finally()方法是这样实现的：它创建了一个函数，这个函数接收一个值，然后返回一个Promise.resolve(value)。在这个例子中，我们创建了一个Promise。
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
热门推荐
程邓楠的博客
11-17 5万+
前言： 定期复盘---今天我们来复习一下 Promise 的几个方法，分别是：Promise.resolve、Promise.reject、Promise.then、Promise.catch、Promise.finally、Promise.all、Promise.allSettled、Promise.race、Promise.any； 接下来我们一起去看看吧，从深处去了解他们有什么区别！！！
【JS】881- 我终于弄懂了Promise
pingan8787
02-26 324
转自：掘金 -前端布吉岛https://juejin.cn/post/6921593620680802311写在前面以前总是似懂非懂，这次总算把它弄了个清楚什么是PromiseES6 异...
promise异步 await 事件循环 微任务
MOEIAW的博客
08-16 588
同步异步是一种消息通知机制 同步理解成阻塞，异步理解成非阻塞，但不绝对 同步异步针对与图书管理员，异步会有回调函数或者返回值通知 阻塞非阻塞针对小明，非阻塞不会等待，会去做其他事 同步 alert（）会阻塞其他打印 异步 setTimeout函数、递归 解决 打印222在setTimeout之后的问题 function fn（cb）{ setTimeout（（）=>{ console.log("111"); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值