前端关于异步问题

传统方式
回调函数
事件
前端异步流程工具 【 封装出来函数、库 】
es6 Promise
es6 Generator函数
es6 - es8 async 函数
Node中的异步处理工具： nextTick setImmediate
第三方类库： async.js
下面我们将介绍一些当前流行的异步工具

**

## // es6 Promise

** 
const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('任务一');
    }, 1000)
}).then((data) => {
    console.log(data);
}).catch((error) => {
    if (error) throw error;
})
const p2 = new Promise((resolve, reject) => {
    resolve('任务二');
}).then((data) => {
    console.log(data);
}).catch((error) => {
    if (error) throw error;
})
// Promise.all([p1, p2]).then((result) => {
//     return result;
// })

console.log('主线程任务');

Promise.race([p1, p2]) //简写

 **## 第三方类库： async.js**
//注意：第三方类库脱离延时器时，就没有异步效果了
//数组中不管一个还是俩个加延时器，都是需要执行最长事件的延时器的时间的，用此方法执行异步不太理想
const { parallel, series } = require('async');
series([
    function(callback) {
        setTimeout(() => {
            callback(null, '任务一')
        }, 2000)
    },
    function(callback) {
        callback(null, '任务二')
    }
], function(error, result) {
    console.log(result);
})

// parallel([
//     function(callback) {
//         //setTimeout(() => {
//         callback(null, '任务三');
//         //}, 2000)
//     },
//     function(callback) {
//         callback(null, '任务四');
//     }
// ], function(error, result) {
//     console.log(result);
// })

console.log('主线程任务')

## Node中的异步处理工具： nextTick setImmediate

//调用next方法后，函数内执行第一条yield语句，输出当前的状态done（迭代器是否遍历完成）以及相应值（一般为yield关键字后面的运算结果）

//每调用一次next，则执行一次yield语句，并在该处暂停，return完成之后，就退出了生成器函数，后续如果还有yield操作就不再执行了

process.nextTick(function() {
    console.log('任务二');
});

setImmediate(function() {
    console.log('任务一');
})

## es6 Generator函数

function* p1() {
    yield '任务一';
    yield '任务二';
    yield '任务三';
}

const task = p1();

console.log(task.next())
console.log(task.next())
console.log(task.next())
console.log(task.next())

**

## es6 - es8 async 函数

**

async function p1() {
    const result = await '任务一'
    return result;
}

async function p2() {
    const result = await '任务二'
    return result;
}

console.log(p1().then(res => console.log(res)));
console.log(p2().then(res => console.log(res)));

console.log(' 主线程')