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回调地狱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript省市区三级联动菜单效果

    JavaScript省市区三级联动菜单效果

    这篇文章主要为大家详细介绍了JavaScript省市区三级联动菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS使用canvas实现基本的截图功能

    JS使用canvas实现基本的截图功能

    这篇文章主要给大家介绍了使用JS中的canvas实现基本的截图功能,文中有详细的实现思路和实现过程,文章通过代码示例讲解的非常详细,很感兴趣的同学可以参考一下
    2023-08-08
  • es6函数之严格模式用法实例分析

    es6函数之严格模式用法实例分析

    这篇文章主要介绍了es6函数之严格模式用法,结合实例形式分析了es6函数严格模式的定义、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 简单使用webpack打包文件的实现

    简单使用webpack打包文件的实现

    这篇文章主要介绍了简单使用webpack打包文件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件,感兴趣的朋友一起学习吧
    2016-05-05
  • javascript中return,return true,return false三者的用法及区别

    javascript中return,return true,return false三者的用法及区别

    这篇文章主要介绍了javascript中return,return true,return false三者的用法及区别的相关资料,需要的朋友可以参考下
    2015-11-11
  • javascript常用对话框小集

    javascript常用对话框小集

    对话框,大家对这个词汇可谓是各有所解,本文有个不错的例子,里面包含了各种常见对话框的实现,感兴趣的朋友可以了解下
    2013-09-09
  • 关于树形菜单 Checkbox的全选

    关于树形菜单 Checkbox的全选

    js树形菜单全选
    2008-07-07
  • Javascript中的对象和原型(二)

    Javascript中的对象和原型(二)

    这篇文章给大家介绍了js中的对象和原型,从工厂模式,构造函数方面展开话题,介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 详解全栈开发Vercel数据库存储服务

    详解全栈开发Vercel数据库存储服务

    这篇文章主要为大家介绍了全栈开发Vercel数据库存储服务功能使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05

最新评论