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