关于javascript:JavaScript-笔记-JavaScript-异步编程

什么是同步异步

从时序来看 (可参看时序图)，程序运行有同步和异步两种模式，那怎么叫同步异步呢？我的总结如下： 程序执行后立刻返回后果(也可能是代码执行)，就是同步模式；没有立刻返回后果，在将来某个时刻才会返回后果，就是异步模式； 各举一个例子：

同步模式 ：你去银行取款，叫到你的号了( 开始执行了 )，通过一系列的手续( 两头柜员在操作系统以及出款等等流程时，你是始终在柜台的 )，要等你取到款了来到柜台( 执行完结)。

异 步模式 ：你去麦当劳吃饭，到你点餐了( 开始执行了 )，下好单付款就能够来到了( 你不须要等到取餐的，局部完结 )，你能够等在旁边，你也能够刷刷手机(这里还有另一个概念：阻塞和非阻塞，本文暂不探讨)，几分钟之后听到叫号了，就过来取餐(整个 完结)。

总结一下关键点：执行后果是否立刻返回。

同步和异步的意义

咱们写的代码中，大部分都是同步代码，比方同步场景：赋值、取值、运算、条件判断等等，异步场景：文件读取、网络拜访、事件等等。我想了个比喻：同步代码是你问我答，异步代码是飞鸽传书。

看起来是同步代码更快，然而，性能调优时咱们常常会思考利用这个策略：同步代码改异步代码，以晋升效率。 那问题来了，什么时候同步，什么时候异步？谁更快？

先剖析一下优劣势：

同步代码： 须要执行实现并拿到后果，才进入下一步，等待时间要看逻辑复杂程度、I/ O 快慢等因素。劣势是调用实现就能够拿到后果，劣势是如果代码比拟耗时，会阻塞代码往下执行；

异步代码： 实现调用执行，即能够进入下一步，后果将来某个时刻取到。优劣势和同步正好相同，劣势是代码比拟耗时时，不会阻塞代码的继续执行，劣势是不能在调用实现时同步拿到后果，并且须要思考如何获取和解决将来的后果。

能够用排除法，先看看哪些须要异步，剩下的就是同步。

• 海量数据运算、慢 I/O，并且不心愿长时间阻塞代码，比方仿真模型的执行、大文件的哈希。
• 分布式应用，心愿进步硬件利用率，把阻塞代码变成异步代码，例如电商零碎中的音讯队列(MQ).
• 不确定工夫的后果，比方网络申请、用户事件，典型例子就是 Ajax 申请。
• 定时工作，比方 setTimeout

以上几种就是比拟常见的异步场景，其余的场景根本同步就能够解决。而谁更快的问题，并不取决于模式，而是要看具体代码的，看计算量大小、看 I/O 快慢等等。

JavaScript 中的同步异步

JavaScript 在晚期时候只是当作浏览器的脚本，随着 Ajax 技术和富利用的风行，JavaScript 成为了 Web 开发 的外围组成，异步模式也利用越来越多，语言层面的反对也越来越丰盛了。

还是排除法，咱们这里只看JavaScript 中的几种异步模式，每一种异步模式都有本人的特点，强力举荐浏览《你不晓得的 JavaScript（中卷）》第二局部内容。

回调函数

在 Promise 之前，异步只能用回调函数实现。回调是最早应用，也是用得最多的异步模式，有些同学可能都没意识到它是异步的，问什么是异步。看示例：

function getText(url, success) {const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {if (this.readyState !== 4) return; 
    if (this.status == 200) {success(this.responseText);
    } else {throw new Error(this.statusText);
    }
  };
  xhr.open('GET', url, true);
  xhr.send();}

getText('/demo/hello.txt', function success(responseText) {console.log(responseText);
});

这个就是最简略的基于回调函数的异步代码，一个根底的 ajax 实现，getText 调用实现时没有返回数据，数据是在回调函数 success 在将来获取。

回调函数在 web 1.0 期间是够用的，到了 web 2.0 富利用呈现后，有很多的不不便之处：回调天堂、代码程序问题、信赖问题等等。

