Mając taką prostą aplikację JS:

index.html:

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>

    <script src="src/js1.js"></script>
    <script src="src/js2.js"></script>
  </body>
</html>

js1.js:

async function myDisplay() {
  let myPromise = new Promise(function (myResolve, myReject) {
    setTimeout(function () {
      myResolve("I love You 1 !!");
    }, 4000);
  });
  document.getElementById("app3").innerHTML = await myPromise;
  document.getElementById("app4").innerHTML = "myDisplay 1";
}

myDisplay();

js2.js:

function myDisplay2() {
  let myPromise = new Promise(function (myResolve, myReject) {
    setTimeout(function () {
      myResolve("I love You 2 !!");
    }, 2000);
  }).then(function (resp) {
    document.getElementById("app1").innerHTML = resp;
  });
  document.getElementById("app2").innerHTML = "myDisplay2";
}

myDisplay2();

Dlaczego funkcja myDisplay za pomocą słowa kluczowego {{x1} w skrypcie js1.js musi zostać zadeklarowany jako async podczas funkcji myDisplay2 w Skrypt js2.j nie ma?

0
Daros911 14 kwiecień 2021, 19:29

1 odpowiedź

Najlepsza odpowiedź

Wewnątrz JS1.IS funkcja wykonuje obietnicę, która jest asynchroniczna i chcesz, aby czekać na wynik obietnic:

document.getElementById("app3").innerHTML = await myPromise;

W tym momencie funkcja zatrzyma się i czeka na zakończenie "mypromise" (rozwiązać lub odrzucić). Więcej na: https://developer.mozilla.org/fr / Dokumenty / Web / JavaScript / Referencje / Operatorzy / Czeka

Funkcja w języku JS2.js nie wykonuje kodu, który blokuje jego wykonanie, MyDisplay2 można wykonać w sposób synchroniczny, wynik obietnicy zostanie wykonany później (jeśli obietnica postanowiono) w:

.then(function (resp) { document.getElementById("app1").innerHTML = resp; });

Aby skrócić, gdy tylko użyjesz "czekać" funkcję jest "async".

1
Coolhand 14 kwiecień 2021, 16:42