JavaScript详解使用Promise处理回调地狱与async await修饰符
Promise
Promise能够处理异步程序。
回调地狱
JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序来执行,那么就需要将这些异步操作嵌套起来,嵌套的层数特别多,就会形成回调地狱 或者叫做 横向金字塔。
案例:有a.txt、b.txt、c.txt三个文件,使用fs模板按照顺序来读取里面的内容,代码:
// 将读取的a、b、c里面的内容,按照顺序输出 const fs = require('fs'); // 读取a文件 fs.readFile('./a.txt','utf-8',(err,data)=>{ if(err) throw err; console.log(data); // 读取b文件 fs.readFile('./b.txt','utf-8',(err,data)=>{ if(err) throw err; console.log(data); // 读取c文件 fs.readFile('./c.txt','utf-8',(err,data)=>{ if(err) throw err; console.log(data) }) }) })
案例中,循环嵌套的代码越来越多,这就是 地狱回调
Promise简介
- Promise对象可以解决 回调地狱 的问题
- Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大
- Promise可以理解为是一个容器,里面可以编写异步程序的代码
- 从语法上说,Promise是一个对象,使用的时候需要 new
Promise简单使用
Promise是“承诺”的意思,实例中,它里面的异步操作就相当于一个承诺,而承诺就会有两种结果,要么完成了承诺的内容,要么失败。
所以,使用Promise,分为两大部分,首先是有一个承诺(异步操作),然后再兑现结果。
第一部分:定义"承诺"
// 实例化一个Promise,表示定义一个容器,需要给它传递一个函数作为参数,而该函数又有两个形参,通常用resolve和reject表示。该函数里面可以写异步请求的代码 // 换个角度,也可以理解为定下了一个承诺诺 let p = new Promise((resolve,reject)=>{ // 形参resolve,单词意思是 完成 // 实参reject,单词意思是 失败 fs.readFile('./a.txt','utf-8',(err,data)=>{ if(err){ // 失败,就告诉别人,承诺失败了 reject(err); }else{ // 成功,就告诉别人,承诺实现了 resolve(data); } } })
第二部分:获取"承诺"的结果
// 通过调用 p 的then方法,可以获取到上述 "承诺" 的结果 // then方法有两个函数类型的参数,参数1表示承诺成功时调用的函数,参数2可选,表示承诺失败时调用的函数 // p.then( // (data)=>{}, // 函数类型的参数,用于获取承诺成功后的数据 // (err)=>{} // 函数类型的参数,用于承诺失败后的错误信息 //) p.then( (data)=>{ console.log(data); }, (err)=>{ console.log(err); } )
三种状态
- 最初状态:pending,等待中,此时的promise结果为undefined
- 当resolve (value) 调用时,达到最终状态之一:fulfilled,(成功的)完成,此时可以获取结果value
- 当reject (error) 调用时,达到最终状态之一:rejected,失败,此时可以获取错误信息error
当达到最终的fulfilled 或 rejected 时,promise的状态就不会再改变了。
特点
当调用 resolve的时候,Promise 将到达最终的状态。 达到最终状态之后,Promise的状态就不会再改变了。
多次调用resolve函数,只有第一次有效,其他的调用都无效。
const fs = require('fs'); // 1.创建Promise对象:(承诺) let p = new Promise((resolve,reject)=>{ resolve(123); resolve(456); // 这次的调用无效 }); // 2.获取异步任务的结果 // p.then(函数1,[函数2]); p.then(res =>{ console.log(res); // 123 },err =>{ console.log(err); })
then方法的链式调用
- 前一个then里面返回的字符串,会被下一个then方法接收到。但是没有意义;
- 前一个then里面返回的Promise对象,并且调用resolve的时候传递了数据,数据会被下一个then接收到
- 前一个then里面如果没有调用resolve,则后续的then不会接收到任何值
const fs = require('fs'); // promise 承诺 let p1 = new Promise((resolve, reject) => { fs.readFile('./a.txt', 'utf-8', (err, data) => { err ? reject(err) : resolve(data.length); }); }); let p2 = new Promise((resolve, reject) => { fs.readFile('./b.txt', 'utf-8', (err, data) => { err ? reject(err) : resolve(data.length); }); }); let p3 = new Promise((resolve, reject) => { fs.readFile('./c.txt', 'utf-8', (err, data) => { err ? reject(err) : resolve(data.length); }); }); p1.then(a => { console.log(a); return p2; }).then(b => { console.log(b); // 接收上面传递的值p2 return p3; }).then(c => { console.log(c) // 接收上面传递的值p3 }).catch((err) => { console.log(err); // 如果错误,打印报错信息 });
catch方法可以统一获取到 错误信息
封装按顺序异步读取文件的函数
function myReadFile(path) { return new Promise((resolve, reject) => { fs.readFile(path, 'utf-8', (err, data) => { err ? reject(err) : resolve(data.length); }) }); } myReadFile('./a.txt') .then(a => { console.log(a); return myReadFile('./b.txt'); }) .then(b => { console.log(b); return myReadFile('./c.txt'); }) .then(c => { console.log(c) }) .catch((err) => { console.log(err); });
使用第三方模块读取文件
- npm init - y
- npm i then-fs 安装then-fs模块
- then-fs 将 内置的fs模块封装了,读取文件后,返回 Promise 对象,省去了我们自己封装
// then-fs 模块是第三方模块,需要 npm install then-fs 下载安装的 const fs = require('then-fs'); // then-fs 对内置的fs模块进行了重写的封装。调用方法后,返回Promise对象 let p1 = fs.readFile('./files/a.txt', 'utf-8'); // let p2 = fs.readFile('./files/b.txt', 'utf-8'); let p3 = fs.readFile('./files/c.txt', 'utf-8'); // 通过then获取结果 p1.then(res => { console.log(res.length); return p2; }).then(res => { console.log(res.length); return p3; }).then(res => { console.log(res.length); })
async和await 修饰符
ES6 — ES2015
async 和 await 是 ES2017 中提出来的。
异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。
从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。
异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步。
async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。
ES2017 提供了async和await关键字。await和async关键词能够将异步请求的结果以返回值的方式返回给我们。
async 用于修饰一个 function
- async 修饰的函数,总是返回一个 Promise 对象
- 函数内的返回值,将自动包装在 resolved 的 promise 中
await 只能出现在 async 函数内
- await 让 JS 引擎等待直到promise完成并返回结果
- 语法:let value = await promise对象; // 要先等待promise对象执行完毕,才能得到结果
- 由于await需要等待promise执行完毕,所以await会暂停函数的执行,但不会影响其他同步任务
对于错误处理,可以选择在async函数后面使用 .catch() 或 在promise对象后使用 .catch()
const fs = require('fs'); // 将异步读取文件的代码封装 function myReadFile (path) { return new Promise((resolve, reject) => { fs.readFile(path, 'utf-8', (err, data) => { err ? reject(err) : resolve(data.length); }); }).catch(err => { console.log(err); }); } async function abc () { let a = await myReadFile('./a.txt'); let b = await myReadFile('./b.txt'); let c = await myReadFile('./c.txt'); console.log(b); console.log(a); console.log(c); } abc();
错误处理
前提是得到几个Promise对象,代码如下:
let fs = require('fs'); let p1 = new Promise('./files/a.txt','utf-8'); let p2 = new Promise('./files/bbb.txt','utf-8'); // 注意:这里故意写错路径 let p3 = new Promise('./files/c.txt','utf-8');
获取Promise的结果,可以通过then获取。也可以通过async和await获取。
如果使用then获取结果,那么错误如何处理?在链式调用的尾端,加一个catch方法即可
// ----------------------------通过 then 获取结果----------------------------- p1.then(res=>{ console.log(res); return p2; }).then(res=>{ console.log(res); return p3 }).catch(err=>{ console.log(err); })
如何使用async和await获取结果,最好的错误处理方案,就是使用 try...catch...
// ---------------------------通过 async/await 获取结果-------------------- async function abc(){ try{ // 尝试做一些事情 let r1 = await p1; // 正常获取结果 let r2 = await p2; // 这里出错了,就会抛出错误 throw err. let r3 = await p3; console.log(r1,r2,r3) }catch(e){ console.log(e); // catch这里,会抓住前面try里面抛出的错误 } } abc();
小结
Promise是异步任务的一种解决方案
得到Promise对象
- 自己new Promise()
- 自己封装函数,函数中返回 Promise对象
- 使用第三方的模块或者库。比如 then-fs ,比如 axios
获取结果
- 通过 then 方法获取,并且通过 catch 捕获错误信息
- 通过 async和await的配合获取结果,并且通过 try…catch…捕获错误
到此这篇关于JavaScript详解使用Promise处理回调地狱与async await修饰符的文章就介绍到这了,更多相关JavaScript Promise回调地狱内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_60353088/article/details/125831897
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30