ES6中Promise的原型方法、静态方法和使用、应用方法

已于 2022-05-11 22:56:24 修改
阅读量1k 收藏 6
点赞数 1
分类专栏： ES6 javascript 文章标签： javascript es6
于 2022-05-11 15:55:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124711158
版权
javascript 同时被 2 个专栏收录
122 篇文章 11 订阅
订阅专栏
ES6
28 篇文章 2 订阅
订阅专栏

目录

Promise

介绍

实例化

原型方法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

静态方法

Promise.all([p1,p2])

Promise.race([p1,p2])

Promise.any([p1,p2])

Promise.resolve()

Promise.reject()

应用

Promise

引子：

// 分析ajax 
$.ajax({
  url: '',
  method: '',
  data: {},
  success(res){
    console.log(1);
  },
  error(error){
    console.log(2);
  }
})
console.log(3);
// 这里面 3 最有可能是先被打印出来的 然后再打印出1 或 2 因为ajax是一个
//异步操作 js是自上而下运行的 所以ajax先执行网络强求（延时操作） 并不会阻
//拦js的执行 js继续往下执行 等ajax执行完毕后 才会输出1或2

 AJAX默认是异步请求

根据真实项目案例，来说明传统异步编程的情况，和使用Promise编程的特点

 //伪代码:传统解决方案
//获取年级，获取年级之后获取第一个年级的班级
  $.ajax({
    url:'XXX/grade',
    method:'get',
    data:{},
    success(res){
      //res.data 就是年级数组
      $.ajax({
        url:'XXX/clazz',
        method:'get',
        data:{gradeId:res.data[0].id},
        success(res){
          //res.data 就是班级数组    
        // 根据班级id 获取某一个同学的数据
        // 我们现在仅仅是请求两个数据 还没有做 节点插入 数据处理 就需要嵌套这么多代码 如果再根据班级id或获取学生信息呢？ 套娃结构  不推荐使用  不易阅读 不易修改
          ......
          $.ajax({})
        },
        error(err){}
      }); 
    },
    error(err){}
  });
//以上代码需要回调嵌套，不能并列去写，否则是对空值进行操作
// 为了解决这种问题 ES6给我们提供了几个异步编程的解决方案
// Promise 最基础的 掌握
// Generator 函数 高级 以Promise为基础 了解
// async函数 更高级的 以Promise为基础 了解

// 在vue中 我们会使用一个基于promise的网络工具 axios 内部封装了promise和http 

// async 异步操作 直接使用这个关键字就可以了 await 等一等 等待这个网络请求执行完毕后把结果返回给res 下面我们就可以拿到之前的数据进行操作了
async function test(){
    let res1 = await axios.get('xxxx/grade');//年级数据
    let res2 = await axios.get('xxxx/clazz',{params:{gradeId:res1.data[0].id}});
    let res3 = await axios.get('xxxx/student',{params:{clazzId:res2.data[0].id}});
  }
  test();

介绍

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

实例化

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供。Promise对象代表一个异步操作有三种状态： pending（进行中）、fulfilled（已成功）和rejected（已失败）。状态发生改变之后就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

const promise = new Promise(function(resolve, reject) { 
  // ... some code
  if (/* 异步操作成功 */){ 
		resolve(value);  
		// pending -> fulfilled
  } else { 
		reject(error);  
		// pending -> rejected
  } 
});

原型方法

定义在Promise.prototype中的方法，通过Promise实例可以直接调用。

Promise.prototype.then()

当状态由pending变为fulfilled的时候执行该回调函数， 参数：    最多需要有两个参数，Promise 的成功和失败情况的回调函数。 返回值：    返回一个新的Promise实例对象，因此可以使用链式调用。

当一个 Promise 完成（fulfilled）或者失败（rejected）时，返回函数将被异步调用（由当前的线程循环来调度完成）。具体的返回值依据以下规则返回。如果 then 中的回调函数：

  1. 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

  2. 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。

  3. 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

  4. 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

  5. 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

  6. 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

