关于javascript:实现JS异步的多种方案详解

咱们都晓得 js 是属于单线程执行的，单线程及代表程序中的所有工作都按程序顺次执行，在代码体量小，运行场景繁多的状况下并不会裸露问题，然而，当其中一个工作执行中，上面的工作都无奈失去执行，给客户端展现出的样子就是浏览器卡住，或者是‘假死’，这样显然是行不通的。

为解决以上问题，Javascript 语言将工作的执行模式分成两种：同步和异步。上面咱们就来梳理下 异步 的多种实现形式吧。

同步工作是指在主线程上排队执行的工作，只有前一个工作执行结束，能力继续执行下一个工作，当咱们关上网站时，网站的渲染过程，比方元素的渲染，其实就是一个同步工作。

异步工作是指不进入主线程，而进入工作队列的工作，只有工作队列告诉主线程，某个异步工作能够执行了，该工作才会进入主线程，当咱们关上网站时，像图片的加载，音乐的加载，其实就是一个异步工作

function fun1() {console.log(1);
}
function fun2() {console.log(2);
}
function fun3() {console.log(3);
}
fun1();
setTimeout(function(){fun2();
},0);
fun3();
 
// 输入
1
3
2

JavaScript 的执行过程中，先按程序执行程序中的同步工作，当遇到异步工作时，将异步工作增加到异步队列中，持续执行程序中的同步工作；

当同步工作执行实现，进入到异步队列中执行，优先执行排在后面的工作，将工作放入执行栈中；

每当执行栈工作被清空，都会去异步队列中查找工作，直到有新工作增加，以此往返，这被称作工作循环，因为每一个工作都是由事件触发，所以又称作 事件循环；

1、所有同步工作都在主线程上执行，行成一个执行栈
2、主线程之外，还存在一个工作队列，只有异步工作有了后果（与主线程同时进行），就会在工作队列中搁置一个事件
3、一旦执行栈中的所有同步工作执行结束，零碎就会读取工作队列（event queue），看看外面还有哪些事件，那些对应的异步工作，于是完结期待状态，进入执行栈，开始执行
4、主线程一直的反复下面的第三步

在上图中的异步执行过程中，在异步队列中有多种异步形式，如：ajax()、setTimeout()、onClick()、Promise()，其中 ajax()、setTimeout()、onClick()这些都是通过回调函数来实现的异步的；

Promise 则是 ES6 提供的异步实现形式；

不同的异步形式执行程序也是不同的，这块波及到了咱们的 宏工作 和微工作 ，其 微工作 都是优先于 宏工作 执行的；

上面咱们一起来看下 JS 的多种异步的实现形式。

回调函数大家都不生疏，例如 dom 增加事件监听，定时器异步

