redux-thunk und die Handhabung von Ausnahmen innerhalb dispatch Ergebnisse

Einen Promise.catch handler auch entdeckt alle Fehler, die ausgelöst werden von der Auflösung oder Ablehnung hf.

fetch('http://jsonplaceholder.typicode.com/posts').then(res => {
  throw new Error();
}).catch(err => {
  //will handle errors from both the fetch call and the error from the resolution handler
});

Behandeln nur die Fehler aus fetch und sicherzustellen, dass jeder Fehler, ausgelöst durch den Aufruf von dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }) in der Auflösung handler ist nicht gefangen in der catch handler, fügen Sie eine Ablehnung handler fetch.

return fetch('http://jsonplaceholder.typicode.com/posts').then(response => response.json, error => {
    dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message });
}).then(json => dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }), error => {
    //response body couldn't be parsed as JSON
});

fetch behandeln nicht-status-codes >= 400 Fehler, so dass der obige Aufruf würde nur abgelehnt werden, wenn es ein Netz oder CORS Fehler, das ist der Grund, warum der status-code muss geprüft werden, in der Auflösung handler.

function fetchHandler(res) {
  if (res.status >= 400 && res.status < 600) {
    return Promise.reject(res);
  }
  return res.json();
}



return fetch('http://jsonplaceholder.typicode.com/posts').then(fetchHandler, error => {
    //network error
    dispatch({ type: 'NETWORK_FAILURE', error });
}).then(json => dispatch({ type: 'FETCH_POSTS_SUCCESS', items: json }), error => {
    dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message });
});

Bitte beachten Sie, dass keine Fehler geworfen, Reagieren die Komponenten verlassen können, Reagieren in einem inkonsistenten Zustand befindet, wodurch verhindert wird, nachfolgende renders und die Anwendung reagiert nicht auf UI-Ereignisse. Reagieren Faser - Adressen dieses Problem mit der Fehler-Grenzen.

Dies ist ein block von code aus einem fetch wrapper, die ich schrieb. Sehen Sie checkStatus im executeRequest Versprechen Kette, die ist, wo ich Kontrolle, für alle nicht-2xx Antworten mit response.ok. Da meine API-Fehler zurück JSON ist, ich gehe jede nicht-2xx Antworten zu parseResponse und dann reject() analysiert die Fehler-Daten, die wiederum abgelehnt und zurückgegeben wird als ein Fehler von executeRequest:

 /**
   * Parse a reponse based on the type
   * @param {Response} response
   * @returns {Promise} <resolve: *, reject: Error>
   */
  const parseResponse = (response) => {
    const contentType = (response.headers.get('content-type') || '').split(';')[0];
    if (contentType === 'application/json') {
      return response.json();
    } else if (contentType === 'multipart/form-data') {
      return response.formData();
    } else if (contentType === 'text/html') {
      return response.text();
    } else if (contentType === 'application/octet-stream') {
      return response.blob();
    }
  };


  /**
   * Check for API-level errors
   * @param {Response} response
   * @returns {Promise} <resolve: Response, reject: Error>
   */
  const checkStatus = (response) =>
    new Promise((resolve, reject) => {
      if (response.ok) {
        return resolve(response);
      }
      parseResponse(response)
        .then(reject)
        .catch(reject);
    });

  /**
   * Create a new Request object
   * @param {String} method
   * @param {String} route
   * @param {*} [data]
   * @param {Object} [options]
   * @returns {Request}
   */
  const buildRequest = (method, route, data = null, definedOptions = {}) => {
    const options = Object.assign({}, defaultOptions, validateOptions(definedOptions));
    const body = () => data ? { body: options.json ? JSON.stringify(data) : data } : {};
    const baseOptions = {
      method: method.toUpperCase(),
      mode: options.mode,
      headers: new Headers(headers(options.headers)),
    };
    const requestOptions = Object.assign({}, baseOptions, body());
    return new Request(getURL(route), requestOptions);
  };

  /**
   * Execute a request using fetch
   * @param {String} method
   * @param {String} route
   * @param {*} [body]
   * @param {Object} [options]
   */
  const executeRequest = (method, route, body, options) =>
    new Promise((resolve, reject) => {
      fetch(buildRequest(method, route, body, options))
        .then(checkStatus)
        .then(parseResponse)
        .then(resolve)
        .catch(reject);