js中 浅谈回调地狱 Promise之终极改造代码

Callback helll

Promise

异步编程的执行顺序都是不一样的，无法保证代码的顺序：

以下是读取三个文件

const fs=require('fs');

fs.readFile('a.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
});

fs.readFile('b.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
});

fs.readFile('c.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
});

上面这样无法保证读取文件的顺序

什么是回调地狱?

通过回调地狱解决代码执行顺序问题：

fs.readFile('a.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
 fs.readFile('b.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
 fs.readFile('c.txt',(err,data)=>{
 if(err){
 	throw err;
 }
 console.log(data.toString())
});`在这里插入代码片`
});
});

但是这样代码不整齐，难维护

如何解决回调地狱？

为了解决回调编码带来的问题 ES6中新增了API ：Promise解决方式：Promise
Promise ：你可以把它看成一个容器，
                  它有三种状态 ：
                                pending,reslove,reject
                                pending是默认值 reslove 可以理解为成功，reject可以理解为失败
Promise常用方法：then ,表示异步成功执行的的数据状态变为reslove
下面来看下promise的基本语法使用：

一：基本语法：

var p1=new Promise((resolve,reject)=>{
	fs.readFile('',(err,data)=>{
		if(err){
			reject(err);//调用reject 相当于调用了then方法的第二个参数的函数
		}
		else{
			resolve(data);
		}
	})

});
//then方法接受的function 就是容器中的resolve函数
p1.then((data)=>{
	console.log(data);
},(err)=>{
	console.log("去读文件失败了"+err);
})

基本语法图解：

二.解决方案

解决异步调用执行顺序的问题 改造回调地狱里面的代码：

//异步调用 链式编程
var p1=new Promise((resolve,reject)=>{
	fs.readFile('a.txt',(err,data)=>{
		if(err){
			reject(err);
		}
		else{
			resolve(data);
		}
	})

});

var p2=new Promise((resolve,reject)=>{
	fs.readFile('b.txt',(err,data)=>{
		if(err){
			reject(err);
		}
		else{
			resolve(data);
		}
	})

});

var p3=new Promise((resolve,reject)=>{
	fs.readFile('c.txt',(err,data)=>{
		if(err){
			reject(err);
		}
		else{
			resolve(data);
		}
	})

});
//then方法接受的function 就是容器中的resolve函数

p1.then((data)=>{
	console.log(data.toString());
	return p2;
},(err)=>{
	console.log(err);
}).then((data)=>{
	console.log(data.toString());
	return p3;
},(err)=>{
	console.log(err);
}).then((data)=>{
	console.log(data.toString());
},(err)=>{
	console.log(err);
})

解决方案代码图解：

讲到这里，有些小伙伴会觉得读文件的代码太多了，那么现在我就来把读文件的代码封装起来

封装读取文件代码：
是不是更简洁啦

const fs=require('fs');

var readFileApi=(paths)=>{
	return new Promise((resolove,reject)=>{
       fs.readFile(paths,(err,data)=>{
 	    if(err){
         reject(err);
 	}else{
 		resolove(data.toString());
 	}
 })
})}

readFileApi('a.txt').then((data)=>{
 console.log(data);
 return readFileApi('b.txt')
},(err)=>{
 console.log(err);
}).then((data)=>{
 console.log(data);
 return readFileApi('c.txt')
},(err)=>{
console.log(err);
}).then((data)=>{
	console.log(data);
 
},(err)=>{
console.log(err+"end");

})