Promesses JavaScript - rejeter ou lancer

J'ai lu plusieurs articles sur ce sujet, mais il n'est toujours pas clair pour moi s'il y a une différence entre Promise.rejectvs et lancer une erreur. Par exemple,

Utilisation de Promise.reject

return asyncIsPermitted()
    .then(function(result) {
        if (result === true) {
            return true;
        }
        else {
            return Promise.reject(new PermissionDenied());
        }
    });

Utilisation de lancer

return asyncIsPermitted()
    .then(function(result) {
        if (result === true) {
            return true;
        }
        else {
            throw new PermissionDenied();
        }
    });

Ma préférence est d'utiliser throwsimplement parce qu'il est plus court, mais je me demandais s'il y avait un avantage l'un par rapport à l'autre.

Il n'y a aucun avantage à utiliser l'un contre l'autre, mais il y a un cas spécifique où throwcela ne fonctionnera pas. Cependant, ces cas peuvent être résolus.

Chaque fois que vous êtes dans un rappel de promesse, vous pouvez l'utiliser throw. Cependant, si vous êtes dans un autre rappel asynchrone, vous devez utiliser reject.

Par exemple, cela ne déclenchera pas le catch:

new Promise(function() {
  setTimeout(function() {
    throw 'or nah';
    // return Promise.reject('or nah'); also won't work
  }, 1000);
}).catch(function(e) {
  console.log(e); // doesn't happen
});

Au lieu de cela, vous vous retrouvez avec une promesse non résolue et une exception non capturée. C'est un cas où vous voudriez utiliser à la place reject. Cependant, vous pouvez résoudre ce problème de deux manières.

1. en utilisant la fonction de rejet de la promesse d'origine dans le délai:

new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('or nah');
  }, 1000);
}).catch(function(e) {
  console.log(e); // works!
});

2. en promettant le timeout:

function timeout(duration) { // Thanks joews
  return new Promise(function(resolve) {
    setTimeout(resolve, duration);
  });
}

timeout(1000).then(function() {
  throw 'worky!';
  // return Promise.reject('worky'); also works
}).catch(function(e) {
  console.log(e); // 'worky!'
});

Un autre fait important est que reject() NE met PAS fin au flux de contrôle comme le fait une returninstruction. En revanche, throwmet fin au flux de contrôle.

Exemple:

new Promise((resolve, reject) => {
  throw "err";
  console.log("NEVER REACHED");
})
.then(() => console.log("RESOLVED"))
.catch(() => console.log("REJECTED"));

contre

new Promise((resolve, reject) => {
  reject(); // resolve() behaves similarly
  console.log("ALWAYS REACHED"); // "REJECTED" will print AFTER this
})
.then(() => console.log("RESOLVED"))
.catch(() => console.log("REJECTED"));

Oui, la plus grande différence est que le rejet est une fonction de rappel qui est exécutée après le rejet de la promesse, alors que throw ne peut pas être utilisé de manière asynchrone. Si vous avez choisi d'utiliser le rejet, votre code continuera à s'exécuter normalement de manière asynchrone tandis que throw donnera la priorité à l'achèvement de la fonction résolveur (cette fonction s'exécutera immédiatement).

Un exemple que j'ai vu qui m'a aidé à clarifier le problème est que vous pouvez définir une fonction de délai d'attente avec rejet, par exemple:

new Promise(_, reject) {
 setTimeout(reject, 3000);
});

Ce qui précède ne serait pas possible d'écrire avec throw.

Dans votre petit exemple, la différence est indiscernable, mais lorsqu'il s'agit d'un concept asynchrone plus compliqué, la différence entre les deux peut être drastique.

TLDR: Une fonction est difficile à utiliser lorsqu'elle renvoie parfois une promesse et lève parfois une exception. Lors de l'écriture d'une fonction asynchrone, préférez signaler un échec en renvoyant une promesse rejetée

Votre exemple particulier obscurcit certaines distinctions importantes entre eux:

Étant donné que vous gérez des erreurs dans une chaîne de promesses, les exceptions levées sont automatiquement converties en promesses rejetées. Cela peut expliquer pourquoi ils semblent être interchangeables - ils ne le sont pas.

Considérez la situation ci-dessous:

checkCredentials = () => {
    let idToken = localStorage.getItem('some token');
    if ( idToken ) {
      return fetch(`https://someValidateEndpoint`, {
        headers: {
          Authorization: `Bearer ${idToken}`
        }
      })
    } else {
      throw new Error('No Token Found In Local Storage')
    }
  }

Ce serait un anti-modèle car vous auriez alors besoin de prendre en charge les cas d'erreurs asynchrones et de synchronisation. Cela pourrait ressembler à:

try {
  function onFulfilled() { ... do the rest of your logic }
  function onRejected() { // handle async failure - like network timeout }
  checkCredentials(x).then(onFulfilled, onRejected);
} catch (e) {
  // Error('No Token Found In Local Storage')
  // handle synchronous failure
} 

Pas bon et c'est exactement là où Promise.reject(disponible dans la portée mondiale) vient à la rescousse et se différencie efficacement throw. Le refactoriste devient désormais:

checkCredentials = () => {
  let idToken = localStorage.getItem('some_token');
  if (!idToken) {
    return Promise.reject('No Token Found In Local Storage')
  }
  return fetch(`https://someValidateEndpoint`, {
    headers: {
      Authorization: `Bearer ${idToken}`
    }
  })
}

Cela vous permet désormais d'en utiliser un seul catch()pour les pannes de réseau et le contrôle d'erreur synchrone pour le manque de jetons:

checkCredentials()
      .catch((error) => if ( error == 'No Token' ) {
      // do no token modal
      } else if ( error === 400 ) {
      // do not authorized modal. etc.
      }

Un exemple à essayer. Remplacez simplement isVersionThrow par false pour utiliser le rejet au lieu du lancer.

const isVersionThrow = true

class TestClass {
  async testFunction () {
    if (isVersionThrow) {
      console.log('Throw version')
      throw new Error('Fail!')
    } else {
      console.log('Reject version')
      return new Promise((resolve, reject) => {
        reject(new Error('Fail!'))
      })
    }
  }
}

const test = async () => {
  const test = new TestClass()
  try {
    var response = await test.testFunction()
    return response 
  } catch (error) {
    console.log('ERROR RETURNED')
    throw error 
  }  
}

test()
.then(result => {
  console.log('result: ' + result)
})
.catch(error => {
  console.log('error: ' + error)
})