let p1 = new Promise((resolve, reject) => {
	resolve('成功！');
	// or
	// reject(new Error("出错了！"));
});

p1.then(value => {
	console.log(value); // 成功！
}, error => {
	console.log(error); // 出错了！
});

Promise.prototype.catch()

当状态由pending变为rejected的时候执行该回调函数，

参数：    

回调函数，回调函数的参数为reject函数传递过来的值

返回值：    

返回一个新的Promise实例对象，因此可以使用链式调用。

/ 抛出一个错误，大多数时候将调用catch方法
let p1 = new Promise(function(resolve, reject) {
	throw 'Uh-oh!';
});

p1.catch(function(e) {
	console.log(e); // "Uh-oh!"
});

推荐使用catch方法，不要在then方法中定义rejected状态的回调函数；这是因为使用catch还可以捕获在then方法执行中存在的错误。

 // bad
promise.then(function(data) {
    // success
  }, function(err) {
    // error
  });


// good
promise.then(function(data) { 
    // success
  })
  .catch(function(err) {
    // error
  })

Promise.prototype.finally()

finally() 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在then()和catch()中各写一次的情况。

参数：    

回调函数，不接收任何参数

返回值：    

返回一个新的Promise实例对象

let p1 = new Promise(function(resolve, reject) {
	throw 'Uh-oh!';
});
p1.catch(function(e) {
	console.log(e); // "Uh-oh!"
}).finally(function() { 
	console.log('这段代码最终都会执行'); 
});

静态方法

定义在Promise中的方法，通过Promise可以直接调用。

Promise.all([p1,p2])

Promise.all用于将多个 Promise 实例，包装成一个新的 Promise 实例， 参数：    数组，数组中的元素为Promise实例 返回值：    Promise实例,当p1,p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；只要p1，p2的返回值有一个变为rejected，该实例状态为rejected。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
	console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.race([p1,p2])

Promise.race用于将多个 Promise 实例，包装成一个新的 Promise 实例， 参数：    数组，数组中的元素为Promise实例 返回值：    Promise实例,当p1，p2之中有一个实例率先改变状态，该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给该实例的回调函数。

const promise1 = new Promise((resolve, reject) => {
		setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
	console.log(value);
	// Both resolve, but promise2 is faster
});
// expected output: "two"

Promise.any([p1,p2])

用于将多个 Promise 实例，包装成一个新的 Promise 实例 参数：    数组，数组中的元素为Promise实例 返回值：    Promise实例,只要p1,p2状态有一个变为fulfilled，该实例的状态为fulfilled；p1，p2状态都变为rejected，该实例状态才为rejected。

const pErr = new Promise((resolve, reject) => {
	reject("总是失败");
});

const pSlow = new Promise((resolve, reject) => {
	setTimeout(resolve, 500, "最终完成");
});

const pFast = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, "很快完成");
});

Promise.any([pErr, pSlow, pFast]).then((value) => {
	console.log(value);
	// pFast fulfils first
})
// expected output: "很快完成"

Promise.resolve()

用于将现有对象转化为Promise实例 参数：任意值

参数：    任意值

const promise1 = Promise.resolve(123);
promise1.then((value) => {
	console.log(value);
	// expected output: 123
});

Promise.reject()

返回一个新的 Promise 实例，该实例的状态为rejected

参数：    错误信息

Promise.reject(new Error('fail')).then(function() {
	// not called
}, function(error) {
	console.log(error); // Stacktrace
});

