回调地狱

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

 

posted @ 2020-05-08 18:26  cecelia  阅读(2697)  评论(0编辑  收藏  举报