reactjs - react - redux-promise

¿Cómo agregar un setTimeout a una promesa de recuperación que usa redux?

Question

Después de una cierta cantidad de segundos si no se ha resuelto una promesa de recuperación, quiero mostrar un error de tiempo de espera al usuario.

He visto algunos buenos ejemplos de cómo agregar un setTimeout para buscar aquí: https://github.com/github/fetch/issues/175

Pero, ¿cómo puedo manejar el tiempo de espera de una promesa de recuperación que también usa redux? P.ej

export function getData() {
  return (dispatch, getState) => {
    fetch(''blah.com/data'')
    .then(response => response.json())
    .then(json => dispatch(getDataSuccess(json)))
    .catch(
      error => {
        console.log(error)
      }
    )
      dispatch({
        type: DATA_FETCH_REQUEST
      })
  }
}

¡Gracias por leer!

Answer 1

Según el fragmento de github que mencionaste, probablemente puedas hacer algo como esto:

function timeoutPromise(ms, promise) {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error(''Timeout''));
    }, ms);
    promise.then(
      (res) => {
        clearTimeout(timeoutId);
        resolve(res);
      },
      (err) => {
        clearTimeout(timeoutId);
        reject(err);
      }
    );
  })
}

export function getData() {
  return (dispatch, getState) => {
    dispatch({type: DATA_FETCH_REQUEST});

    timoutPromise(5000, fetch(''blah.com/data''))
    .then(response => response.json())
    .then(json => dispatch(getDataSuccess(json)))
    .catch(
      error => {
        // Change this as necessary
        dispatch({type: DATA_FETCH_FAILED});
        console.log(error);
      }
    );
  }
}

Si desea mostrarle al usuario que la solicitud ha fallado, le DATA_FETCH_FAILED que maneje la acción con el tipo DATA_FETCH_FAILED .

Answer 2

Me muero por tener una razón para usar Promise.race, funciona perfectamente para este caso de uso. Promise.race espera la primera resolución o primer rechazo. Por lo tanto, si rechaza los incendios primero, nunca los activará en Promise.race. Más aquí https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race . Lo siento, no tuve la oportunidad de probar el código.

export function getData() {
  return (dispatch, getState) => {
    let timeout = new Promise((resolve, reject) => {
      setTimeout(reject, 300, ''request timed out'');
    })
    let fetch = new Promise((resolve, reject) => {
      fetch(''blah.com/data'')
        .then(response => response.json())
        .then(json => resolve(json))
        .catch(reject)
    })
    return Promise
      .race([timeout, fetch])
      .then(json => dispatch(getDataSuccess(json)))
      .catch(err => dispatch(getDataTimeoutOrError(err)))
  }
}