应用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var baseUrl = "http://47.106.244.1:8099"
    let p1 = new Promise((resolve, reject) => {
      /* $.get('http://47.106.244.1:8099/manager/category/findAllCategory',); */
      $.ajax({
        url: baseUrl+'/manager/category/findAllCategory',
        success(res) {
          resolve(res);
        },
        error(err) {
          reject(err);
        }
      })
    })
    p1.then((res) => {
      console.log(res);
      // 对res操作
    }).catch((err) => {
      console.log(err);
    })

  </script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise封装</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var baseUrl = "http://47.106.244.1:8099"
    // 封装工厂函数
    function getPromise(url, method = "get", data = null) {
      return new Promise((resolve, reject) => {
        $.ajax({
          url,
          method,
          data,
          success(res) {
            resolve(res);
          },
          error(err) {
            reject(err);
          }
        })
      });
    }
    let p1 = getPromise(baseUrl+'/manager/category/findAllCategory');
    let p2 = getPromise(baseUrl+'/manager/user/findAllUser');

    /* p1.then((res) => {
      console.log(res, '---');
    })
    p2.then((res) => {
      console.log(res, '+++')
    }) */
    // all  都成功就成功，有一个失败就失败
    // race 谁快用谁的结果
    // any 有成功就成功的，如果都失败就失败
    let p = Promise.any([p1, p2]);
    p.then((res) => {
      console.log(res, '++++');
    }).catch((err) => {
      console.log(err, '----');
    })
  </script>
</head>
<body>
</body>
</html>

