拒绝使用 async/throw 而不是 promise 的 react redux 形式

Question

我正在使用 react redux form 将表单数据发送到服务器。如果我 return 一个失败的承诺，但如果我抛出或使用 async/await with throw，则表单将正确显示失败。我仍然要 return 拒绝承诺。不确定我在这里遗漏了什么，或者事情就是这样。

作品：

export const myRequest = (data) => {
   return new Promise((resolve, reject) => {
    reject('Login failed!')
   })
}

不（以及 async/await 变体）：

export const myRequest = (data) => {
   throw new Error('Login failed')
}

我要做的事情：

export const myRequest = (data) => {
  try {
    ...
  } catch (err) {
     return new Promise((resolve, reject) => {
       reject(...)
   })
  }  
}

这是我正在使用的一些异步代码。我必须将错误消息包装在一个承诺中，以便表单获取消息，我不确定为什么当我抛出时它没有以相同的方式获取消息。

const myRequest = async ( data) => {
  try {
    let response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })

    if (!response.ok) {
      throw new Error(response.statusText)
    }
    return await response.json()
  } catch (err) {
    // Not working - no error message makes it - though it gets that it's an error
    throw new Error(err) // or new Error(err.message) or new Error('foo')

    // Works
    // return new Promise((resolve, reject) => {
    //   reject(err.message)
    // })
  }
}

我的 React Redux 表单：

import myRequest from '...'

handleSubmit (values) {
  const { dispatch } = this.props
  dispatch(actions.submit('subscribe', myRequest(values)))
}

render () {
   const { valid, pending, submitted, submitFailed } = this.props.form
  return (
    <Form model='subscribe' onSubmit={(values) => this.handleSubmit(values)}>
    { !valid && submitFailed ? <Alert>          
      <Errors
        model='subscribe' // Form name as found in reducer
      /> : null
    }
    </Form>
  }
}

Answer 1

我认为 redux 形式期待 returned 的承诺。幸运的是，所有异步函数总是 return promises。我敢打赌，如果您将代码更改为：

 export const myRequest = async (data) => {
   throw new Error('Login failed')
 }

你会在正确的地方找到错误提示。

Answer 2

在这里使用 async function 是正确的做法。但是，要获得 reject(err.message) 的等效项，您需要执行 throw err.message。但是你应该never throw strings，更好throw new Error(err.message)。或者只是 throw err。或者干脆什么都不抓，让它冒泡。

Answer 3

这里是 React-Redux-Form 的创造者。这刚刚得到修复，将在下一个版本中发布：https://github.com/davidkpiano/react-redux-form/issues/877

拒绝使用 async/throw 而不是 promise 的 react redux 形式

Rejecting react redux form with async/throw instead of promise

promise

react-redux-form