Quelles sont les méthodes de fonctionnement asynchrone en javascript ?

Les méthodes de fonctionnement asynchrones de JavaScript incluent : 1. Fonction de rappel ; 2. Écoute des événements ; 3. Mode "Publier/S'abonner" ; 5. Générateur ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce que le fonctionnement asynchrone ?

　 Le mode asynchrone n'est pas difficile à comprendre. Par exemple, les tâches A, B, C, exécutent A puis exécutent B, mais B est un travail qui prend du temps, alors mettez B dans la file d'attente des tâches, exécutez C, puis exécutez C, puis exécutez B. some of B Une fois que les E/S ont renvoyé le résultat, exécutez B. Il s'agit d'une opération asynchrone.

Pourquoi JavaScript a-t-il besoin d'opérations asynchrones ?

　L'environnement d'exécution du langage JavaScript est « monothread ». Ce qu'on appelle un seul thread signifie qu'une seule tâche peut être effectuée à la fois. S'il y a plusieurs tâches, elles doivent être mises en file d'attente une fois qu'une est terminée. , passez à la suivante. Cette méthode est en termes de mise en œuvre. C'est très simple, mais Si une tâche prend beaucoup de temps, les tâches suivantes devront être mises en file d'attente, ce qui retardera l'exécution de l'ensemble du programme. Une insensibilité du navigateur (fausse mort) est courante car un certain morceau de code JavaScript s'exécute pendant une longue période (comme une boucle infinie), ce qui provoque le gel de la page entière et d'autres tâches ne peuvent pas être exécutées.

　Afin de résoudre ce problème, le langage JavaScript divise les modes d'exécution des tâches en deux types : Synchrone et Asynchrone.

　　L'ordre d'exécution des tâches synchrones est le même que l'ordre de mise en file d'attente, tandis que les tâches asynchrones nécessitent une ou plusieurs fonctions de rappel Une fois la tâche précédente terminée, au lieu d'exécuter la tâche suivante, la fonction de rappel est exécutée. . Cette dernière tâche est exécutée après avoir attendu la fin de la tâche précédente, donc l'ordre d'exécution du programme est incompatible avec l'ordre des tâches et est asynchrone.

　Le mode asynchrone est très important. Du côté du navigateur, les opérations de longue durée doivent être exécutées de manière asynchrone pour éviter que le navigateur ne perde la réponse. Le meilleur exemple est l'opération ajax. Du côté du serveur, l'opération asynchrone est même le seul moyen. , étant donné que l'environnement d'exécution est monothread, si toutes les requêtes http peuvent être exécutées de manière synchrone, les performances du serveur chuteront fortement et il perdra bientôt la réponse.

Plusieurs types d'opérations asynchrones en JavaScript.

　 Les méthodes de programmation asynchrone en JavaScript sont :

• fonction de rappel
• écoute d'événements
• publication/abonnement
• promesse
• générateur (ES6)
• async/await (ES7)

Laissez-moi vous présenter ceux-ci séparément. Plusieurs méthodes asynchrones :

1. Fonction de rappel

　 La fonction de rappel est la méthode la plus basique de la programmation asynchrone. Supposons qu'il y ait trois fonctions f1, f2, f3, f2 doit attendre le résultat de l'exécution de f1, et f3 est indépendant et n'a pas besoin des résultats de f1 et f2 Si nous l'écrivons de manière synchrone, cela. ressemblera à ceci :

　　f1();
　　f2();
　　f3();

　Si f1 s'exécute rapidement, c'est OK mais si f1 s'exécute très lentement, alors f2 et f3 seront bloqués et ne pourront pas être exécutés ; Cette efficacité est très faible. Mais nous pouvons le réécrire et écrire f2 comme fonction de rappel de f1, comme suit :

　　function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　callback();
　　　　}, 1000);
　　}

Alors le code d'exécution à ce moment sera comme ceci :

f1(f2);
f3();

De cette façon, c'est une exécution asynchrone, même si f1 prend beaucoup de temps, mais parce qu'il est asynchrone, alors f3() sera exécuté rapidement sans être affecté par f1 et f2.

Remarque : Et si on écrivait f1 comme ça ?

function f1(callback){
　　// f1的任务代码
　　callback();
}

　Alors, on peut aussi appeler comme ceci :

f1(f2);
f3()

