ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

回调地狱-Promise解决方案

2021-04-30 00:00:35  阅读:202  来源: 互联网

标签:function 地狱 return resolve err 解决方案 fs Promise data


1、需求所在

最近在学node的时候,看到了回调地狱,以及使用promise解决这个问题的思路。首先呐,需求是这样的,使用node文件操作,分别读取a、b、c三个文件,但是必须在a文件加载完之后,再去加载b文件,b文件加载完之后再去加载c文件。
如果我们使用正常的方法的话,代码大概会是下面的样子:

var fs = require('fs');
fs.readFile('./data/a.txt', 'utf8', function(err, data) {
        if(err) {
            throw err
        } else {
            console.log(data);
            fs.readFile('./data/b.txt', 'utf8', function(err, data) {
        		if(err) {
            		throw err
        		} else {
            		console.log(data);
            		fs.readFile('./data/c.txt', 'utf8', function(err, data) {
            		if(err){
						throw err
					} else {
						console.log(data);
					}})
    			}
    		})
        }
    })

看吧,这只是三个嵌套,已经让代码变得如何难以维护,那如果嵌套更多了,那对于后期维护,岂不是就是一个灾难呐?而且凡是异步调用嵌套,都会涉及这个问题,这就是所谓的回调地狱。

2、解决方法-Promise

使用ES6的新语法-promise即可让代码看起来简洁易维护,直接上代码:

var fs = require('fs');
//新建的promise对象中,除了异步函数
var p1 = new Promise(function(resolve, reject){
    
    //readFile就是一个异步函数
    fs.readFile('./data/a.txt', 'utf8', function(err, data) {
        if(err) {
            reject(err)
        } else {
            resolve(data)
        }
    })
})
var p2 = new Promise(function(resolve, reject){
    fs.readFile('./data/b.txt', 'utf8', function(err, data) {
        if(err) {
            reject(err)
        } else {
            resolve(data)
        }
    })
})
var p3 = new Promise(function(resolve, reject){
    fs.readFile('./data/c.txt', 'utf8', function(err, data) {
        if(err) {
            reject(err)
        } else {
            resolve(data)
        }
    })
})

p1.then(
    function(data) {
        console.log(data)
        //当p1读取成功的时候
        //当前函数中 return 的结果就可以在后面的 then 中 function 接收到
        //当你 return 123 后面就接收到 123
        //     return 'hello' 后面就接收到 'hello'
        //     没有 return 后面接收到的就是 undefined
        //真正有用的是:我们可以 return 一个  Promise 对象
        return p2;
    }, function(err) {
        console.log('文件读取失败');
    }
).then(function(data) {
    console.log(data);
    return p3;
}).then(function(data){
    console.log(data);
})

这就是使用promise之后的代码,相比于上面的那个代码,是不是已经很简洁了呐?当然还有更简洁的async,await,如果大家对这些基本语法还不太了解的话,大家可以去看看阮一峰老师写的ES6

3、使用Promise封装ajax

最后给大家封装一下ajax的get请求,算是一个练习吧。

//封装ajax请求
function pGet(url) {
    return new Promise(function(resolve, reject) {
        var oReq = new XMLHttpRequest()
        oReq.onload = function() {
            resolve(JSON.parse(oReq.responseText))
        }
        oReq.onerror = function(err) {
            reject(err)
        }
        oReq.open("get", url, true)
        oReq.send()
    })
}  

标签:function,地狱,return,resolve,err,解决方案,fs,Promise,data
来源: https://blog.csdn.net/Shmily_YH/article/details/116278876

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有