（14）es6——promise

已于 2022-04-26 00:14:58 修改
阅读量746 收藏 1
点赞数
分类专栏： # es6+新特性 文章标签： es6 基础
于 2022-04-24 15:02:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44242181/article/details/124382494
版权

文章结构

promise构造函数

基本使用

Promise构造函数接收一个函数，这个函数是同步执行的，
当这个Promise构造函数被调用时，传入的函数中的代码
是一个同步代码，而不是js的异步任务。
这个函数接收两个参数（他们两都是函数）

const p = new Promise((resolve, reject) => {
  console.log("执行1");
  resolve("成功");
});
console.log("执行2");
console.log(p);

Promise的工作流程

在这里插入图片描述
在这里插入图片描述

我们发现"执行1"，"执行2"按照正常的书写顺序输出了。说明Promise构造函数的参数函数中
代码是同步代码。

Promise的状态

pending（进行中）
fulfilled（已成功）
rejected（已失败）

Promise.resolve()

resolve()传入一个promise对象，那么返回值是一个promise对象，状态和值由
“传入的promise对象”决定。
传入一个非promise对象，返回值是一个promise对象，状态永远为已完成，
值为传入的值。

const p1 = Promise.resolve(521);
const p2 = Promise.resolve(new Promise((resolve,reject)=>{
  		resolve('成功');
}));
// 传入一个错误，p3的状态还是成功
const p3 = Promise.resolve(new Error('错误'));
const p4 = Promise.resolve(new Promise((resolve,reject)=>{
	reject('失败');
}))
console.log(p1);
console.log(p2);
console.log(p3);
console.log(p4);

在这里插入图片描述

Promise.reject()

reject()传入一个promise对象，那么返回值是一个promise对象，
状态永远为失败，值是传入的promise对象
传入一个非promise对象，返回值是一个失败的promise对象，
状态永远为失败，值为传入的值

const p1 = Promise.reject(521);
const p2 = Promise.reject(new Promise((resolve,reject)=>{
   resolve('成功');
 }))
const p3 = Promise.reject(new Promise((resolve,reject)=> {
	reject('失败');
}))
console.log(p1);
console.log(p2); 
console.log(p3);

在这里插入图片描述

Promise.all()

接收多个promise对象组成的数组。
只有当所有的promise对象的状态都为已完成，返回的promise对象的状态才为已完成。
当状态为已完成时，值为各个promise对象的值组成的数组。
当状态为已失败时，值为第一个失败的promise对象的值。

const p = Promise.all([
  new Promise((resolve, reject) => {
    resolve("成功1");
  }),
  new Promise((resolve, reject) => {
    resolve("成功2");
  }),
  new Promise((resolve, reject) => {
    reject("失败1");
  }),
  new Promise((resolve,reject)=>{
    reject("失败2")
  })
]);
console.log(p);

在这里插入图片描述

Promise.race()

race（竞速的意思）顾名思义：接收promise对象组成的数组，值和状态由第一个返回值和状态的promise对象决定。

const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
  console.log("成功1");
  resolve("成功1");
  }, 2000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
  console.log("失败");
  reject("err");
  }, 1000);
});
let p = Promise.race([p1, p2]);
setTimeout(() => {
  console.log(p);
}, 1000);

在这里插入图片描述

Promise.prototype.then/catch()/finally()

const p = new Promise((resolve,reject) => {
  // resolve('成功')
  reject('失败')
}).then((value)=>{
  console.log(value); // '成功'
}).catch((err)=>{
  console.log(err); // '失败'
}).finally(()=>{
  // 不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数
  console.log("不管promise的状态，我永远会输出");
})

es11新增Promise.allSettled()

const p1 = new Promise(function(resolve, reject) {
	setTimeout(function() {
		resolve('p1成功');
	}, 1000)
})

const p2 = new Promise(function(resolve, reject) {
	setTimeout(function() {
		reject('p2失败');
	}, 1000)
})

// 返回一个promise对象，状态属性永远是fulfilled完成,值属性的值是一个数组，数组每一项是每个promise对象的状态和值对象
const result1 = Promise.allSettled([p1, p2]);

// 相似方法all,也是返回一个promise对象，状态由传入的promise对象决定，都为完成时,返回的promise对象的状态才为完成,值为一个数组，数组每一项是每个promise对象的值。有失败的话，状态为失败，值为第一个失败的promise的值。
const result2 = Promise.all([p1,p2]);
console.log(result1);
console.log(result2);