　Est-ce toujours asynchrone à ce moment-là ? Réponse : Pas asynchrone. La fonction de rappel ici n'est pas une véritable fonction de rappel. Si la fonction setTimeout n'est pas utilisée, l'exécution de f3() doit également attendre que f1(f2) soit complètement exécutée Faites attention ici. Et nous utilisons setTImeout pour créer une véritable fonction de rappel.

2. Surveillance des événements

　Une autre idée asynchrone consiste à utiliser le mode piloté par les événements. L'exécution d'une tâche ne dépend pas de l'ordre du code, mais de la survenance d'un événement. Prenons f1, f2 et f3 comme exemple. Tout d'abord, lier un événement à f1 (jquery est utilisé ici) :

f1.on('done', f2);
f3()

Cela signifie que lorsque l'événement terminé se produit dans f1, f2 est exécuté. Ensuite, nous réécrivons f1 :

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码　　　　　　
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

　f1. done') signifie qu'une fois l'exécution terminée, l'événement done sera immédiatement déclenché pour commencer l'exécution de f2.

　 L'avantage de cette méthode est qu'elle est plus facile à comprendre. Elle peut lier plusieurs événements, et chaque événement peut spécifier plusieurs fonctions de rappel. Elle peut également être découplée, ce qui favorise la modularisation. le programme doit changer. S’il devient piloté par des événements, le processus en cours deviendra très flou.

三、发布/订阅

　　第二种方法的事件，实际上我们完全可以理解为“信号”，即f1完成之后，触发了一个 'done'，信号，然后再开始执行f2。

　　我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”这个信号， 从而知道什么时候自己可以开始执行。 这个就叫做“发布/订阅模式”， 又称为“观察者”模式 。

　　这个模式有多种实现， 下面采用Ben Alman的Tiny PUb/Sub，这是jQuery的一个插件。

　　首先，f2向"信号中心"jquery订阅"done"信号，

jQuery.subscribe("done", f2);

　　然后，f1进行如下改写：

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码　　　　　　
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

　　jquery.pushlish("done")的意思是： f1执行完成后，向“信号中心”jQuery发布“done”信号，从而引发f2的执行。

　　此外，f2完成执行后，也可以取消订阅（unsubscribe）。

　jQuery.unsubscribe("done", f2);

　　这种方法的性质和“事件监听”非常类似，但是明显是优于前者的，因为我们可以通过查看“消息中心”，了解到存在多少信号、每个信号有多少个订阅者，从而监控程序的运行。

四、promise对象

　　promise是commonjs工作组提出来的一种规范，目的是为异步编程提供统一接口。

　　简答的说，它的思想是每一个异步任务返回一个promise对象，该对象有一个then方法，允许指定回调函数。 比如,f1的回调函数f2，可以写成：

f1().then(f2);

　　f1要进行下面的改写（这里使用jQuery的实现）：

　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

　　这样的优点在于，回调函数编程了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现很多强大的功能 。

　　如：指定多个回调函数：

　f1().then(f2).then(f3);

　　再比如，指定发生错误时的回调函数：

f1().then(f2).fail(f3);

　　而且，他还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。　所以，你不用担心是否错过了某个事件或者信号，这种方法的确定就是编写和理解，都比较困难。　

五、generator函数的异步应用

　 　在ES6诞生之前，异步编程的方法，大致有下面四种：

• 回调函数
• 事件监听
• 发布/订阅
• promise对象

　　 没错，这就是上面讲得几种异步方法。 而generator函数将JavaScript异步编程带入了一个全新的阶段！

　　　比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。

　　 相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。

协程

　　传统的编程语言中，早就有了异步编程的解决方案，其中一种叫做协程，意思是多个线程互相协作，完成异步任务。

　　协程优点像函数，又有点像线程，运行流程如下：

• 第一步，协程A开始执行。
• 第二步，协程A执行到一半，进入暂停，执行权转移到协程B。
• 第三步，（一段时间后）协程B交还执行权。
• 第四步，协程A恢复执行。

　　上面的协程A，就是异步任务，因为它分为两段（或者多段）执行。

　　举例来说，读取文件的协程写法如下：

function *asyncJob() {
  // ...其他代码
  var f = yield readFile(fileA);
  // ...其他代码
}

　　上面代码的函数asyncJob是一个协程，奥妙就在于yield命令， 它表示执行到此处，执行权交给其他协程，也就是说yield命令是异步两个阶段的分界线。

　　协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续向后执行，它的最大优点就是代码的写法非常像同步操作，如果去除yield命令，简直是一模一样。

