在fetch catch-block中以redux-form拒绝承诺

Question

如何在.catch-block中抛出新的SumbmissionError而不会得到未处理的拒绝？

这会抛出未处理的拒绝（SubmissionError）

import { SubmissionError } from 'redux-form';

const submit = (data) => {
    console.log(data);

    const config = {
        method: 'GET'
    };

    return fetch('http://www.notAvailable.com/', config)
        .then(response => {
            console.log(response)
        })
        .catch(err => {
            throw new SubmissionError({_error: 'Error'});
        });
}

export default submit;

Answer 1

如果您将承诺退回onSubmit config / prop或handleSubmit reduxForm，请抓住SubmissionError：

const { createStore, combineReducers } = Redux;
const { Provider } = ReactRedux;
const { reduxForm, SubmissionError, reducer } = ReduxForm; 

const submit = () =>  new Promise((resolve, reject) => {
  setTimeout(() => reject('500'), 100);
}).catch(e => {
  throw new SubmissionError({ _error: 'service error' })
});

const Form = reduxForm({ 
  form: 'example',
  onSubmit: submit
})(props => (
  <form onSubmit={props.handleSubmit}>
    <pre>{JSON.stringify(props, null, 4)}</pre>
    <button type="submit">submit</button>
  </form>
));

const store = createStore(combineReducers({ form: reducer }));

ReactDOM.render((
  <Provider store={store}>
    <Form />
  </Provider>
), document.getElementById('root'));

JSFiddle：https://jsfiddle.net/pariesz/6srugtwr/