Obietnice JavaScript - odrzucanie kontra rzut

Przeczytałem kilka artykułów na ten temat, ale nadal nie jest dla mnie jasne, czy istnieje różnica między Promise.rejectzgłaszaniem błędu. Na przykład,

Korzystanie z Promise.reject

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

Za pomocą rzutu

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

Wolę używać throwpo prostu dlatego, że jest krótszy, ale zastanawiałem się, czy jest jakaś przewaga jednego nad drugim.

Nie ma żadnej korzyści z używania jednego kontra drugiego, ale istnieje konkretny przypadek, w którym thrownie zadziała. Te przypadki można jednak naprawić.

Za każdym razem, gdy znajdziesz się w ramach oddzwaniania od obietnicy, możesz z niego skorzystać throw. Jeśli jednak korzystasz z innego asynchronicznego połączenia zwrotnego, musisz go użyć reject.

Na przykład nie spowoduje to wyłapania:

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

Zamiast tego masz nierozwiązaną obietnicę i niewykorzystany wyjątek. Jest to przypadek, w którym chciałbyś zamiast tego użyć reject. Można to jednak naprawić na dwa sposoby.

1. używając funkcji odrzucania oryginalnej Obietnicy w ramach limitu czasu:

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

2. obiecując limit czasu:

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

Innym ważnym faktem jest to, że reject() NIE przerywa przepływu sterowania, jak returnrobi to instrukcja. W przeciwieństwie do throwtego kończy sterowanie przepływem.

Przykład:

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

Tak, największą różnicą jest to, że odrzucenie to funkcja zwrotna, która jest wykonywana po odrzuceniu obietnicy, podczas gdy rzut nie może być użyty asynchronicznie. Jeśli zdecydujesz się użyć odrzucenia, twój kod będzie nadal działał normalnie w sposób asynchroniczny, podczas gdy rzut będzie priorytetem dla ukończenia funkcji resolvera (ta funkcja uruchomi się natychmiast).

Przykład, który widziałem, który pomógł mi wyjaśnić ten problem, to to, że możesz ustawić funkcję Limit czasu z odrzuceniem, na przykład:

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

Powyższe nie byłoby możliwe do napisania rzutem.

W twoim małym przykładzie różnica w nierozróżnialnym, ale w przypadku bardziej skomplikowanej koncepcji asynchronicznej różnica między nimi może być drastyczna.

TLDR: Funkcja jest trudna w użyciu, gdy czasami zwraca obietnicę, a czasem zgłasza wyjątek. Pisząc funkcję asynchroniczną, wolisz zasygnalizować błąd, zwracając odrzuconą obietnicę

Twój konkretny przykład zaciemnia niektóre ważne różnice między nimi:

Ponieważ zajmujesz się błędami w łańcuchu obietnic, zgłoszone wyjątki są automatycznie konwertowane na odrzucone obietnice. To może wyjaśniać, dlaczego wydają się one wymienne - nie są.

Rozważ poniższą sytuację:

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

Byłby to anty-wzorzec, ponieważ musiałbyś wtedy obsługiwać zarówno przypadki błędów asynchronizacji, jak i synchronizacji. Może wyglądać mniej więcej tak:

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
} 

Nie jest dobrze, a oto gdzie dokładnie Promise.reject(dostępny w skali globalnej) przychodzi na ratunek i skutecznie się odróżnia throw. Refaktor staje się teraz:

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

To pozwala teraz używać tylko jednego w catch()przypadku awarii sieci i synchronicznego sprawdzania błędów pod kątem braku tokenów:

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

Przykład do wypróbowania. Wystarczy zmienić isVersionThrow na false, aby użyć odrzucenia zamiast rzutu.

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