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");})

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

php编码 js解码,浅谈php和js中json的编码和解码
php中 1)编码 $jsonstr = json_encode($array) 2)解码 $arr = json_decode($jsonstr) echo json_encode("中文 ...
php中的js弹窗,浅谈javascript中的三种弹窗
js中三种弹窗 1)alert 弹出警告无返回值---------alert('第一行\n第二行'); 2)confirm()选择确定或取消,返回t或f----var result = confir ...
浅谈ES6原生Promise
ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现 ...
回调地狱以及解决回调地狱 - promise嵌套变链接 - 解决终极办法 - async 和 await
回调函数? 当一个函数被当做参数传递时,这个函数就叫做回调函数- callback 通常使用回调函数来处理异步代码当异步代码执行结束后,需要执行的代码就要放在回调函数中回调地狱? 当回调函数嵌套 ...
细谈回调地狱终极解决方案及ES7新语法async和await
1.回调地狱的一般解决方案正常情况下,我们都知道用promise去解决回调地狱.通过其调用then 和catch方法来实现回调函数多层嵌套问题.但是,我们可以实际来仔细看看用promise解决回调地 ...
c++对那些类型的数据不能使用引用_基于js数据类型浅谈deepClone
谈到deepClone,对于一些刚入手前端的小伙伴可能会发现一些问题,举个简单的例子: let a = {apple: 1} let b = a b.apple = 2 console.log(a.a ...
js中this和回调方法循环-我们到底能走多远系列（35）
我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...
Promise链式调用和解决回调地狱的ES7终极解决方法async，await
promise链式调用 **then 是成功回调,只要在then后边return一个promise就可以继续then**<script type="text/javascript&qu ...
浅谈Generator和Promise原理及实现
Generator 熟悉ES6语法的同学们肯定对Generator(生成器)函数不陌生,这是一个化异步为同步的利器. 栗子: function* abc() {let count = 0;while( ...

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

Callback helll

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

什么是回调地狱?

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

如何解决回调地狱？

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

最新文章

热门文章

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

Callback helll

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

什么是回调地狱?

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

如何解决回调地狱？

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

最新文章

热门文章

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

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