在这里插入图片描述

在这里插入图片描述

Promise的注意事项

Promise.then()方法的返回值由谁决定

then方法可以只写第一个参数，也就是状态为已完成时调用的函数
then()方法返回一个promise对象，这样就可以进行链式调用了，解决回调地狱

const p = new Promise(function(resolve,reject){
setTimeout(function(){
	let data = '用户数据';
	resolve(data);
},1000)
})
const result = p.then(function(value){
// 1、默认return 返回一个 undefined，状态为已完成，值为undefined
console.log(value);
// 2、return的值不是一个promise对象时,状态为已完成，值为return的值
// return 123
// 3、throw抛出一个结果，状态为拒绝，值为抛出的值
// throw '123'
// 4、抛出一个error错误对象，状态为拒绝，值为抛出的error对象
// throw new Error('123');
// 5、return一个promise对象，状态为下一级promise对象的状态，值也是下一级promise的值
return new Promise(function(resolve,reject){
	// promise封装异步操作，也可以执行同步代码
	// resolve('123');
	reject('123');
})
})
console.log(result);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

promise怎么串联调用多个同步异步任务

let p1 = new Promise((resolve, reject) => {
    resolve("p1成功");
});

let p2 = p1.then((value) => {
    return new Promise((resolve, reject) => {
            console.log(value); // p1成功
            resolve("p2成功");
        })
        .then((value) => {
            console.log(value); // p2成功
            // return {PromiseState:fulfilled,PromiseResult:undefined}
        })
        .then((value) => {
            console.log(value); //undefined,因为上一个then默认return了一个{PromiseState:fulfilled,PromiseResult:undefined}
        });
});

在这里插入图片描述

promise的异常穿透

在then链式调用的时候在最后指定错误的回调,不管是链式调用的哪个环节失败了，
都只需要在最后指定失败的回调即可

let p1 = new Promise((resolve, reject) => {
        resolve("成功");
    })
    .then(value => {
        return new Promise((resolve, reject) => {
            reject("err1");
        });
    })
    // 因为上一个then已失败，故不会继续执行后面的then。
    .then(value => {
        return new Promise((resolve, reject) => {
            reject("err2");
        });
    })
    .catch(err => {
        console.log(err); // err1
    });

在这里插入图片描述

一个promise怎么指定多个成功或者失败的回调函数

const p = new Promise((resolve, reject) => {
    resolve("ok");
});
p.then((value) => {
    console.log(value);
});
p.then((value) => {
    console.log(value + "2");
});

在这里插入图片描述

先改变状态还是先执行回调

当执行器中是同步任务的时候，先改变状态后执行回调

const p = new Promise((resolve, reject) => {
  resolve("OK");
});
p.then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
console.log(p);

在这里插入图片描述

当执行器中是异步任务的时候，先执行回调后改变状态。
当p.then()需要异步操作更长的时间的，先改变状态后执行回调。

const p = new Promise((resolve, reject) => {
// 当执行器中是异步任务的时候，先执行回调后改变状态。
  setTimeout(()=>{
    resolve("OK");
  },1000)
});
p.then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
setInterval(()=>{
  console.log(p);
},10)

在这里插入图片描述

可以改变promise状态的方法

1、resolve
2、reject
3、throw

const p = new Promise((resolve,reject)=>{
  // 1.resolve 成功
  // resolve('OK');
  // 2.reject 失败
  // reject('err');
  // 3.throw 失败
  throw 123;
})
console.log(p);

在这里插入图片描述

如何中断链式调用链

打断链式调用的唯一方式，返回一个pedding状态的promise对象，也就是未有修改promise
状态代码的Promise对象

let p = new Promise((resolve, reject) => {
  resolve('成功')
}).then(value=>{
  console.log(value); // 成功
}).then(value=>{
  console.log(value); // undefined，前一个then默认返回
  // 在这。。。
  return new Promise((resolve,reject)=>{}) // 在这打断
}).then(value=>{
  console.log(value); // 前面被打断了，不会被调用
  console.log('调用到我这来了吗？'); // 前面被打断了，不会被调用
})

在这里插入图片描述

promise会开启一个微任务

具体解析可以看js专栏的中宏任务与微任务，并为大家讲解一道面试题帮助大家理解。