Promise

ES6 提供了 Promise 和 微工作 反对，让异步模式应用更加不便和高效。

其实 Promise 也是一种回调，大家能够看 ES5 模仿实现，然而有个重要的区别：ES6 之后的 Promise resolve 后，会退出微工作队列，细节能够去查阅 微工作 相干主题。

来个 Promise 的比照示例(能够比照下面的回调函数看看)：

function getTextPromise(url) {return new Promise(function (resolve, reject) {const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {if (this.readyState !== 4) return; 
      if (this.status == 200) {resolve(this.responseText);
      } else {reject(new Error(this.statusText));
      }
    };
    xhr.open('GET', url, true);
    xhr.send();});
}

getTextPromise('/demo/hello.txt')
.then((responseText) => {console.log(responseText);
});

乍一看，感觉和回调函数差不多。简略场景下的确就是差不多的，只不过回调函数不在参数外面，而是在链式办法 then 的参数外面。然而当场景简单之后，就能体现出 Promise 的劣势。

// 多个申请程序执行
getTextPromise('/demo/hello.txt')
.then((responseText) => {console.log(responseText);
    return getTextPromise('/demo/my.txt');
})
.then((responseText) => {console.log(responseText);
    return getTextPromise('/demo/world.txt');
})
.then((responseText) => {console.log(responseText);
});

// 多个申请并发
Promise.all([getTextPromise('/demo/hello.txt'),
 getTextPromise('/demo/my.txt'), getTextPromise('/demo/world.txt')])
.then(([responseText1, responseText2, responseText3]) => {console.log(responseText1, responseText2, responseText3);
});

// 多个申请竞争
Promise.race([getTextPromise('/demo/hello.txt'),
 getTextPromise('/demo/my.txt'), getTextPromise('/demo/world.txt')])
.then((responseText) => {console.log(responseText);
});

简单场景用 Promise 会优雅和易读很多，不会有回调天堂，且代码程序合乎失常思维习惯，还有更多其余长处：不会屡次调用，良好的错误处理机制等等。

生成器(Generator)

ES6 另外还新增了一个异步工具：生成器，见上面示例(摘录自 MDN)：

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// expected output: 10

console.log(gen.next().value);
// expected output: 20

生成器函数执行过程中能够暂停和复原，暂停时能够拿到 yield 值，复原时还能够传值。

生成器的特点是：

• 能够让生成器函数的语句暂停，同时放弃以后状态。
• 能够屡次暂停，这个和 Promise 不太一样，Promise 只有未实现和已实现 (分胜利和失败) 状态。
• 生成器函数会返回一个迭代器，通过迭代器控制代码复原执行和传值。

生成器的劣势是：放弃异步代码的程序，看起来和阻塞的同步代码一样。举一个最常见的利用场景：ID 生成器。还有很多高级用法，还是举荐浏览《你不晓得的 JavaScript（中卷）》。

async/await

ES7 又减少了一个异步语法：async/await，其实是个语法糖，让咱们更不便地应用 Promise，益处相似于生成器：让异步代码看起来和阻塞的同步代码一样，有失常的逻辑程序。

function getTextPromise(url) {return new Promise(function (resolve, reject) {const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {if (this.readyState !== 4) return; 
      if (this.status == 200) {resolve(this.responseText);
      } else {reject(new Error(this.statusText));
      }
    };
    xhr.open('GET', url, true);
    xhr.send();});
}

async function asyncCall() {console.log('calling');
  const result1 = await getTextPromise('/demo/hello.txt');
  console.log(result1);
    const result2 = await getTextPromise('/demo/world.txt');
  console.log(result2);
    console.log('calling end');
}

asyncCall();

async/await 之后，Promise 对象就无需应用 then 办法链来获取异步后果了，异步写法变成了同步写法，合乎咱们失常的逻辑思考程序。

小结

异步模式的外围就是 把当初和未来连接起来，解决好它们的关系 。学会了下面几种异步模式，你就对 Javascript 异步编程有了根本的意识了，最初： 多多实际和总结。