Promesse di JavaScript: rifiuto contro lancio

Ho letto diversi articoli su questo argomento, ma non mi è ancora chiaro se c'è una differenza tra Promise.rejectvs. lanciare un errore. Per esempio,

Utilizzando Promise.reject

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

Usando il tiro

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

La mia preferenza è quella di usare throwsemplicemente perché è più corto, ma mi chiedevo se ci fosse qualche vantaggio rispetto all'altro.

Non vi è alcun vantaggio nell'usare l'uno rispetto all'altro, ma esiste un caso specifico in cui thrownon funzionerà. Tuttavia, questi casi possono essere risolti.

Ogni volta che ti trovi in ​​un callback promettente, puoi usarlo throw. Tuttavia, se si è in qualsiasi altro callback asincrono, è necessario utilizzare reject.

Ad esempio, questo non attiverà il problema:

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

Invece ti rimane una promessa irrisolta e un'eccezione non rilevata. Questo è un caso in cui vorresti invece usare reject. Tuttavia, potresti risolverlo in due modi.

1. usando la funzione di rifiuto originale di Promise all'interno del timeout:

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

2. promettendo il 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 altro fatto importante è che reject() NON termina il flusso di controllo come returnfa un'istruzione. Al contrario throw, termina il flusso di controllo.

Esempio:

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

vs

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

Sì, la differenza più grande è quella rifiuto è una funzione di richiamata che viene eseguita dopo il rifiuto della promessa, mentre il lancio non può essere utilizzato in modo asincrono. Se si sceglie di utilizzare il rifiuto, il codice continuerà a funzionare normalmente in modo asincrono, mentre lancio darà la priorità al completamento della funzione di risoluzione (questa funzione verrà eseguita immediatamente).

Un esempio che ho visto che mi ha aiutato a chiarire il problema per me è stato che potresti impostare una funzione di timeout con rifiuto, ad esempio:

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

Quanto sopra non sarebbe possibile scrivere con il lancio.

Nel tuo piccolo esempio la differenza in indistinguibile, ma quando si tratta di un concetto asincrono più complicato, la differenza tra i due può essere drastica.

TLDR: una funzione è difficile da usare quando a volte restituisce una promessa e talvolta genera un'eccezione. Quando si scrive una funzione asincrona, preferire segnalare l'errore restituendo una promessa rifiutata

Il tuo esempio particolare offusca alcune importanti distinzioni tra di loro:

Poiché stai gestendo gli errori all'interno di una catena di promesse, le eccezioni generate vengono convertite automaticamente in promesse rifiutate. Questo potrebbe spiegare perché sembrano intercambiabili - non lo sono.

Considera la situazione seguente:

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

Questo sarebbe un anti-pattern perché sarebbe quindi necessario supportare entrambi i casi di errore asincrono e sincronizzazione. Potrebbe assomigliare a:

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
} 

Non va bene e qui è esattamente dove Promise.reject(disponibile nell'ambito globale) viene in soccorso e si differenzia efficacemente da throw. Il refactor ora diventa:

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

Ciò ora consente di utilizzarne solo uno catch()per gli errori di rete e il controllo degli errori sincroni per mancanza di token:

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

Un esempio da provare. Cambia isVersionThrow in false per usare il rifiuto invece del lancio.

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