协程的Generator函数实现

　　Generator函数是协程在ES6中的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

　　整个Generator函数就是一个封装的异步任务，或者说异步任务的容器。 异步任务需要暂停的地方，都用yield语句注明。 如下：

function* gen(x) {
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

　　在调用gen函数时 gen(1)， 会返回一个内部指针（即遍历器）g。 这是Generator函数不同于普通函数的另一个地方，即执行它（调用函数）不会返回结果， 返回的一个指针对象 。调用指针g的next方法，会移动内部指针（即执行异步任务的第一阶段），指向第一个遇到的yield语句，这里我们是x + 2，但是实际上这里只是举例，实际上 x + 2 这句应该是一个异步操作，比如ajax请求。 换言之，next方法的作用是分阶段执行Generator函数。每次调用next方法，会返回一个对象，表示当前阶段的信息（value属性和done属性）。 value属性是yield语句后面表达式的值，表示当前阶段的值；done属性是一个布尔值，表示Generator函数是否执行完毕，即是否还有下一个阶段。

Generator函数的数据交换和错误处理

　　Generator 函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。

　　next返回值的value属性，是 Generator 函数向外输出数据；next方法还可以接受参数，向 Generator 函数体内输入数据。

function* gen(x){
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

　　上面代码中，第一next方法的value属性，返回表达式x + 2的值3。第二个next方法带有参数2，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量y接收。因此，这一步的value属性，返回的就是2（变量y的值）。

Generator 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。

function* gen(x){
  try {
    var y = yield x + 2;
  } catch (e){
    console.log(e);
  }
  return y;
}

var g = gen(1);
g.next();
g.throw('出错了');
// 出错了

上面代码的最后一行，Generator 函数体外，使用指针对象的throw方法抛出的错误，可以被函数体内的try...catch代码块捕获。这意味着，出错的代码与处理错误的代码，实现了时间和空间上的分离，这对于异步编程无疑是很重要的。

异步任务的封装

　　下面看看如何使用 Generator 函数，执行一个真实的异步任务。

var fetch = require('node-fetch');

function* gen(){
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}

　　上面代码中，Generator 函数封装了一个异步操作，该操作先读取一个远程接口，然后从 JSON 格式的数据解析信息。就像前面说过的，这段代码非常像同步操作，除了加上了yield命令。

　　执行这段代码的方法如下。

var g = gen();
var result = g.next();

result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});

　　上面代码中，首先执行 Generator 函数，获取遍历器对象，然后使用next方法（第二行），执行异步任务的第一阶段。由于Fetch模块返回的是一个 Promise 对象，因此要用then方法调用下一个next方法。

　　可以看到，虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。

　　如下：

function* gen(x) {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}
var a = gen();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

　　最终，打印台输出

即开始调用gen()，并没有真正的调用，而是返回了一个生成器对象，a.next()的时候，执行第一个yield，并立刻暂停执行，交出了控制权； 接着，我们就可以去a.next() 开始恢复执行。。。 如此循环往复。　　

每当调用生成器对象的next的方法时，就会运行到下一个yield表达式。 之所以称这里的gen（）为生成器函数，是因为区别如下：

• 普通函数使用function来声明，而生成器函数使用 function * 来声明。
• 普通函数使用return来返回值，而生成器函数使用yield来返回值。
• 普通函数式run to completion模式 ，即一直运行到末尾； 而生成器函数式 run-pause-run 模式， 函数可以在执行过程中暂停一次或者多次。并且暂停期间允许其他代码执行。

async/await

　　async函数基于Generator又做了几点改进：

• 内置执行器，将Generator函数和自动执行器进一步包装。
• 语义更清楚，async表示函数中有异步操作，await表示等待着紧跟在后边的表达式的结果。
• 适用性更广泛，await后面可以跟promise对象和原始类型的值(Generator中不支持)

　　很多人都认为这是异步编程的终极解决方案，由此评价就可知道该方法有多优秀了。它基于Promise使用async/await来优化then链的调用,其实也是Generator函数的语法糖。 async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

　　await得到的就是返回值，其内部已经执行promise中resolve方法，然后将结果返回。使用async/await的方式写回调任务：

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

dolt();

　　可以看到，在使用await关键字所在的函数一定要是async关键字修饰的。

　　功能还很新，属于ES7的语法，但使用Babel插件可以很好的转义。另外await只能用在async函数中，否则会报错。

【相关推荐：javascript学习教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!