Promise的使用场景

promise链式调用解决回调地狱

const fs = require('fs');
// 回调地狱，读取文件，获取读取数据库中的数据有先后顺序时
// fs.readFile('./files/文件1.md',function(err1,data1){
// 	fs.readFile('./files/文件2.md',function(err2,data2){
// 		fs.readFile('./files/文件3.md',function(err3,data3){
// 			let result = data1 + data2 + data3;
// 			console.log(result);
// 		})
// 	})
// })

// 使用promise封装
const p = new Promise(function(resolve,reject){
	fs.readFile('./files/文件1.md',function(err,data){
		resolve(data);
	})
}).then(function(value){
	return new Promise(function(resolve,reject){
		fs.readFile('./files/文件2.md',function(err,data){
			resolve([value,data]);
		})
	})
}).then(function(value){
	return new Promise(function(resolve,reject){
		fs.readFile('./files/文件3.md',function(err,data){
			value.push(data);
			let result = value.join(';');
			console.log(result);
		})
	})
})

使用promise封装读取文件

const fs = require('fs');

// 不使用promise封装
// fs.readFile('./files/文件1.md',function(err,data){
// 	if(err) throw err;
// 	// buffer转字符
// 	console.log(data.toString());
// })

// 使用promise封装
const p = new Promise(function(resolve,reject){
	fs.readFile('./files/文件1.md',function(err,data){
		// reject和resolve方法都有终止代码向下执行的功能
		if(err) reject(err);
		resolve(data)
	})
})

p.then(function(value){
	console.log(value.toString());
},function(reason){
	console.log(reason);
})

使用promise封装ajax请求

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        function a() {
            return new Promise(function(resolve, reject) {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", "https://api.apiopen.top/getJoke");
                xhr.send();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                            console.log(xhr.response);
                        } else {
                            reject(xhr.status);
                        }
                    }
                };
            });
        }
        a().then(
            function(value) {
                console.log(value);
            },
            function(reason) {
                console.error(reason);
            }
        );
    </script>
</body>

</html>

在这里插入图片描述

axios