The..Fuir
关注
专栏目录
Promise的原理、实例方法、原型/静态方法
qq_57334853的博客
08-03 348
传统异步编程的解决方案是使用回调函数、但是这样会导致嵌套过深，产生回调地狱（callback hell）、那么Promise异步编程就是另一种解决方案而且更加强大 三个状态： 等待/待定（pending） 成功/以兑现（fulfilled） 失败/已拒绝（rejected） 原理： new Promise((resolve，reject) => {})，参数是一个回调函数，回调函数中的这两个参数也都是回调函数 等待状态的 Promise 对象要么会通过一个值被...
Promise对象原型及Promise中的方法。
莉莉小仙女
04-13 1410
Promise对象Promise对象语法Promise 原型Promise原型中的属性Promise原型中的方法Promise基本方法Promise.all()Promise.race()Promise.resolve()Promise.reject() Promise对象 Promise对象用于表示一个异步操作的最终完成 (或失败), 及其结果值. 有了promise对象，可以将异步操作以同步的...
promise用法_图解 Promise 实现原理（三）：Promise 原型方法实现
weixin_39892447的博客
11-27 392
作者：Morrain转发链接：https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw前言Promise 是异步编程的一种解决方案，它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的 ES6入门 之 Promise 对象。很多同学在学习 Promise 时，知其然...
promise用法_图解 Promise 实现原理（三）—— Promise 原型方法实现
weixin_39929635的博客
12-06 167
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw作者：MorrainPromise 是异步编程的一种解决方案，它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的 ES6入门 之 Promise 对象。很...
Promise 原型方法Promise.prototype.then()
陈开心的博客
11-11 1338
then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。 语法 p.then(onFulfilled[, onRejected]); p.then(value => { // fulfillment }, reason => { // rejection }); 参数： onFulfilled |可选。是一个函数，当 ...
ES6 | Promise + Set + Map + class类 + 数值扩展 + 对象方法扩展 + 模块化
不爱吃菜的菜菜的博客
06-19 395
是 ES6 引入的异步编程的新解决方案。(解决回调地狱） 所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说， 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 用Promise读取文件 Promise 封装Ajax Promise-then方法 Promise实践-读取多个文件 Promise-catch方法 方法是.then(null, rejection)或.
自己使用ES6 class类，手写一个Promise类，实现原型方法then/catch/finally，实现静态方法resolve/reject/all/race。
青山不改，绿水长流。
08-28 241
好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。青山不改 绿水长流 我们下篇文章见😋。
promise的实例方法、静态方法
weixin_43183219的博客
04-21 3608
promise概述、三种状态和特点；promise的三个实例方法六个静态方法详细介绍；promise的语法糖
实现Promise的原型方法--前端面试能力提升
helloworld1024fd的博客
09-30 489
有如下： 原型方法：then、catch、finally静态方法：resolve、reject、race、all、allSettled、any Promise.resolve(value) 将给定的一个值转为Promise对象。 const p=Promise.reject(‘error’) 相当于下方函数: const p=new Promise(reject=>{ reject(‘11111’) })Promise.reject()方法返回一个带有拒绝原因的Promise对象。 catch() 方法返
ES6中的promise
m0_64137559的博客
04-22 447
promise 含义 : Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现的，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作） 的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点。 （1）
ES6——对象新的方法(原型)
weixin_54362381的博客
06-22 377
对象新的方法(原型) 1、proto 指向原型对象，编码时性能较低下 console.log({a: 1});//打印出来的__proto__就是Object原型 2、Object.setPrototypeOf( 要修改的对象，想作为新的原型的对象) 修改对象的原型对象, const obj1 = { a: 1 }; const obj2 = { b: 1 } const obj = Object.create(obj1);//创建obj对象指定原型为obj1 console.log(obj.__pr
Promise对象及相关实例方法介绍
yangyang_A的博客
05-21 1526
文章目录Promise 对象1.0 Promise 的含义2.0 基本用法3.0 Promise.prototype.then()4.0 Promise.prototype.catch()5.0 Promise.prototype.finally()6.0 Promise.all()7.0 Promise.race()8.0 Promise.resolve()9.0 Promise.rejected()总结: Promise 对象 1.0 Promise 的含义 Promise 是一步编程的一种解决方案,
图解 Promise 实现原理（三）—— Promise 原型方法实现
vivo互联网技术
05-18 712
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/u8wuBwLpczkWCHx9TDt4Nw 作者：Morrain Promise 是异步编程的一种解决方案，它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。更多关于 Promise 的介绍请参考阮一峰老师的ES6入门 之 Promise 对象。 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深...
Promise对象的几种方法
Judy_qiudie
09-24 5311
Promise，就是一个对象，用来传递异步操作的信息。 1、Promise对象有两个特点： 一是对象的状态不受外界影响，有3种状态：Pending（进行中）、Resolved(已完成，又称Fulfilled)和Rejectd（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态； 二是一旦状态改变（从Pending变为Rsolved和从Pending变为Rej...
ES6中关于数组原型方法的扩展
weixin_39535289的博客
07-04 654
本文只是限于自己的理解，可能也有很多不足或者不正确的地方，希望大家多多指正~1.copyWithin(index,index1,index2);从原数组中读取内容，替换数组中指定位置的内容参数：index：从index索引开始替换           index1：替换的内容从index1开始           index2：替换的内容从index2结束但不包括index2（数组中涉及到的索引范...
深度理解Promise(01)--Promise的特点和方法详解
JCat的博客
08-09 1412
什么是promise？ 所谓Promise（承诺），在程序中的意思就是承诺我过一段时间（通常是一个异步操作）后会给你一个结果，是异步编程的一种解决方案。从语法上说，原生Promise 是一个对象，从它可以获取异步操作的消息，ES6 规定，Promise对象又是一个构造函数，是用来生成Promise实例。 promise的特点 （1）对象的状态不受外界影响 promise有三种状态 pending...
【JavaScript进阶之旅 ES6篇 第十章】操作原型的方法、super、4种遍历方式、Symbol
马云
06-30 469
1、person.proto = {} 不推荐这样修改 原因： 第一个参数为：有包装类的原始值，不会有任何效果，只会将第一个参数进行包装类包装后返回 同理，string跟boolean也会失效： 第一个参数为：没有包装类的原始值undefined或null会报错 Object.getPrototypeOf() 读取操作 Object.create(obj) 生成操作 二、Object.keys()|.values()|.entries() Object.keys()Object.
ES6学习——类语法：继承中的原型链
Challenge Next Challenge
01-11 3092
上篇文章中我们讲了些类的基本概念，其中提到ES6中的类语法是对原型继承的一种封装。JS的原型继承一共有两条原型链，显示和隐式，那么在类继承的语法中，这两条原型链又是怎么样的呢？ 继续使用上篇文章中的例子： class Point{...} class ColorPoint extends Point{...} var p = new Point(...),cp = new ColorPoi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值