javascript - plugin - cómo analizar json después de la promesa de manejo de excepciones con isomorphic-fetch

es6promise polyfill()

Question

Durante la implementación de la función de inicio de sesión con React, Redux, isomorphic-fetch, ES6 Babel.

Preguntas

No sé cómo combinar correctamente las promesas después de la promesa de verificación para poder obtener datos JSON analizados de mi servidor.
¿Qué estoy haciendo mal aquí?

también, ¿necesito reemplazar el paquete isomorphic-fetch por otro más conveniente?
cualquier sugerencia para otro paquete es bienvenida!

loginAction.js

import * as API from ''../middleware/api'';
import * as ActionTypes from ''../actionTypes/authActionTypes'';
import ''isomorphic-fetch'';

function encodeCredentials(id, pwd) {
  return btoa(`${id}{GS}${pwd}`);
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    response;
  } else {
    const error = new Error(response.statusText);
    error.response = response;
    throw error;
  }
}

function parseJSON(response) {
  return response.json();
}

export function loginFailure(error) {
  return { error, type: ActionTypes.LOGIN_FAILURE };
}

export function loginSuccess(response) {
  return dispatch => {
    dispatch({ response, type: ActionTypes.LOGIN_SUCCESS });
  };
}

export function loginRequest(id, pwd) {
  return {
    type: ActionTypes.LOGIN_REQUEST,
    command: ''login'',
    lang: ''en'',
    str: encodeCredentials(id, pwd),
    ip: '''',
    device_id: '''',
    install_ver: '''',
  };
}


export function login(id, pwd) {
  const credentials = loginRequest(id, pwd);

  return dispatch => {
    fetch(`${API.ROOT_PATH}${API.END_POINT.LOGIN}`, {
      method: ''post'',
      headers: {
        ''Accept'': ''application/json'',
        ''Content-Type'': ''application/json'',
      },
      body: JSON.stringify(credentials),
    })
    .then(checkStatus)
    .then(parseJSON)
    .then(data => {
      console.log(`parsed data ${data}`);
      dispatch(loginSuccess(data));
    })
    .catch(error => {
      console.log(`request failed ${error}`);
    });
  };

}

Answer 1

En mis proyectos usualmente, tengo una función auxiliar fetchJSON que hace toda la lógica de la utilidad, como el análisis JSON y la verificación de estado.

Aquí está:

import fetch from ''isomorphic-fetch'';

function checkStatus(response) {
  if(response.ok) {
    return response;
  } else {
    const error = new Error(response.statusText);
    error.response = response;
    throw error;
  }
}

function parseJSON(response) {
  return response.json();
}

export default function enhancedFetch(url, options) {
  options.headers = Object.assign({
    ''Accept'': ''application/json'',
    ''Content-Type'': ''application/json''
  }, options.headers);
  if(typeof options.body !== ''string'') {
    options.body = JSON.stringify(options.body);
  }
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON);
}

Entonces puedes usarlo en acciones:

import fetchJSON from ''../utils/fetchJSON''; // this is the enhanced method from utilities

export function login(id, pwd) {
    const credentials = loginRequest(id, pwd);

    return dispatch => {
       fetchJSON(`${API.ROOT_PATH}${API.END_POINT.LOGIN}`, {
           method: ''post'',
           body: credentials
       }).then(data => {
           console.log(`parsed data ${data}`);
           dispatch(loginSuccess(data));
       }).catch(error => {
           console.log(`request failed ${error}`);
       });
   };
}

Le ayuda a mantener el código de acciones limpio de algún código repetitivo. En grandes proyectos con toneladas de llamadas de fetch similares, es algo realmente imprescindible.

Answer 2

Lo estás haciendo bien, simplemente olvidaste return en checkstatus ; deberías devolver la response manera que la próxima promesa en la cadena pueda consumirla.

Además, parece que checkstatus es una operación sincrónica, por lo que no es necesario encadenarlo. .then (aunque está bien si te gusta de esa manera), puedes escribir:

fetch(...)
.then(response=>{
   checkStatus(response)
   return response.json()
})
.then(data=>{
   dispatch(loginSuccess(data))
})
.catch(...)

No veo razón para deshacerme de isomorphic-fetch por ahora, parece que hace su trabajo.