Wie verwende ich Typescript mit nativem ES6 Promise?

In der ES6-Version von ECMAScript wurden erstmals Versprechen eingeführt.

Um die ES6-Versprechen im TypeScript-Projekt zu verwenden, müssen Benutzer die Datei tsconfig.json ändern

Fügen Sie den folgenden Code in das Objekt „compilerOptions“ ein.

{
   "compilerOptions": {
      "target": "es6",
   }
}

Außerdem können Benutzer „ES6“ im „lib“-Attribut unten hinzufügen.

{
   "compilerOptions": {
      "lib": [
         "es6",
         "dom"
      ],
   }
}

Benutzer können jedoch auch nachfolgende Versionen von ECMAScript verwenden, da diese native Promises in TypeScript unterstützen. Zum Beispiel es7, es10 usw.

In TypeScript beziehen sich native Versprechen auf Versprechen, die mit dem Promise()-Konstruktor im TypeScript-Code erstellt wurden. Wir können jedoch Versprechen auflösen, die von jeder API-Anfrage zurückgegeben werden.

Diese Versprechen können die folgenden drei Zustände haben.

• Ausstehend – Dies bedeutet, dass die Zusage noch nicht abgeschlossen ist.

• Abgeschlossen – Dies bedeutet, dass das Versprechen ohne Fehler erfolgreich abgeschlossen wurde.

• Abgelehnt – Dies bedeutet, dass das Versprechen mit einem Fehler abgeschlossen wurde.

Grammatik

Benutzer können natives Promise in TypeScript gemäß der folgenden Syntax verwenden.

const promise = new Promise((resolve, reject) => {
   
   // resolve or reject the promise
});
promise
.then(() => {
   
   // show results
})
.catch(() => {
   
   // show error
});

In der obigen Syntax haben wir mit dem Promise()-Konstruktor ein Versprechen erstellt und das Ergebnis und den Fehler in den Blöcken then() und Catch() verarbeitet. Darüber hinaus stellt „T“ den Rückgabetyp dar, wenn das Versprechen erfolgreich abgeschlossen wird.

Beispiel 1 (Grundlegende Verpflichtung)

Im folgenden Beispiel lernen wir, wie man ES6 natives Promise grundsätzlich in TypeScript verwendet. Wir haben zwei Versprechen mit den Namen first_promise und second_promise erstellt. Wir haben „first_promise“ gelöst und „second_promise“ abgelehnt.

Außerdem können Benutzer sehen, dass der Rückgabetyp des Versprechens eine Zeichenfolge ist. Wenn das erste Versprechen erfolgreich aufgelöst wird, geht die Ausführungskontrolle an den then()-Block; wenn das zweite Versprechen abgelehnt wird, geht die Ausführungskontrolle an den Catch()-Block.

// resolving a promise
const first_promise = new Promise((res, rej) => {
   res("First promise resolved");
});
first_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

// rejecting a promise
const second_promise = new Promise((res, rej) => {
   rej("Second promise rejected");
});
second_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

Beim Kompilieren wird der folgende JavaScript-Code generiert.

// resolving a promise
var first_promise = new Promise(function (res, rej) {
   res("First promise resolved");
});
first_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) { 
   console.log(err);
});

// rejecting a promise
var second_promise = new Promise(function (res, rej) {
   rej("Second promise rejected");
});
second_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Beispiel 2 (verschachtelte Versprechen)

Im folgenden Beispiel zeigen wir, wie man verschachtelte Versprechen verwendet. Wir haben „outer_promise“ mit dem Schlüsselwort „new“ und dem Konstruktor „Promise()“ erstellt. Innerhalb der Callback-Funktion von Outer_Promise erstellen wir ein neues Unterversprechen und lösen das Unterversprechen auf.

In der Ausgabe kann der Benutzer beobachten, dass das äußere Versprechen erfolgreich als Unterversprechen aufgelöst wird. Wenn wir das Unterversprechen ablehnen, wird auch das äußere_Versprechen abgelehnt.

// resolving a promise
const outer_promise = new Promise((res) => {
   res(
      new Promise((resChild) => {
         resChild("Child Promise Resolved");
      })
   );
});
outer_promise
.then((result: string) => {
      console.log(result);
})
.catch((err) => {
   console.log(err);
}); 

Beim Kompilieren wird der folgende JavaScript-Code generiert.

// resolving a promise
var outer_promise = new Promise(function (res) {
   res(new Promise(function (resChild) {
      resChild("Child Promise Resolved");
   }));
});
outer_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Beispiel 3 (Chained Promises)

Beispiel 3 (Chained Promise)

Im folgenden Beispiel zeigen wir chinesische Versprechen in TypeScript. Wie der Name schon sagt, handelt es sich um eine Reihe von Versprechen. Wenn wir hier numeric_promise auflösen, geben wir einen numerischen Wert zurück.

Wir haben 10 als Ergebnis im then()-Block erhalten. Danach multiplizieren wir das Ergebnis mit 2 und geben es zurück. Wir können den vom ersten then()-Block zurückgegebenen Wert innerhalb des zweiten then()-Blocks abrufen und so weiter. Wenn ein Fehler auftritt, geht die Steuerung direkt an den Catch()-Block.

In der Ausgabe kann der Benutzer beobachten, dass der Ergebniswert in jedem then()-Block verdoppelt wird.

// resolving a promise
const numeric_promise = new Promise((res) => {
   res(10);
});
numeric_promise
.then((result: number) => {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the fourth then() block is - " + result);
})
.catch((err) => {
   console.log(err);
}); 

Nach der Kompilierung wird der folgende JavaScript-Code generiert. Ein Versprechen einlösen

var numeric_promise = new Promise(function (res) {
   res(10);
});
numeric_promise
.then(function (result) {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the fourth then() block is - " + result);
})["catch"](function (err) {
   console.log(err);
}); 

Benutzer haben gelernt, native ES6-Versprechungen in TypeScript zu verwenden. Wir haben auch gelernt, verschachtelte Versprechen und Versprechensverkettungen zu verwenden. Normalerweise erhalten Benutzer Versprechen als Antworten von APIs und müssen die Blöcke then() und Catch() verwenden, um sie zu verarbeiten.

Das obige ist der detaillierte Inhalt vonWie verwende ich Typescript mit nativem ES6 Promise?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!