回调地狱

1. 异步操作

var fs = require('fs');

fs.readFile('./views/index.html',  (err, data) => {
    if (err) {
        throw err
    }
    console.log(data.toString());
})

fs.readFile('./views/main.html', (err, data) => {
    if (err) {
        throw err
    }
    console.log(data.toString());
})

fs.readFile('./views/update.html', (err, data) => {
    if (err) {
        throw err
    }
    console.log(data.toString());
})

在异步操作中，由于操作系统分片工作机制，下面三个文件的输出顺序是不确定的，后执行的可能会先输出。若要保证输出顺序，在前一个异步操作的回调函数中调用后一个异步操作。

var fs = require('fs');

fs.readFile('./views/index.html',  (err, data) => {
    if (err) {
        throw err
    }
    fs.readFile('./views/main.html', (err, data) => {
        if (err) {
            throw err
        }
        fs.readFile('./views/update.html', (err, data) => {
            if (err) {
                throw err
            }
            console.log(data.toString());
        })   
        console.log(data.toString());
    })
    console.log(data.toString());
})

这种情况下便出现了回调地狱。当异步操作越多，这种嵌套的层级也就越复杂，不利于代码维护。

2. Promise

• pending: 初始状态，既不是成功，也不是失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

pending 状态的 Promise 对象可能会变为fulfilled 状态并传递一个值给相应的状态处理方法，也可能变为失败状态（rejected）并传递失败信息。当其中任一种情况出现时(settled)，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法），将相应的回调函数放入微任务（microtask）中

var p1 = new Promise((resolve, reject) => {
    console.log('before async');
    fs.readFile('./views/index.html', (err, data) => {
        if (err) {
           reject(err);
        }
        console.log('in async')
        resolve(data);
    })
})
console.log('3333');

结果：

// before async
// 3333
// in async

注意：Promise本身只是个容器，不是异步的，其中要完成的任务才是异步的。

p1.then((data) => {
    console.log(data);
}, (err) => {
    console.log('出错了', err)
})

then方法接受的第一个（函数）参数，对应着生成Promise函数中接收的resolve；第二个（函数）参数，对应着reject.

then方法的执行结果是一个promise。我们可以链接任意个then，前一个then的回调结果将作为参数传递给下一个then回调！

 

 解决回调地狱的多重嵌套问题——promise链式编程

var p1 = new Promise((resolve, reject) => {
    console.log('before async');
    fs.readFile('./views/index.html', (err, data) => {
        if (err) {
            reject(err);
        }
        console.log('in async')
        resolve(data);
    })
})

var p2 = new Promise((resolve, reject) => {
    console.log('before async');
    fs.readFile('./views/update.html', (err, data) => {
        if (err) {
            reject(err);
        }
        console.log('in async')
        resolve(data);
    })
})


p1.then((data) => {
    console.log(data.toString());
// return 返回的结果会在后面紧接着的then方法中被函数接收
// return 123， data就是123；return p2,是一个resolved promise, data接收到的就是resolve包裹的值
    return p2;
}, (err) => {
    console.log('出错了', err)
}).then((data) => {
    console.log(data);
} )

封装

function pReadFile(path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) {
                reject(err);
            }
            resolve(data);
        })
    })
}

var p1 = pReadFile('./views/index.html');
var p2 = pReadFile('./views/update.html');


p1.then((data) => {
    console.log(data.toString());
    return p2;
}, (err) => {
    console.log('出错了', err)
}).then((data) => {
    console.log(data.toString());
} )