JavaScript详解使用Promise处理回调地狱与async await修饰符

 更新时间:2022年07月19日 11:54:20   作者:一个水瓶座程序猿.  
这篇文章主要介绍了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回调地狱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中闭包的详解

    JavaScript中闭包的详解

    本文主要介绍了JavaScript中闭包的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 在js代码拼接dom对象到页面上的模板总结

    在js代码拼接dom对象到页面上的模板总结

    今天小编就为大家分享一篇关于在js代码拼接dom对象到页面上的模板总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 如何设置iframe高度自适应在跨域情况下的可用方法

    如何设置iframe高度自适应在跨域情况下的可用方法

    iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
    2013-09-09
  • JS中的模糊查询功能

    JS中的模糊查询功能

    这篇文章主要介绍了JS中的模糊查询功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript数据库TaffyDB用法实例分析

    JavaScript数据库TaffyDB用法实例分析

    这篇文章主要介绍了JavaScript数据库TaffyDB用法,实例分析了TaffyDB数据库的定义、查询、更新、删除等操作的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Javascript之面向对象--接口

    Javascript之面向对象--接口

    本篇文章实例演示了Javascript的面向对象--接口的用法。希望对大家有所帮助,下面就随小编一起来看看吧
    2016-12-12
  • 用JavaScript对JSON进行模式匹配(Part 1-设计)

    用JavaScript对JSON进行模式匹配(Part 1-设计)

    在《从 if else 到 switch case 再到抽象》这篇文章里面说到,解决 if else 和 switch case 分支过多的一个方法,就是做一个专用的 dispatcher ,让它来负责进行筛选与转发。
    2010-07-07
  • JS 对java返回的json格式的数据处理方法

    JS 对java返回的json格式的数据处理方法

    下面小编就为大家带来一篇JS 对java返回的json格式的数据处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • 微信小程序开发教程之增加mixin扩展

    微信小程序开发教程之增加mixin扩展

    Mixin是一种思想,用部分实现的接口来实现代码复用。可以用来解决多继承的问题,又可以用来扩展功能。下面这篇文章主要给大家介绍了关于为微信小程序增加mixin扩展的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • Extjs表单输入框异步校验的插件实现方法

    Extjs表单输入框异步校验的插件实现方法

    这篇文章主要介绍了Extjs表单输入框异步校验的插件实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03

最新评论