Possible Unhandled Promise Rejection (id: 0):

lexfernandez commented 8 years ago

Hi guys,

I am trying to make a request to my restfull api but for some reason I always get [PREFIX]_REJECTED as response and there is only this warning telling me there is a possible unhandled promise rejection.

This is my code:

export function login(username,password) {

  return {
    type: actions.LOGIN,
    payload: {
      promise: fetch(environment.serverURL+'/Users/login', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'username': username,
            'password': password
          })
        })
    }
  }
}

authReducer.js

import * as actions from '../actions/actionTypes';

const initialState = {
  username: '',
  isLoggingIn: false,
  isLoggedIn: false,
  token:'',
  userId:0,
  error: null
};

export default function auth(state = initialState, action) {
  switch (action.type) {
    case 'LOGIN_PENDING':
      return Object.assign({}, state, {
            isLoggingIn: true,
            isLoggedIn: false,
            username: action.username
            })
    case 'LOGIN_FULFILLED':
      return Object.assign({}, state, {
  error: null,
  isLoggingIn: false,
  isLoggedIn: true,
  token: action.payload.body.id,
  userId: action.payload.body.userId
})
    case 'LOGIN_REJECTED':
      return Object.assign({}, state,{
  error: action.error,
  isLoggingIn: false,
  isLoggedIn: false,
})
    default:
      return state;
  }
}

pburtchaell commented 8 years ago

@lexfernandez This isn't an issue related to the middleware ("Network request failed"), but with the request. Considering this is outside the scope of this project, I won't be able to provide any help for you, sorry.

I would suggest, however, catching the error and taking a look at your response. The Fetch API returns a promise, so you can do this:

export function login(username,password) {

  return {
    type: actions.LOGIN,
    payload: {
      promise: fetch(environment.serverURL+'/Users/login', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'username': username,
            'password': password
          })
        }).then(...).catch(...)
    }
  }
}

lexfernandez commented 8 years ago

Thanks @pburtchaell , I alredy solved it, the problem was in my api.

ghost commented 8 years ago

hi @lexfernandez , I have the same issue you already solved. Please let me know what I have to revise in the api? The api is developed in php.

lexfernandez commented 8 years ago

Hi @NicklassFransson, you will need to add the then and catch statements in order to see whats the problem on your api.

You will need something like this:

export function login(username,password) {
  return {
    type: actions.LOGIN,
    payload: {
      promise: fetch(environment.serverURL+'/Users/login', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'username': username,
            'password': password
          })
        }).then(function(response) {
            return response.json()
        }).catch(function(err) {
          return err;
        })
    }
  }
}

one you catch the error you will be able to see if the problem is with your api or if your request correctly.

You can download my example from my repo GoGreen and the api from GoGreenApi

ghost commented 8 years ago

Thank you, @lexfernandez . I've also found the reason and resolved. Thanks a lot.

abuammar commented 6 years ago

Thank you, @lexfernandez . let me know what changes u made and how you resolved..

abuammar commented 6 years ago

@ghost . I'm also experiencing the same issue plz let me know how to resolved. Thanks a lot.

lexfernandez commented 6 years ago

Hi @abuammar, as @pburtchaell said, it is not a problem with the middleware but a problem related to the request you made, there could be many reasons but you can find out what is you problem if you catch the error.

Hi @NicklassFransson, you will need to add the then and catch statements in order to see whats the problem on your api.

You will need something like this:
export function login(username,password) {
  return {
    type: actions.LOGIN,
    payload: {
      promise: fetch(environment.serverURL+'/Users/login', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            'username': username,
            'password': password
          })
        }).then(function(response) {
            return response.json()
        }).catch(function(err) {
          return err;
        })
    }
  }
}
one you catch the error you will be able to see if the problem is with your api or if your request correctly.

You can download my example from my repo GoGreen and the api from GoGreenApi

pburtchaell / redux-promise-middleware

Possible Unhandled Promise Rejection (id: 0): #79