回调地狱-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