JavaScript详解使用Promise处理回调地狱的两种方法

更新时间：2022年11月30日 10:59:04 作者：未及545

这篇文章主要介绍了JavaScript详解使用Promise处理回调地狱的两种方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

一、.then()链式调用解决

多层回调函数的相互嵌套，就形成了回调地狱。

缺点：

1.代码耦合性太强，难以维护。

2.大量冗余的代码相互嵌套，可读性比较差。

then-fs的基本使用：

调用then-fs（终端通过npm install then-fs安装包）提供的readFile（）方法，可以异步的读取文件的内容，它的返回值是Promise的实例对象，因此可以调用.then（）方法为每个Promise异步操作指定成功和失败之后的回调函数。

import thenFs from "then-fs"
thenFs.readFile("./fis/1.txt","utf8").then(r1=>{
  console.log(r1);
})
thenFs.readFile("./fis/2.txt","utf8").then(r2=>{
  console.log(r2);
})
thenFs.readFile("./fis/3.txt","utf8").then(r3=>{
  console.log(r3);
})

但是会发现读取顺序是会变化的。

.then（）方法的特性：

如果上一个.then（）方法中返回了一个新的promise实例对象，则可以通过下一个.then（）继续进行处理，通过链式调用的方法，解决地狱回调问题。

import thenFs from "then-fs"
thenFs.readFile("./fis/1.txt","utf8").then(r1=>{
  console.log(r1);
  return thenFs.readFile("./fis/2.txt","utf8")
}).then(r2=>{
  console.log(r2);
  return thenFs.readFile("./fis/3.txt","utf8")
}).then(r3=>{
  console.log(r3);
})

.catch（）方法

import thenFs from "then-fs"
thenFs.readFile("./fis/11.txt","utf8").catch(err=>{
  console.log(err.message);
}).then(r1=>{
  console.log(r1);
  return thenFs.readFile("./fis/2.txt","utf8")
}).then(r2=>{
  console.log(r2);
  return thenFs.readFile("./fis/3.txt","utf8")
}).then(r3=>{
  console.log(r3);
})

.catch（）放到最后可以捕获所有错误，但是一旦遇到错误，后面的.then（）就不在执行。

.catch（）放到前面，后面的.then（）还可以正常执行。

二、async await解决

import thenFs from "then-fs"
 async function getFile(){
// 不加await，打印的r1是一个promise实例对象，加await打印的是结果
const r1=await thenFs.readFile("./fis/1.txt","utf8")
console.log(r1);
const r2=await thenFs.readFile("./fis/2.txt","utf8")
console.log(r2);
const r3=await thenFs.readFile("./fis/3.txt","utf8")
console.log(r3);
 }
 getFile()

注意：

在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行

import thenFs from "then-fs"
// 在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行
console.log("a");
 async function getFile(){
  console.log("b");
const r1=await thenFs.readFile("./fis/1.txt","utf8")
console.log(r1);
const r2=await thenFs.readFile("./fis/2.txt","utf8")
console.log(r2);
const r3=await thenFs.readFile("./fis/3.txt","utf8")
console.log(r3);
console.log("d");
 }
 getFile()
 console.log("c");

到此这篇关于JavaScript详解使用Promise处理回调地狱的两种方法的文章就介绍到这了,更多相关JS Promise回调地狱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于JS实现页面悬浮框的实例代码
这篇文章主要介绍了基于JS实现页面悬浮框的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
JS文本框不能输入空格验证方法
JS文本框不能输入空格验证方法，需要的朋友可以参考一下
2013-03-03
微信小程序图表插件(wx-charts)实例代码
这篇文章主要介绍了微信小程序图表插件(wx-charts)实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-01-01
简单实现js倒计时功能
这篇文章主要为大家详细介绍了js倒计时效果的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
JavaScript+html5 canvas制作色彩斑斓的正方形效果
这篇文章主要介绍了JavaScript+html5 canvas制作色彩斑斓的正方形效果,实例分析了JavaScript结合html5 canvas实现图形动态绘制的技巧,需要的朋友可以参考下
2016-01-01
浅析js 文字滚动效果
文字滚动显示，是网页企业公告，文字链广告常用的一种效果，说不定在什么时候你就能看到它。
2010-05-05
JavaScript实现枚举的几种方法总结
在前端开发中,我们可能经常需要用到枚举,使用枚举的好处是为了让代码的可读性更强,避免直接使用数字或未知的字符串,但是在JavaScript中,要自己实现一个枚举功能,那么大家能想到多少种实现枚举的方法呢,我将介绍几种实现枚举的好方法
2023-08-08
JavaScript实现异步图像上传功能
这篇文章主要介绍了JavaScript实现异步图像上传功能,本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本)，同时将其上载到服务器，而无需等待操作完成。需要的朋友可以参考下
2018-07-07
JS实现导航栏楼层特效
这篇文章主要为大家详细介绍了JS实现导航栏楼层特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
详解JavaScript实现继承的五种经典方式(附图解)
JavaScript中的继承是一种机制,通过它可以创建一个对象,该对象可以享有另一个对象的属性和方法,本文将详细的为大家介绍实现继承的五种经典方式,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08