Vue Promise解决回调地狱问题实现方法

目录
  • 问题
  • 解决方案

问题

首先，什么是回调地狱:

  • 层嵌套的问题。
  • 每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性。

当一个接口需要依赖另一个接口的请求数据时，通常有两种解决方式

  • 将请求数据的接口设为同步，之后调另一个接口
  • 在请求数据接口的成功回调里调另一个接口

这两种问题在回调函数时代尤为突出。Promise 的诞生就是为了解决这两个问题。

典型的高阶函数，将回调函数作为函数参数传给了readFile。但久而久之，就会发现，这种传入回调的方式也存在大坑, 比如下面这样:

fs.readFile('1.json', (err, data) => {
    fs.readFile('2.json', (err, data) => {
        fs.readFile('3.json', (err, data) => {
            fs.readFile('4.json', (err, data) => {
            });
        });
    });
});

回调当中嵌套回调，也称回调地狱。这种代码的可读性和可维护性都是非常差的，因为嵌套的层级太多。而且还有一个严重的问题，就是每次任务可能会失败，需要在回调里面对每个任务的失败情况进行处理，增加了代码的混乱程度。

解决方案

Promise 利用了三大技术手段来解决回调地狱:

  • 回调函数延迟绑定。
  • 返回值穿透。
  • 错误冒泡。

首先来举个例子:

let readFilePromise = (filename) => {
    fs.readFile(filename, (err, data) => {
        if(err) {
            reject(err);
        }else {
            resolve(data);
        }
    })
}
readFilePromise('1.json').then(data => {
    return readFilePromise('2.json')
});

看到没有，回调函数不是直接声明的，而是在通过后面的 then 方法传入的，即延迟传入。这就是回调函数延迟绑定。

然后我们做以下微调:

let x = readFilePromise('1.json').then(data => {
    return readFilePromise('2.json')//这是返回的Promise
});
x.then(/* 内部逻辑省略 */)

我们会根据 then 中回调函数的传入值创建不同类型的Promise, 然后把返回的 Promise 穿透到外层, 以供后续的调用。这里的 x 指的就是内部返回的 Promise，然后在 x 后面可以依次完成链式调用。

这便是返回值穿透的效果。

这两种技术一起作用便可以将深层的嵌套回调写成下面的形式:

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
});

这样就显得清爽了许多，更重要的是，它更符合人的线性思维模式，开发体验也更好。

两种技术结合产生了链式调用的效果。

这解决的是多层嵌套的问题，那另一个问题，即每次任务执行结束后分别处理成功和失败的情况怎么解决的呢？

Promise采用了错误冒泡的方式。其实很简单理解，我们来看看效果:

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
}).catch(err => {
  // xxx
})

这样前面产生的错误会一直向后传递，被catch接收到，就不用频繁地检查错误了。

到此这篇关于Vue Promise解决回调地狱问题实现方法的文章就介绍到这了,更多相关Vue Promise回调地狱内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在vue项目中promise解决回调地狱和并发请求的问题

    场景需求: 需要同时请求5个接口 都请求成功后执行下一步操作 解决方法: 定义一个变量i=5,请求成功一个接口,让i–,直到i=0时执行下一个操作,否则不执行 axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){}) promise.all 并发请求,.then(function([callback1, callback2]){}) 1.回调地狱: 函数作为参数层层嵌套 代替的为.then的链式操作 2.promis

  • Vue Promise解决回调地狱问题实现方法

    目录 问题 解决方案 问题 首先,什么是回调地狱: 层嵌套的问题. 每种任务的处理结果存在两种可能性(成功或失败),那么需要在每种任务执行结束后分别处理这两种可能性. 当一个接口需要依赖另一个接口的请求数据时,通常有两种解决方式 将请求数据的接口设为同步,之后调另一个接口 在请求数据接口的成功回调里调另一个接口 这两种问题在回调函数时代尤为突出.Promise 的诞生就是为了解决这两个问题. 典型的高阶函数,将回调函数作为函数参数传给了readFile.但久而久之,就会发现,这种传入回调的方式也

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

    目录 Promise 回调地狱 Promise简介 Promise简单使用 async和await 修饰符 小结 Promise Promise能够处理异步程序. 回调地狱 JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序来执行,那么就需要将这些异步操作嵌套起来,嵌套的层数特别多,就会形成回调地狱 或者叫做 横向金字塔. 案例:有a.txt.b.txt.c.txt三个文件,使用fs模板按照顺序来读取里面的内容,代码:

  • Nodejs异步回调的优雅处理方法

    前言 Nodejs最大的亮点就在于事件驱动, 非阻塞I/O 模型,这使得Nodejs具有很强的并发处理能力,非常适合编写网络应用.在Nodejs中大部分的I/O操作几乎都是异步的,也就是我们处理I/O的操作结果基本上都需要在回调函数中处理,比如下面的这个读取文件内容的函数: 复制代码 代码如下: fs.readFile('/etc/passwd', function (err, data) {   if (err) throw err;   console.log(data); }); 那,我们

  • 通过实例了解Render Props回调地狱解决方案

    简而言之,只要一个组件中某个属性的值是函数,那么就可以说该组件使用了 Render Props 这种技术.听起来好像就那么回事儿,那到底 Render Props 有哪些应用场景呢,咱们还是从简单的例子讲起,假如咱们要实现一个展示个人信息的组件,一开始可能会这么实现: const PersonInfo = props => ( <div> <h1>姓名:{props.name}</h1> </div> ); // 调用 <PersonInfo n

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

  • vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决

  • vue 微信分享回调iOS和安卓回调出现错误的解决

    产品需求:在微信内分享需要手动配置的分享地址.分享图片与内容描述,引导用户分享,并在微信分享成功回调内进行相应的操作. 首先需要在项目中引入微信jsSDk包,然后通过接口获取后台签名. 封装函数获取微信分享必填参数 其中的jsApiList中填的是需要使用的微信分享js接口的列表,参数URL默认是location.href,即分享当前页面的URL. 在需要分享的页面引入封装的函数 然后通过wxShare方法将URL和配置的参数传入,link参数是分享出去的链接,必须与当前页面的对应js安全域名一

  • vue通过video.js解决m3u8视频播放格式的方法

    vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • 在vue中解决提示警告 for循环报错的方法

    警告 1.出现这个警告问题的时候 我们可以去main.js中在头部添加这句话: Vue.config.productionTip = false 这样即可去除警告! 2.在build文件下的webpack.base.conf.js文件中, 将 ...(config.dev.useEslint ? [createLintingRule()] : []),注释掉, const createLintingRule = () => ({ test: /\.(js|vue)$/, loader: 'esl

随机推荐