当前位置： 首页 > news >正文

Web前端Promise

news 来源：原创 2024/9/20 17:44:17

Promise介绍与使用

Promise是什么？

1.抽象表达：

  • Promise是一门新的技术（ES6规范）
  • Promise是JS中进行异步编程的新解决方案
  • 备注：旧方案是单纯使用回调函数

2.具体表达：

  • 从语法上来说：Promise是一个构造函数
  • 从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

异步编程

  • fs文件操作
require('fs').readFile('./index.html',(err,data)=>{})
  • 数据库操作
  • AJAX
$.get('/server',(data)=>{})
  • 定时器
setTimeout(()=>{},2000)

指定回调函数的方式更加灵活

1.旧的：必须在启动异步任务前指定

2.promise：启动异步任务=>返回promise对象=>

给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个） 

支持链式调用，可以解决回调地狱问题

回调地狱

回调地狱嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件

特点：不便于阅读，不便于异常处理

Promise实践练习-fs模块

const fs=require('fs')
// 回调函数形式
// fs.readFile('./resource/content.txt',(err,data)=>{
//   // 如果出错 则抛出错误
//   if(err) throw err
//   // 输出文件内容
//   console.log(data.toString())
// })
// Promise形式
let p=new Promise((resolve,reject)=>{fs.readFile('./resource/content.txt',(err,data)=>{// 如果出错if(err)reject(err)// 如果成功resolve(data)})
})
p.then(value=>{console.log(value.toString())
},reason=>{console.log(reason)
})

 Promise实践练习-AJAX请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><h2 class="page-header">Promise 封装AJAX操作</h2><button class="btn btn-primary" id="btn">点击发送AJAX</button></div><script>// 接口地址 http://api.apiopen.top/getJoke// 获取元素对象const btn=document.querySelector('#btn')btn.addEventListener('click',function(){const p=new Promise((resolve,reject)=>{// 1.创建对象const xhr=new XMLHttpRequest()// 2.初始化xhr.open('GET','https://api.apiopen.top/getJoke')// 3.发送xhr.send()// 4.处理响应结果xhr.onreadystatechange=function(){if(xhr.readyState===4){// 判断响应状态码if(xhr.status>=200&&xhr.status<300){// 控制台输出响应体resolve(xhr.response)}else{// 控制台输出响应状态码reject(xhr.status)}}}})p.then(value=>{console.log(value)},reason=>{console.warn(reason)})})</script>
</body>
</html>

封装读取文件函数

/***封装一个函数mineReadFile读取文件内容参数:path 文件路径返回:promise 对象 **/
function mineReadFile(path){return new Promise((resolve,reject)=>{require('fs').readFile(path,(err,data)=>{// 判断if(err) reject(err)// 成功resolve(data)})})
}
mineReadFile('./resource/content.txt').then(value=>{console.log(data)
},reason=>{console.warn(reason)
})

util.promisify(original)

传入一个遵循常见错误优先的回调风格的函数（即以(err,value)=>...回调作为最后一个参数），并返回一个返回promise的版本

// util.promisify方法
// 引入util模块
const util=require('util')
// 引入fs模块
const fs=require('fs')
// 返回一个新的函数
let mineReadFile=util.promisify(fs.readFile)//让fs.readFile返回一个promise对象，将回调函数风格的方法转为promise风格的方法
mineReadFile('./resource/content.txt').then(value=>{},reason=>{})

Promise封装练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 封装一个函数sendAJAX发送GET AJAX请求// 参数   URL// 返回结果 Promise对象function sendAJAX(url){return new Promise((resolve,reject)=>{const xhr=new XMLHttpRequest()xhr.responseType='json'xhr.open('GET',url)xhr.send()// 处理结果xhr.onreadystatechange=function(){if(xhr.readyState===4){// 判断成功if(xhr.status>=200&&xhr.status<300){resolve(xhr.response)}else{reject(xhr.status)}}}})}sendAJAX('https://api.apiopen.top/getJoke').then(value=>{console.log(value)},reason=>{console.warn(reason)})</script>
</body>
</html>

Promise的状态改变

  1. pending变为resolved
  2. pending变为rejected

说明：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason

 Promise的状态

实例对象中的一个属性PromiseState

  • pending 未决定的
  • resolved/fullfilled成功
  • rejected失败

Promise对象的值

实例对象中的另一个属性 PromiseResult

保存着异步任务（成功或失败）的结果

Promise的基本流程

 API

1.Promise构造函数：Promise(excutor){}

  1. executor函数：执行器（resolve,reject）=>{}
  2. resolve函数：内部定义成功时我们调用的函数value=>{}
  • reject函数：内部定义失败时我们调用的函数reason=>{}

说明：executor会在Promise内部立即同步调用（非异步），异步操作在执行器中执行

2.Promise.prototype.then方法：(onResolved,onRejected)=>{}

  1. onResolved函数：成功的回调函数(value)=>{}
  2. onRejected函数：失败的回调函数(reason)=>{}

说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的promise对象

3.Promise.prototype.catch方法:(onRejected)=>{}

  • onRejected函数：失败的回调函数(reason)=>{}

4.Promise.resolve()方法：(value)=>{}

  • value:成功的数据或promise对象

说明：返回一个成功/失败的promise对象

如果传入的参数为非promise类型的对象，则返回的结果为成功promise对象

如果传入的参数为Promise对象，则参数的结果决定了resolve的结果

5.Promise.reject方法：(reason)=>{}

  • reason:失败的原因

说明：返回一个失败的promise对象

无论传入什么样的数值，结果均为失败的promise对象

6.Promise.all方法：(promises)=>{}

  • promises:包含n个promise的数组

说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败

        let p1 = new Promise((resolve, reject) => {resolve('ok');})let p2 = new Promise((resolve, reject) => {resolve('hello');})let p3 = new Promise((resolve, reject) => {reject('error');})let result = Promise.all([p1, p2, p3]);console.log(result);

7.Promise.race方法：(promises)=>{} 

  • promises：包含n个promise的数组

说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

Promise.race方法是需要传递一个参数，参数为数组,数组中的内容表示的是Promise实例化对象如果有最先到达状态的(pending来更改成fulfilled或者是rejected)，不管是成功状态还是失败的状态，都将以这个对象的状态和结果值为准

 

        const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve(1);}, 1000)})const p2 = new Promise((resolve, reject) => {setTimeout(() => {reject(2);}, 3000)})const p3 = new Promise((resolve, reject) => {setTimeout(() => {resolve(3);}, 5000)})const result = Promise.race([p3, p1, p2]);console.log(result);

promise的几个关键问题

如何改变promise的状态？

  1. resolve(value):如果当前是pending就会变为resolved
  2. reject(reason):如果当前是pending就会变为rejected
  3. 抛出异常：如果当前是pending就会变为rejected
        let p1 = new Promise((resolve, reject) => {//成功// resolve('success');//失败// reject('error');//抛出异常// throw ' 出问题啦，你如果在这么写肯定是有问题的，有没有良心~~~';//状态只能更改一次reject('error');resolve('ok');})console.log(p1);

一个promise指定多个成功/失败回调函数，都会调用吗？

当promise改变为对应状态时就会调用

        let p1 = new Promise((resolve, reject) => {// resolve('ok');// reject('error');// throw '异常'})console.log(p1);p1.then(value => {console.log(value);}, reason => {console.log(reason);})p1.then(value => {console.log(value);}, reason => {console.log(reason);})

改变promise状态和指定回调函数谁先谁后？

（1）都有可能，正常情况下是先指定回调函数再改变状态，但也可以先改状态再指定回调

若执行器函数中为同步任务，则先修改状态，后指定回调

若执行器函数中为异步任务，则先指定回调，在更改状态，更为常见 [promise主要是为了执行异步任务]

（2）如何先改状态再指定回调？

  1. 在执行器中直接调用resolve()/reject()
  2. 延迟更长时间才调用then()

（3）什么时候才能得到数据？

  1. 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
  2. 如果先改变的是状态，那当指定回调时，回调函数就会调用，得到数据

（4）promise.then()返回的新promise的结果状态由什么决定？

  1. 简单表达：由then()指定的回调函数执行的结果决定
  2. 详细表达：
  • 如果抛出异常，新promise变为rejected，reason为抛出的异常
  • 如果返回的是非promise的任意值，新promise变为resolved，value为返回的值
  • 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果
        const p1 = new Promise((resolve, reject) => {resolve('ok');})const result = p1.then(value => {//console.log(value);// return value;return new Promise((resolve, reject) => {//resolve('success');reject('error');})}, reason => {console.log(reason);})console.log(result);

（5）promise如何串连多个操作任务？

  1. promise的then()返回一个新的promise,可以开成then()的链式调用
  2. 通过then的链式调用串连多个同步/异步任务
        new Promise((resolve, reject) => {//reject('error');resolve('success');}).then(value => {console.log(value);console.log(222);}).then(value => {console.log(value);//返回结果为undefined}).then(value => {console.log(value);}, reason => {console.log(reason);})

（6）promise异常穿透

  1. 当使用promise的then链式调用时，可以在最后指定失败的回调
  2. 前面任何操作出了异常，都会传到最后失败的回调中处理
        new Promise((resolve, reject) => {console.log(111);reject('error');}).then(value => {console.log(222);}).then(value => {console.log(value);}).then(value => {console.log(value);}).catch(reason => {console.log(reason);})

（7）中断promise链

  1. 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
  2. 办法：在回调函数中返回一个pendding状态的promise对象
        new Promise((resolve, reject) => {resolve(1);}).then(value => {console.log(value);}).then(value => {console.log(22222);}).then(value => {console.log(33333);//return false;//throw '异常';return new Promise(() => { })}).then(value => {console.log(44444);}).then(value => {console.log(55555);}).catch(reason => {console.log(reason);})

async与await

async函数

  • 函数的返回值为promise对象
  • promise对象的结果由async函数执行的返回值决定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>async函数</title>
</head><body><script>//以前代码// const p1 = new Promise((resolve, reject) => {//     resolve('ok');// })// //只不过是从原来的回调地狱写法修改成了回调函数的链式写法，换汤不换药// //使用async结合await的终极目标：就是同步的代码来完成异步的功能// p1.then(value => {//     console.log(value);// }, reason => {//     console.log(reason);// }).then(value => {//     console.log(value);// }, reason => {//     console.log(reason);// })//任何的函数都可以被声明成一个async函数//因为要实现的就是异步功能(定时器、ajax请求...)//可能是要将实现的功能封装到一个函数之中，为了更好的表示函数之中是异步，所以在函数的前面添加一个asyncasync function main() {//函数的内部可以添加任意的语句来执行，但是其真正的目的主要是为了得到一个Promise对象的状态以及结果值// console.log('哈哈哈哈');//情况1：返回非Promise对象的数据// return 100;//情况2：返回的是Promise对象//返回的这个Promise实例化对象的状态以及结果值将直接影响结果产生的Promise实例化对象的状态和结果值// return new Promise((resolve, reject) => {//     // resolve('ok');//     reject('error');// })//情况3：抛出异常// throw '出错啦';throw new Error('出错啦');}//调用let result = main();result.then(value => {console.log(value);}, reason => {console.log(reason);})</script>
</body></html>

  1. await表达式

  • await右侧的表达式一般为promise对象，但也可以是其他的值
  • 如果表达式为promise对象，await返回的是promise成功的值
  • 如果表达式是其它值，直接将此值作为await的返回值

注意：

  • await必须写在async函数中，但async函数中可以没有await
  • 如果await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>await表达式</title>
</head><body><!--1、async函数结合await表达式1.1 async函数中不一定要完全结合await1.2 有await的函数一定是async函数2、await相当于then，可以直接拿到成功的Promise实例化对象的结果值3、await一定要写在async函数之中，但是async函数之中可以没有await4、如果await表达式后面是Promise实例化对象，则await返回的是Promise的成功的结果值5、如果await表达式后面的其他值，则会直接将这个值作为await的返回值--><script>async function main() {//内部执行异步的功能，并且得到成功的结果数据值//1、如果await右侧为非Promise类型的数据，await后面的值是什么，得到的结果就是什么// let rs = await 100;// console.log(rs);//2、如果await右侧为Promise成功类型的数据// let rs = await new Promise((resolve, reject) => {//     resolve('ok');// })// console.log(rs);// let rs = await Promise.resolve('okk');// console.log(rs);//3、如果await右侧为失败的Promise类型数据，需要try...catch来捕获try {// let rs = await new Promise((resolve, reject) => {//     reject('error');// })// console.log(rs);let rs = await Promise.reject('error');console.log(rs);} catch (e) {console.log(e);}//有了try...catch后续的代码将继续执行console.log(1111);}//调用main();</script>
</body></html>

使用async和await异步读取文件

//1、导入模块
const fs = require('fs');
const { promisify } = require('util');//2、创建async函数
async function main() {//读取文件let myreadfile = promisify(fs.readFile);try {let one = await myreadfile('./resource/1.txt');let two = await myreadfile('./resource/2.txt');let three = await myreadfile('./resource/3.txt');console.log(one + two + three);} catch (e) {console.log(e);}
}
//调用函数
main();

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【JavaScript】点击穿透
  • 爬虫学习4：爬取王者荣耀技能信息
  • 高翔【自动驾驶与机器人中的SLAM技术】学习笔记（二）——带着问题的学习；一刷感受；环境搭建
  • 前端切片下载
  • react开发-配置开发时候@指向SRC目录
  • 微服务概念篇-服务提供者/服务消费者
  • 案例研究｜柯尼卡美能达软件开发（大连）有限公司基于DataEase构筑内部数据可视化体系
  • react中配置路径别名@
  • 使用docker部署后端项目后，拿不到linux中的文件
  • 【python】Numpy中的ValueError: setting an array element with a sequence报错分析及解决方案
  • 逻辑漏洞面试问题
  • C语言之2048小游戏理解分析
  • 最优化原理（笔记）
  • MINE：Mutual Information Neural Estimation
  • 【学习笔记】无人机系统（UAS）的连接、识别和跟踪（七）-广播远程识别码（Broadcast Remote ID）
  • JavaScript 如何正确处理 Unicode 编码问题！
  • 《Java8实战》-第四章读书笔记（引入流Stream）
  • Android Studio：GIT提交项目到远程仓库
  • Angular2开发踩坑系列-生产环境编译
  • angular学习第一篇-----环境搭建
  • JAVA SE 6 GC调优笔记
  • Rancher-k8s加速安装文档
  • Terraform入门 - 3. 变更基础设施
  • Vue.js 移动端适配之 vw 解决方案
  • 不发不行！Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 对象管理器（defineProperty）学习笔记
  • 每天10道Java面试题，跟我走，offer有！
  • 如何设计一个微型分布式架构？
  • 深度解析利用ES6进行Promise封装总结
  • 小试R空间处理新库sf
  • postgresql行列转换函数
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 函数计算新功能-----支持C#函数
  • ​1：1公有云能力整体输出，腾讯云“七剑”下云端
  • ​学习一下，什么是预包装食品？​
  • # Java NIO（一）FileChannel
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • #if等命令的学习
  • #我与Java虚拟机的故事#连载14：挑战高薪面试必看
  • （14）目标检测_SSD训练代码基于pytorch搭建代码
  • （aiohttp-asyncio-FFmpeg-Docker-SRS）实现异步摄像头转码服务器
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • （二）fiber的基本认识
  • （附源码）php投票系统 毕业设计 121500
  • （介绍与使用）物联网NodeMCUESP8266（ESP-12F）连接新版onenet mqtt协议实现上传数据（温湿度）和下发指令（控制LED灯）
  • (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境
  • （五）activiti-modeler 编辑器初步优化
  • （一）u-boot-nand.bin的下载
  • (一)基于IDEA的JAVA基础1
  • *++p：p先自＋，然后*p，最终为3 ++*p：先*p，即arr[0]=1，然后再++，最终为2 *p++：值为arr[0],即1，该语句执行完毕后，p指向arr[1]
  • .bat批处理（三）：变量声明、设置、拼接、截取
  • .mkp勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET / MSBuild 扩展编译时什么时候用 BeforeTargets / AfterTargets 什么时候用 DependsOnTargets？
  • .NET Reactor简单使用教程
  • .net 桌面开发 运行一阵子就自动关闭_聊城旋转门家用价格大约是多少,全自动旋转门,期待合作...