Redux, Fetch, Как поймать json()

Я использую веб-API, который вернет 400 за неправильную попытку входа в систему. Когда пользователь пытается войти в систему с неправильными учетными данными, то апи будет возвращать что-то вроде:Redux, Fetch, Как поймать json()

{ 
    "non_field_errors": "Invalid credentials. Please try again". 
}

То, что я пытаюсь достичь: Когда ответ 400, он должен вернуть JSON и отправить его при помощи dispatch(loginUserFailure(error)). Конечно, в случае успеха он должен dispatch(loginUserSuccess(json)). В моем случае было бы очень удобно, если бы .then(json => {...} имел доступ к объекту ответа, но, очевидно, это невозможно.

Любые идеи об обходном пути это или любые предложения о том, что посмотреть было бы здорово!

export function loginUser(username, password) { 

    const options = { 
    method: 'POST', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify({username, password}) 
    }; 

    return (dispatch, getState) => { 
    return fetch('/api/accounts/login/', options) 
     .then(response => { 
     if (!response.ok) { 
      throw Error(response.statusText); 
     } 
     return response.json(); 
     }) 
     .then(json => { 
     // Check the response status here and dispatch respectively 
     // if (response.status !== 400) { 
     // dispatch(loginUserFailure(error)); 
     // } 
     dispatch(loginUserSuccess(json)); 
     }) 
     .catch(error => { 
     dispatch(loginUserFailure(error)); 
     }); 
    }; 
};

источник

2016-06-27 manosim

Почему бы просто не использовать 'if (response.status! == 400) return response.json(). Then (loginUserSuccess). Then (dispatch)'? – Bergi

@Bergi Вы бы сказали, что что-то вроде этого - правильный подход? http://pastebin.com/C2Bn65hd – manosim

Да, точно, хотя вы можете [бросить json в качестве ошибки] (http://stackoverflow.com/a/29475662/1048572), чтобы избежать дублирования 'dispatch (loginUserFailure (...)) ' – Bergi

Вы можете reject обещания вручную, который пригождается, если неверный код ответа возвращается. Затем будет обработан обратный вызов catch.

The MDN имеет дополнительную информацию о Promise.reject().

Этот пример показывает, как это можно сделать:

function status(response) { 
    if (response.status >= 200 && response.status < 300) { 
    return Promise.resolve(response) 
    } else { 
    return Promise.reject(new Error(response.statusText)) 
    } 
} 

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

fetch('users.json') 
    .then(status) 
    .then(json) 
    .then(function(data) { 
    console.log('Request succeeded with JSON response', data); 
    }).catch(function(error) { 
    console.log('Request failed', error); 
    });

Source, section Chaining Promises

источник

2016-06-27 21:59:23 Timo

Также объект 'Fetch.response' имеет свойство' ok', которое может помочь вам определить, отклоняете ли вы его. –

Использование window.fetch API кажется очень низким уровнем для вас, потому что он предназначен для работы с любым типом ответа, но вам нужен только JSON.

Рассмотрите возможность использования axios или другой библиотеки, которая заботится о JSON - синтаксическом анализе.

источник

2016-06-28 12:57:08

Redux, Fetch, Как поймать json()

ответ

Смежные вопросы