前端与后端通信最常见的axios也是基于promise封装的。
有时间也是准备为大家更新博客怎么手写promise和axios。
LiuJie_Boom
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
es6-Promise
boss2967的博客
01-25 777
1.Promise对象的简单介绍 function want() { console.log('这是你想要执行的代码'); } function fn(want) { console.log('这里表示执行了一大堆各种代码'); // 返回Promise对象 return new Promise(function(resolve, reject) { ...
前端开源库-es6-promise-pool
08-29
**前端开源库——ES6 Promise Pool** 在现代前端开发中，异步操作是不可或缺的一部分，Promise作为JavaScript中处理异步操作的重要工具，极大地改善了代码的可读性和可维护性。然而，当需要同时处理大量异步任务时...
can't resolve 'core-js/modules/es6.promise' webpack编译es6报错
PromiseCao的博客
04-30 1万+
webpack配置es6编译时引入polyfill去兼容es6的方法，结果遇到无法编译的情况，如下图 啥玩意儿？polyfill一直用得好好的怎么就出问题了？ 赶紧去墙外找了下，最后发现是最近corejs更新了，我安装的是最新版3.x的版本。而新版本已经废弃了polyfill， 取而代之的是需要引入core-js/stable 和regenerator-runtime/runtime...
es6新增-Promise详解(异步编程的解决方案1)
m0_65912225的博客
08-02 996
Promise实例的状态 (!important) 1.每个Promise实例有三种状态，分别是 pending(进行中)，fulfilled(已成功)，rejected(已失败) 创建时候的默认状态是pending，只有异步操作的结果，可以决定当前是哪一种状态，任何操作都无法改变这个状态。这也是Promise名字的由来。 2.一旦状态改变(确定)，就不会再变了，Promise对象的状态改变，只有两种可能： a.从pending变为fulfilled b.从penging变为rej......
推荐使用：ES6-Promise —— 轻量级的Promise库
最新发布
gitblog_00028的博客
05-11 281
推荐使用：ES6-Promise —— 轻量级的Promise库 项目地址:https://gitcode.com/stefanpenner/es6-promise 1、项目介绍 ES6-Promise 是一个对ECMAScript 6规范中Promise实现的轻量级库，它是来自rsvp.js的一个子集。这个库提供了基本的Promise功能，并且易于集成到你的项目中。如果你需要额外的功能和更详尽的...
es6-promise.auto.js
weixin_34417183的博客
12-20 1449
使用sweetalert2的IE浏览器报错，导入文件 链接：https://pan.baidu.com/s/1mOcsN_o8m-7I7Rej1NPkiw 提取码：9xsj 转载于:https://www.cnblogs.com/czz-hl/p/10150237.html
js加密解决方案1：在AutoJS中实现Promise的必要性、好处与缺点
mxd01848的博客
08-14 478
AutoJS的加密代码限制了我们在脚本中直接使用ES6新特性，这可能会限制脚本的灵活性和功能。AutoJS的加密代码限制了我们在脚本中直接使用ES6新特性，这可能会限制脚本的灵活性和功能。然而，它的加密代码只支持ES5语法，不支持许多ES6的新特性，如Promise等功能。这个自定义的Promise简单地模拟了ES6 Promise的功能，使我们能够在ES5环境中使用类似的异步编程方式。这样，我们可以在AutoJS中编写更加高效、清晰的自动化脚本，提高脚本的可读性和可维护性。
ES6 Promise对象的应用实例分析
10-16
在Promise对象的构造函数中，我们传入一个执行器函数，该函数接收两个参数——resolve和reject。这两个函数是Promise对象提供的，它们用于改变Promise的状态。当异步操作成功时调用resolve，传递结果值；当异步操作...
前端项目-es6-promise.zip
09-02
一旦状态由pending变为fulfilled或rejected，就不会再改变，这就是Promise的核心特性——不可变性。 **创建Promise** 创建Promise有两种方式：使用构造函数`new Promise()`和使用静态方法`Promise.resolve()`和`...
Javascript中的神器——Promise
10-20
JavaScript中的Promise对象是解决异步编程问题的一种重要机制，它在ES6中被引入，旨在克服传统的回调函数地狱，提供了一种更优雅的方式来管理和组织异步操作。Promise代表了一个未来可能完成或失败的操作，它拥有三...
study-es6promise:学习es6-promise
06-02
ES6引入了一种新的处理异步流程控制的机制——Promise，极大地提升了编写复杂异步代码的可读性和可维护性。本项目"study-es6promise"就是专门针对这一特性的学习资源，旨在帮助开发者理解和掌握如何使用ES6的Promise...
es6-promise.js
09-10
一个轻量级库，提供用于组织异步代码ES6 Promis(subset of rsvp.js) , 在ES5中支持Promise
小程序用es6 promise
04-02
小程序引用es6 promise,亲测，请大家下载，放心使用，谢谢！
ES6-tinker:这是一个“商店”应用程序，它使用一些现代工具来支持中间JS开发中的每周指导会话
05-24
ES6修补匠 这是一个在每周配对期间临时开发的应用程序，用于指导和讨论。 设置 npm install 跑步 （到目前为止，还没有UI组件。仅用于测试） npm test 问题/评论/为什么要这样写 这款应用是便签本，配对过程中出现大量口头“不要这样做”的结果。 您可能会发现需要重构或清理内容。 撒一粒盐。 就是说，如果您在这里漂流并有疑问或意见，或者看到值得教的课，请发表评论！
Node - ES6模块化 - Promise - async和await
FellAsleep的博客
02-09 929
1.ES6模块化 回顾Node中的模块化 node.js 遵循了 CommonJS 的模块化规范。其中： 导入其它模块使用 require()方法 模块对外共享成员使用 module.exports 对象 1.在Node中使用ES6模块化 每个 js 文件都是一个独立的模块 导入其它模块成员使用 import 关键字 向外共享模块成员使用 export 关键字 node.js 中默认仅支持 CommonJS 模块化规范 若想基于 node.js 体验与学习 ES6 的模块化语法，
学习 ES6 Promise
onefinis的博客
11-08 1209
PromiseA promise represents the eventual result of an asynchronous operation. 基础介绍Promise 把异步处理对象和处理规则规范化，统一接口编写， 模块化异步操作 ，这使得 Promise 异常的方便与强大。优点： 模式化的操作使得异步的操作以同步的形式表达，避免了回调地狱 更加方便的异步操作 方便的异常处理 特点： 状
ES6 Promise用法小结
热门推荐
涂涂
07-25 38万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiuJie_Boom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值