Comment utiliser Typescript avec ES6 Promise native ?

Dans la version ES6 d'ECMAScript, des promesses ont été introduites pour la première fois.

Pour utiliser les promesses ES6 dans le projet TypeScript, les utilisateurs doivent modifier le fichier tsconfig.json

Ajoutez le code suivant dans l'objet 'compilerOptions'.

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

De plus, les utilisateurs peuvent ajouter « ES6 » dans l'attribut « lib » ci-dessous.

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

Cependant, les utilisateurs peuvent également utiliser les versions ultérieures d'ECMAScript car elles prennent en charge les promesses natives dans TypeScript. Par exemple, es7, es10, etc.

Dans TypeScript, les promesses natives font référence aux promesses créées à l'aide du constructeur Promise() dans le code TypeScript. Cependant, nous pouvons résoudre les promesses renvoyées par toute requête API.

Ces promesses peuvent avoir les trois états suivants.

• En attente - Cela signifie que l'engagement n'est pas encore terminé.

• Terminé - Cela signifie que la promesse s'est terminée avec succès sans aucune erreur.

• Rejeté - Cela signifie que la promesse s'est terminée avec une erreur.

Grammaire

Les utilisateurs peuvent utiliser Promise native dans TypeScript selon la syntaxe suivante.

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

Dans la syntaxe ci-dessus, nous avons créé une promesse à l'aide du constructeur Promise() et géré le résultat et l'erreur dans les blocs then() et catch() respectivement. De plus, « T » représente le type de retour lorsque la promesse se termine avec succès.

Exemple 1 (Engagement de base)

Dans l'exemple suivant, nous apprendrons à utiliser essentiellement la promesse native ES6 dans TypeScript. Nous avons créé deux promesses nommées first_promise et second_promise. Nous avons résolu first_promise et rejeté second_promise.

De plus, les utilisateurs peuvent voir que le type de retour de la promesse est une chaîne. Lorsque la première promesse est résolue avec succès, le contrôle d'exécution passe au bloc then() ; lorsque la deuxième promesse est rejetée, le contrôle d'exécution passe au bloc catch().

// 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);
});

Une fois compilé, il générera le code JavaScript suivant.

// 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);
});

Exemple 2 (Promesses imbriquées)

Dans l'exemple ci-dessous, nous montrons comment utiliser les promesses imbriquées. Nous avons créé external_promise en utilisant le mot-clé new et le constructeur Promise(). Dans la fonction de rappel de external_promise, nous créons une nouvelle sous-promesse et résolvons la sous-promesse.

Dans le résultat, l'utilisateur peut observer que la external_promise se résout avec succès en tant que sous-promesse. Si nous rejetons la sous-promesse, la external_promise sera également rejetée.

// 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);
}); 

Une fois compilé, il générera le code JavaScript suivant.

// 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);
});

Exemple 3 (Promesse enchaînée)

Exemple 3 (Promesse enchaînée)

Dans l'exemple ci-dessous, nous affichons les promesses chinoises en TypeScript. Comme son nom l’indique, il s’agit d’une série de promesses. Ici, lorsque nous résolvons numeric_promise, nous renvoyons une valeur numérique.

Nous avons obtenu 10 comme résultat dans le bloc then(). Après cela, nous multiplions le résultat par 2 et le renvoyons. Nous pouvons obtenir la valeur renvoyée par le premier bloc then() à l’intérieur du deuxième bloc then(), et ainsi de suite. Si une erreur se produit, le contrôle passe directement au bloc catch().

Dans la sortie, l'utilisateur peut observer que la valeur du résultat dans chaque bloc then() est doublée.

// 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);
}); 

Après la compilation, le code JavaScript suivant sera généré. Résoudre une promesse

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);
}); 

Les utilisateurs ont appris à utiliser les promesses natives d'ES6 dans TypeScript. Nous avons également appris à utiliser les promesses imbriquées et le chaînage de promesses. En règle générale, les utilisateurs recevront des promesses sous forme de réponses des API et devront utiliser les blocs then() et catch() pour les gérer.

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!