撩课-Web架构师养成系列(第二篇)-async

异步编程的目标就是让代码的执行更加类似于同步编程，开发中比较常用的方式主要包括：

1) 回调函数实现
2) 发布订阅、通知
3) 事件监听
4）Promise/A+ 和 生成器函数
5）async/await
在ES6之前，我们更多地是使用回调函数来实现异步编程。

回调函数就是把任务拆解成两部分，把任务的第二部份单独写在一个函数里面，等到执行完其它任务重新执行这个任务的时候，就直接调用这个函数，从而达到异步效果。

案例如下：

/**
 * 土豆炖牛肉
 * @param step1 牛肉
 * @param callback 回调
 */
let cook = (step1, callback) => {
    // 1. 煮牛肉
    console.log(`烧水煮${step1}`);
    //  2. 放入土豆(5秒后执行)
    setTimeout(() => {
        let step2 = '放入土豆';
        callback(step2);
    }, 5000)
};

// 1. 先煮牛肉  
cook('牛肉', (data) => {
    console.log(data);
});

// 2. 做其它事, 5s后放入土豆 
console.log('买土豆');
console.log('洗土豆');
console.log('切土豆');

那么，在这一段时间中做什么？
我们可以进行异步操作，比如请求网络数据、耗时运算、读写本地文件等

1) Pending 
   Promise对象实例创建时候的初始状态
2) Fulfilled 
   成功的状态
3) Rejected 
   失败的状态 
比如：你发邮件给老板说要加工资，这时候你就要"等待"他的邮件回复，他可以立马给你回复，如果同意了，表示"成功"；如果不同意，表示"失败"，当然他也可以一直不同意；但是这期间不影响你做其它事情。

在实际开发中，我们可以通过then 方法，来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数(onFulfilled)，reject 时执行第二个函数(onRejected)。

来，一起认识下promise的几种操作方式和常用方法：

构建Promise
//  promise的方法会立刻执行;
//  两个输出都会打印
let promise = new Promise(() => {
     console.log('喜欢IT');
});
console.log('就上撩课');
promise也可以代表未来的一个值
一个promise实例可以多次调用then，当成功后会将结果依次执行。

let  promise = new Promise((resolve, reject) => {
    ajax.get(BASEURL + 'api/goods/', (err, data)=>{
        if (err) return reject(err);
        resolve(data);
    })
});
promise.then(data => {
    console.log(data);
});
promise.then(data => {
    console.log(data);
});
promise也可以代表一个不用返回的值
 // 代表一个用于不会返回的值
let  promise = new Promise((resolve, reject) => { });
promise.then(data => {
    console.log(data);
});
Promise.resolve
返回一个Promise实例，这个实例处于resolve状态。

Promise.resolve('成功获取结果').then(data=>{ 
    console.log(data);
});
Promise.reject
返回一个Promise实例，这个实例处于reject状态。

Promise.reject('获取结果失败').then(data=>{ 
   console.log(data); 
},err=>{ 
console.log(err); 
})
Promise.race
该方法用于接收一个数组，数组内都是Promise实例，返回一个Promise实例，这个Promise实例的状态转移取决于参数的Promise实例的状态变化。

当参数中任何一个实例处于resolve状态时，返回的Promise实例会变为resolve状态。如果参数中任意一个实例处于reject状态，返回的Promise实例变为reject状态。

Promise.race(
    [readFiles('./a.txt')，
    readFiles('./b.txt')]).then(data=>{
    console.log({data})
},(err)=>{
    console.log(err)
});

在一定时间后（假设5s后），老板回复了邮件，可以是以下两种情况:

let addWages = ()=>{
    return new Promise((resolve, reject) => {
        setTimeout(function  ()  {
            // 公司账户余额
            let  currentMoney = 9999999999;
            // 公司账户余额 > 100w
            if (currentMoney > 1000000) {
                resolve('同意加薪');
            } else {
                resolve('不同意加薪');
            }
        }, 5000)
    })
};
addWages().then(data => {
    console.log(data);
}, data => {
    console.log(data);
});

//  运行结果：同意加薪
情况二 ：
公司账户已经没钱，没法加工资了，表现形式如下：

let addWages = ()=>{
    return new Promise((resolve, reject) => {
        throw new Error('你表现不够优秀！');
    })
};
addWages().then(data => {
    console.log(data);
}, data => {
    console.log('这里输出：' + data);
});
我们可以采用then的第二个参数捕获reject返回结果或者捕获失败，当然也可以通过.catch函数进行捕获。

案例场景：在文档a.txt中存放正文档b.txt的路径，在文档b.txt中存放正文档c.txt的路径, 我们要取出文档c.txt里面的内容。

构造函数实现：

/* a.txt -> b.txt -> c.txt -> 输出内容*/
let fs = require('fs');
let readFiles = ()=>{
    // 回调1
    fs.readFile('./a.txt','utf8', (err,data)=>{
        if(err) return console.log(err);
        // 回调2
        fs.readFile(data,'utf8',function(err,data){
            if(err) return console.log(err);
            // 回调3
            fs.readFile(data,'utf8',function(err,data){
                if(err) return console.log(err);
                console.log(data); 
            })
        })
    })
};

/*
调用输出结果：
喜欢IT, 就上撩课(itlike.com) 
*/
readFiles();
通过promise解决回调地狱：

let fs = require('fs');

// 1. 初始化promise
let readFiles =(filePath)=>{
    return new Promise((resolve,reject)=>{
        fs.readFile(filePath,'utf8',(err,data)=>{
            if(err) return reject(err);
            resolve(data);
        })
    })
};

// 2. 类似于链式的调用方式
readFiles('./a.txt').then((data)=>{
    return readFile(data);
}).then((data)=>{
    // 获取b.txt中内容
    return readFile(data);
}).then((data)=>{
    // 输出c.txt中内容
    console.log(data)  
}).catch((err)=>{
    console.log(err)
});
3.2 在同一时刻同步所有异步产生的结果
该场景在实际开发中有很多应用场景，比如：我们要提交一个操作时，需要结合之前的两个异步请求的结果才能进行。

再比如：你要进行下一个运算时，需要前面两个异步运算的结果才能进行。我们还是通过读取文件的案例来进行举例。

常规方式实现：

let fs = require('fs');
// 1. 统一输出所有异步产生的结果
let allContent = {};
let logAllContent = (key,data)=>{
    allContent[key] = data;
    if(Object.keys(allContent).length === 2){
        console.log(allContent)
    }
};

// 2. 分别异步读取文件中的内容
fs.readFile('./a.txt', 'utf8', function (err, data) {
    if (err) return console.log(err);
    logAllContent(data);
});
fs.readFile('./b.txt', 'utf8', function (err, data) {
    if (err) return console.log(err);
    logAllContent(data);
});
这样的方式虽然解决了问题，但是你不知道最终结果是在哪个异步函数中输出，而且你需要在所有的异步函数中都去调用打印方法。

promise方式大大简化：

借助promise.all()方法，不管哪个promise谁先完成，该方法会按照数组里面的顺序将结果返回。

let fs = require('fs');
let readFiles = (filePath)=>{
    return new Promise(function(resolve,reject){
        fs.readFile(filePath,'utf8', (err,data)=>{
            if(err) return reject(err);
            resolve(data);
        })
    })
};

Promise.all(
    [readFiles('./a.txt'), 
     readFiles('./b.txt')]
).then(([data])=>{
    console.log({data})
});