Eine kurze Diskussion über die drei Hauptprobleme von JS: Asynchronität und Single-Thread

Einzelner Thread

Wenn wir jedoch während der Entwicklung auf Netzwerkanforderungen oder geplante Aufgaben stoßen und warten, bis die Netzwerkanforderung oder die geplante Aufgabe beendet ist, bevor wir andere Dinge tun, bleibt die Seite hängen. Daher verfügt js über einen asynchronen Mechanismus, um dieses Problem zu lösen.

asynchron

Das Merkmal der Asynchronität besteht darin, dass sie die Ausführung des nachfolgenden Codes nicht blockiert. Die asynchrone Aufgabe wird ausgeführt, nachdem die synchrone Aufgabe abgeschlossen ist. Im Gegensatz dazu blockiert die Synchronisierung die Codeausführung. Zu den Anwendungen asynchroner Aufgaben gehören hauptsächlich Netzwerkanforderungen und geplante Aufgaben.

Asynchronität wird durch Rückrufe erreicht, und asynchron ausgeführter Code wird in Rückrufen ausgeführt. Es gibt jedoch einige Szenarien, z. B. haben wir drei Netzwerkanforderungen abc, die nacheinander ausgeführt werden müssen. Initiieren Sie Anforderung b im Rückruf von a und initiieren Sie Anforderung c im Rückruf von b. Dies führt zu einer sehr verwirrenden Schreibmethode, die als Rückrufhölle bezeichnet wird. Stellen Sie sich vor, wenn die Seitenlogik zu kompliziert ist und 10 Schnittstellen nacheinander aufrufen muss, ist die Lesbarkeit des Codes sehr, sehr schlecht. Wenn wir diese Art von Code von anderen sehen, können wir nicht anders, als tausend Bestien in unseren Herzen zu spüren.

Grundlegende Verwendung von Promise:

lass fun1 = Funktion(Flag){
    returniere neues Promise((lösen,ablehnen)=>{
    wenn(Flagge){
        setzeTimeout(() => {
        lösen("Erfolg")
        }, 1000);
    }anders{
        setzeTimeout(() => {
        ablehnen("fehlgeschlagen")
        }, 1000);
    }
    })
}
　
 Spaß1(wahr).dann((res)=>{
    console.log(res) //Erfolg
}).fangen((res)=>{
    Konsole.log(res)
})
Spaß1(falsch).dann((res)=>{
    Konsole.log(res)
}).fangen((res)=>{
    console.log(res) //Fehler
})

Das Obige ist die einfachste Promise-Funktion. Die Promise-Funktion gibt ein Promise-Objekt zurück. Der Parameter ist eine Funktion, die zwei Parameter empfängt: „resolve“ und „reject“. Diese beiden Parameter sind ebenfalls Funktionen. Wenn „resolve()“ oder „reject()“ ausgeführt wird, kehrt die Funktion zurück.

Wenn resolve() ausgeführt wird, wird die then()-Methode beim Aufruf ausgeführt und erhält die von resolve() zurückgegebenen Parameter.

Wenn reject() ausgeführt wird, wird die Methode catch() beim Aufruf ausgeführt und erhält die von reject() zurückgegebenen Parameter.

Verwenden Sie Promise, um die oben genannten drei Netzwerkanforderungsprobleme erneut zu implementieren:

let callService = Funktion(URL){
      returniere neues Promise((lösen,ablehnen)=>{
          axios.get(url).then((res)=>{
            Entschlossenheit (res)
          }).catch((err)=>{
            ablehnen (Fehler)
          })
      
      })
    }
    const url1 = "/Benutzer/url1"
    const url2 = "/Benutzer/url2"
    const url3 = "/Benutzer/url3"
    callService(url1).then((res)=>{
      // etwas tun
      Rufe den Dienst auf (URL2) zurück.
    }).dann(()=>{
      // etwas tun
      Rufe den Dienst zurück (URL3).
    }).dann((res)=>{
      // etwas tun
    }).catch((err)=>{
      console.log(fehler)
    })

Nach der erneuten Implementierung mit der oben beschriebenen Methode gibt es nur eine Schreibebene und Sie geraten nicht in Rückrufebenen.

versprechen.alle

promise.all kann mehrere Promises in eine neue Instanz zusammenfassen und bei Erfolg ein Array sowie den Wert des Promises zurückgeben, das zuerst fehlschlägt.

Die Methode promise.all kann uns helfen, das Problem des gleichzeitigen Aufrufs mehrerer Schnittstellen bei der täglichen Entwicklung zu lösen.

let p1 = neues Versprechen((lösen, ablehnen) => {
  lösen('erfolgreich')
})

let p2 = neues Versprechen((lösen, ablehnen) => {
  Lösung('Erfolg')
})

Versprechen.alles([p1, p2]).dann((Ergebnis) => {
  console.log(Ergebnis) //['Erfolg', 'Erfolg']
}).catch((Fehler) => {
  console.log(Fehler)
})

Versprechen.Rennen

Die Funktion dieser Methode besteht darin, mehrere Schnittstellen in einem Wettlauf laufen zu lassen und diejenige zurückzugeben, die schneller läuft.

Versprechen.race([p1, p2]).dann((Ergebnis) => {
  console.log(Ergebnis)
}).catch((Fehler) => {
  console.log(Fehler) 
})

Oben finden Sie eine kurze Erläuterung der Details der drei großen JS-Berge: Asynchronität und Single-Threading. Weitere Informationen zu den drei großen JS-Bergen: Asynchronität und Single-Threading finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!