其他分享
首页 > 其他分享> > 回调地狱-Promise解决方案

回调地狱-Promise解决方案

作者:互联网

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