javascript - Que signifie écrire de manière asynchrone et synchrone?

Question

La synchronisation n'est-elle pas simplement de la synchronisation, et l'asynchrone n'est-il pas simplement asynchrone ? Que signifie écrire de manière asynchrone de manière synchrone ?

Answer 1

Les appels asynchrones ne sont pas bloquants pour le thread actuel, donc si vous souhaitez savoir si le traitement asynchrone est terminé ou si une erreur s'est produite, cela se fait généralement via des événements ou des rappels, qui sont courants dans Node.js. Ajax est un appel asynchrone très typique, prenez jQuery.ajax comme exemple

$.getJSON("http://api.youapp.com/resouce1")
    .done(function(jo) {
        console.log("api resouce1 返回的是", jo);
    });

L'Ajax de jQuery renvoie l'objet Promise de jQuery. Généralement, nous utiliserons done() 回调来处理调用完成之后的事情。但实际它也有标准 Promise 的 then()，所以上面的 done 是可以改成 then 的，但是要注意，done 是以事件的形式注册回调，它返回当前这个 Promise 对象本身，可以链式调用注册若干个回调。而 then pour renvoyer un autre objet Promise (spécification Promise standard). Si l'appel est chaîné, chaque appel n'agit pas sur le même objet Promise.

Si vous devez passer un autre appel asynchrone dans un rappel, vous devez enregistrer un autre rappel dans le rappel. Par exemple, pour obtenir certaines données, vous devez d'abord obtenir une certaine valeur de api1, puis utiliser cette valeur pour obtenir une certaine ressource de api2, puis utiliser une certaine valeur dans cette ressource pour obtenir cette valeur de api3. ressemblerait à ceci une fois écrit :

$.getJSON("http://api.youapp.com/resouce1")
    .then(function(jo) {
        $.getJSON("http://api.youapp.com/resouce2?id=" + jo.blaId)
            .then(function(jo2) {
                $.getJSON("http://api.youapp.com/resouce3?xxx=" + jo2.xxxValue)
                    .then(function(value) {
                        console.log("总算拿到了", value);
                    });
            });
    });

Ce n'est que le troisième niveau... une forme très effrayante. Ce formulaire est appelé « l’enfer des rappels ».

Tout le monde a pensé à de nombreuses façons de résoudre ce problème, Promise en fait partie, mais Promise ne parvient toujours pas à se débarrasser complètement de ce formulaire. La colibrairie fait également partie des solutions, mais elle ne peut être totalement éliminée.

Cependant, ES2017 a introduit async/await, qui est ce qu'on appelle l'écriture asynchrone sous une forme synchrone. Par exemple, le code ci-dessus peut être réécrit comme

.

async function xxx() {
    const jo = await $.getJSON("http://api.youapp.com/resouce1");
    const jo2 = await $.getJSON("http://api.youapp.com/resouce2?id=" + jo.blaId);
    const value = await $.getJSON("http://api.youapp.com/resouce3?xxx=" + jo2.xxxValue);
    console.log("总算拿到了", value);
}

async/await élimine les rappels, cela ressemble donc à l'écriture de code non asynchrone (c'est-à-dire synchrone).

Référence :

• Parlez de « l’aplatissement » des appels asynchrones

• De l'enfer au paradis, le rappel du nœud devient async/await

• Comprendre l'async/await de JavaScript

Answer 2

Il est courant d'imbriquer les fonctions de rappel lorsqu'elles sont asynchrones, sous la forme de :

// 先读取 a
fs.readFile('a.txt', (a) => {
  // a 读取成功后读取 b
  fs.readFile('b.txt', (b) => {
    // b 读取成功后读取 c
    fs.readFile('c.txt'. (c) => {
      console.log(a + b + c)
    })
  })
})

À ce stade, une imbrication de rappel apparaît, qui doit être imbriquée couche par couche, ce qui est très sujet aux erreurs et difficile à maintenir.

L'écriture asynchrone en mode synchrone est similaire à :

function * asyncWrapper () {
  const a = yield read('a.txt')
  const b = yield read('b.txt')
  const c = yield read('c.txt')
  console.log(a + b + c)
}
// 使用形如 co 的库自动执行异步逻辑
co(asyncWrapper)

À l'heure actuelle, la logique métier asynchrone est implémentée via une synchronisation normale.

Answer 3

L'écriture asynchrone de manière synchrone fait référence à la forme d'organisation du code. Vous pouvez utiliser async/await pour écrire de manière asynchrone de manière synchrone, voir le code suivant :

const testAsync = async () => {
  const t = await f();
  console.log(t);
};

testAsync();

f是一个异步操作，如果不使用async/await,直接同步的方式打印t,结果肯定是undefined ; Après avoir utilisé async/await, le code semble toujours synchrone, mais à l'intérieur, il exécute d'abord l'opération asynchrone f, puis imprime t

Answer 4

Les deux réponses ci-dessus suffisent