一、前言
通过这个例子对promise解决回调地狱问题有一个初步理解。
二、主要内容
1、回调地狱：如下图所示，一个回调函数里面嵌套一个回调函数，这样的代码可读性较低也比较恶心
2、下面用一个简单的例子来体验回调
举例：我们想要按照顺序读取三个文件，a.txt b.txt c.txt 通过已经学的知识，发现下面的代码是不行的（代码是在node环境中实现）
（1）项目目录结构如下：
（2）callback.js: 如下
var fs = require(‘fs‘); //读取文件a.txt fs.readFile(‘./data/a.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); }) //读取文件b.txt fs.readFile(‘./data/b.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); }) //读取文件c.txt fs.readFile(‘./data/c.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); })
（3）测试：发现读取文件的顺序并不是先a.txt --> b.txt -->c.txt，因为这里读取文件是异步的，这里执行的顺序取决于文件的大小
（4）为了让读取的文件按照顺序来，我们可以用一下嵌套的方式 ,这种方式可以保证读取的顺序是按照a b c顺序来的，，但是代码嵌套得比较恶心，，这里只有三层嵌套，
var fs = require(‘fs‘); //读取a.txt fs.readFile(‘./data/a.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); //读取b.txt fs.readFile(‘./data/b.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); //读取c.txt fs.readFile(‘./data/c.txt‘, function (err, data) { if (err) { throw err } console.log(data.toString()); }) }) })
3、使用promise来解决回调嵌套（不了解promise的可以参照阮一峰老师的es6文档）
var fs = require(‘fs‘)
//创建p1的promise容器 var p1 = new Promise(function (resolve, reject) { fs.readFile(‘./data/a.txt‘, ‘utf8‘, function (err, data) { if (err) { reject(err) } else { resolve(data) } }) })
//创建p2的promise容器 var p2 = new Promise(function (resolve, reject) { fs.readFile(‘./data/b.txt‘, ‘utf8‘, function (err, data) { if (err) { reject(err) } else { resolve(data) } }) })
//创建p3的promise容器 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 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数会作为 p2 的 resolve // return p2 }, function (err) { console.log(‘读取文件失败了‘, err) }) .then(function (data) { console.log(data) return p3 }) .then(function (data) { console.log(data) console.log(‘end‘) })
为什么可以那样做：
4、将上面的方法封装
var fs = require(‘fs‘) function pReadFile(filePath) { return new Promise(function (resolve, reject) { fs.readFile(filePath, ‘utf8‘, function (err, data) { if (err) { reject(err) } else { resolve(data) } }) }) } pReadFile(‘./data/a.txt‘) .then(function (data) { console.log(data) return pReadFile(‘./data/b.txt‘) }) .then(function (data) { console.log(data) return pReadFile(‘./data/c.txt‘) }) .then(function (data) { console.log(data) })
三、总结
参考：阮一峰：http://es6.ruanyifeng.com
原文：https://www.cnblogs.com/xxm980617/p/10568296.html