element.addEventListener('click',function(){//response to user click});
setTimeout(function(){//do something 1s later}, 1000);

callBack(function(){callBack1(function(){callBack2(function(){callBack3(function(){
        ...
        ...
      })
        })
  })
})

回调函数的形式不适用于简单的业务逻辑中，回调函数之间的嵌套层级太多就容易进入回调天堂，不利于代码的浏览和解耦和保护；

E6 提供的 Promises 对象是 CommonJS 工作组提出的一种标准，目标是为异步编程提供对立接口。

Promise 是 js 异步编程的解决方案，Promise 是一个对象，外部会存在一个异步操作，Promise 对象提供对立的 api 来获取异步操作的后果。

const promise = new Promise(function(resolve, reject) {
  // ... some code
    // 执行异步操作
  // ...
  if (/* 异步操作胜利 */){resolve(value);
  } else {reject(error);
  }
});

promise.then(function(value) {
  // success
  // return other promise 嵌套回调
}, function(error) {// failure})
.then(function(data){// success});

援用官网流程示例：

流程解析：创立 Promise 对象，传入一个立刻执行函数executor，将 resolved 和 rejected 办法作为参数传入，初始状态为“pending”，异步执行实现触发 Promise 对象的 then 办法，将传入 resolved 和 rejected 做为参数传入，如果拿到 resolved，则执行 resolved()，状态变为“resolved”，失败或者被回绝触发 rejected()，状态变为“rejected”；

应用 Promise，能够将异步操作以同步操作的流程表达出来，防止了层层嵌套的回调函数；

上面咱们看一下 setTimeout 和 promise 工作执行程序：

let promise = new Promise(function(resolve, reject){console.log("1");
    resolve();});
setTimeout(()=>console.log("2"), 0);
promise.then(() => console.log("3"));
console.log("4");
// 输入
// 1,4,3,2

let promise = new Promise(function(resolve, reject){console.log("1");
  resolve();});
setTimeout(()=>console.log("2"), 0);
promise.then(() => {console.log("5");setTimeout(()=>{console.log("3")},100)});
console.log("4");
// 1,4,5,2,3

注：这块波及到工作队列分为宏工作和微工作队列，执行栈清空后会优先去查找微工作队列，没有的话才去查找宏工作队列；

思考流程：

遍历执行栈，查找到 1，7，执行栈清空，去查找微工作：6，8，执行栈清空，再次查找微工作：无，查找宏工作：2，4，执行栈清空，查找微工作：3，5，执行栈清空，查找微工作：无，查找宏工作：9，11，执行栈清空，查找微工作：10，12

1、Promise.resolve() 有时须要将现有对象转为 Promise 对象，这个办法就起到这个作用

2、Promise.reject() 也是返回一个 Promise 对象, 状态为 rejected

3、then()

4、catch() 产生谬误的回调函数

5、Promise.all() 适宜用于所有的后果都实现了才去执行 then()胜利的操作，相当于且

6、Promise.race() // 实现一个即可，相当或

Promise 性能诚然弱小，然而仍旧无奈解脱一旦函数开始执行，就必须等到所有工作执行结束才完结。

ES6 中新增了 generator 函数，不同于一般的函数，它具备如下特点：

（1）分段执行：generator 函数容许在运行的过程中暂停一次或屡次，随后再复原运行。暂停的过程中容许其它的代码执行。

（2）yield 暂停 ：一般函数在开始的时候获取参数，在完结的时候return 一个值，而 generator 函数能够在每次 yield 的时候返回值，并且在下一次重新启动的时候再传入值。

（3）next()继续执行：将上次 yield 返回的值作为参数传入继续执行。

应用语法：

// 在 function name 前加 * 标识是 generator 函数，通过调用 next()办法
function *foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}
var it = foo();
console.log(it.next()); // {value:1, done:false}
console.log(it.next() ); // {value:2, done:false}
console.log(it.next() ); // {value:3, done:false}
console.log(it.next() ); // {value:4, done:false}
console.log(it.next() ); // {value:5, done:false}
console.log(it.next() ); // {value:undefined, done:true}

注：每次遍历到关键字 yield 就执行 return 返回 yield 前面的值；

function *foo(x) {var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo(5);

// 留神这里在调用 next()办法时没有传入任何值
console.log(it.next() );       // {value:6, done:false}
console.log(it.next( 12) );   // {value:8, done:false}
console.log(it.next( 13) );   // {value:42, done:true}

注：next 传入的值是上一次 yield 上次 return 的值

首次遍历到 yield return yield(x+1)，x 的值为调用 it 时传入的参数；

再次遍历时，next 传入 12，代表上一次 yield(x+1)=12;y=2*12；遇到 yield(24/3)，return 8；

第三次遍历，next 传入 13，代表上一次 yield(y/3)=13，则 z =13，x+y+z=5+24+13 = 42，所以 return42；

以上内容只是对 Generator 函数做了一个高级的解说，有趣味的能够深入研究下它的语法糖，Generator 函数是比 Promise 写法略微迷信的一种写法，能够暂定能够持续，解决起来异步更加人性化，当然了，async/await 写法才是终极大法。

ES7 的语法糖，咱们来依据名字看下，async能够了解为异步，await了解为期待异步，那么它的劣势是什么呢？

下面讲过，咱们用 Promise 的.then()来解决多步链式回调的问题，每一步回调都依赖上一次返回的值，走到这里，是不是想起下面讲过的 Generator 函数的.next()，对于比拟简洁的单层链式调用，用户可能不会有太大困惑，然而对于 n 级回调的状况下，如果是 Promise 的话是如何书写的呢，让咱们参考下这个小例子：

Promise 写法：

function doIt() {console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

下面的写法相较于回调嵌套来说必定是可视化水平更高，然而联合了 Promise 和Generator劣势的 async/await 是如何优化的呢？

async/await 写法：

async function doIt() {console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

比照两个例子是不是觉的 Promise 的传递参数特地麻烦，async/await 它的外部封装了 Promise 和 Generator 的组合应用形式，代码构造更清晰，更加语义化，在简单的回调中劣势很显著，从代码的可读性到开发的便捷性都有了很大的晋升；

语法分析

async 和 await 的用法有一个标准，就是 await 要放到 async 中来期待执行，第一次看到这，感觉比拟奇怪，开始我认为 async 和 await 应该是同级的，那上面咱们具体来看下为什么要依照这种标准走：

async function testAsync() {return "hello async";}

const result = testAsync();
console.log(result);

通过下面的代码示例，咱们输入了这个 async，发现输入的是一个 Promise 对象，此时它的状态为“resolved”，在 resolved 办法中输入了异步 return 的值，原理用的还是咱们的 Promise 办法，以后的 await 相当于 Promise.then()中执行的回调 resolved()；

如果想要深刻去理解 async/await，能够联合 Promise 和 Generator 手动实现一个 async/await。

以上内容都是对各种异步实现形式的一个简略的解说，感兴趣的同学能够持续深入研究它们的实现形式及原理，异步有多种实现形式，这些形式并没有说哪种最好，在理论业务开发中还是要联合不同的场景来抉择不同的实现形式，最终的目标是只有使用方便，可读性强，便于保护。

关于javascript:实现JS异步的多种方案详解

前言

同步工作

异步工作

异步的执行

异步的实现形式

回调函数(callBack)

promise

宏工作和微工作的小测试

Promise api

Generators

async/await

总结