javascript - 在发出 API 请求时，将函数错误从 React 中的父组件传播到子组件

Question

我有一个共同点post request function我在其中获取数据并将数据返回给调用函数。这个函数被作为 prop 传递给其他组件。

现在，如果我在获取数据时遇到错误，我想将相同的错误发送到最终的 component redux这样我就可以相应地显示该组件中的错误。

export const post = async (url, payload) => {
  const data = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(payload),
    headers
  })
    .then(res => {
      return res.json()
    })
    .catch(err => {
      throw err
    })
  return data
}

这里ParentFunction存在于父组件中，并且作为 prop 传递给子组件。

function ParentFunction(url, payload) {
  postRequest(url, payload).then()
    .catch()
}

并将此函数引用传递为:

<ChildComponent fetch={this.fun1} />

这是我的子组件 redux 中的函数，目前只要我没有从发布请求中收到错误，我就可以获取数据

function fun2() {
  this.props.fetch.then(data => dispatch(....))
  // doing something with this data 
}

现在，如果我从发布请求中收到错误，我会将相同的内容从父级传递给此函数，但是此 fun2抛出一个错误说 fun1.then不是一个函数。那么我该如何捕获这里的错误呢？我尝试过 fun1.then().catch()但它不起作用。

有什么办法可以实现这个目标吗？

TL；博士:

如何将 fetch 调用包装在 Promise 中，以便在抛出错误时可以使用 .catch ？

Answer 1

让我向您解释一下您遇到的错误。

您正在使用 async/await，它会返回结果(而不是 promise )，并且当出现异常时，它会抛出。

由于它不是一个 promise ，因此它不会为您提供 .then 或 .catch 来使用。

实现您想要做的事情的一种方法是，调用该函数，将调用包装在 try/catch block 之间，然后就可以开始了。您将获得函数调用结果的数据，或者您将在 catch block 中收到错误。在此基础上，您可以处理如何将它们传递给 Prop 。

示例:

export const post = async (url, payload) => {
  const data = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(payload),
    headers
  })
    .then(res => {
      return res.json()
    })
    .catch(err => {
      throw err
    })
  return data
}

现在调用它时:

let data = null;
let error = null;
try {
  data = post(url, payload)
} catch (e) {
  error = e;
}

另一种方法是返回一个数组作为结果。基本结构可以是[err, data]。如果成功获取数据，则返回[null, data]。如果出现异常，请返回[err]。

示例:

export const post = async (url, payload) => {
  const data = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(payload),
    headers
  })
    .then(res => {
      return [null, res.json()]
    })
    .catch(err => {
      return [err]
    })

  return data
}

或者，您可以简单地使用 Promise，您可以使用您已经尝试过的常用 .then 和 .catch。

以下是示例:

export const post = (url, payload) => {
      return fetch(url, {
        method: 'POST',
        body: JSON.stringify(payload),
        headers
      })
        .then(res => {
          return res.json()
        }) // as you will be catching the exception later, we can exclude catch from here...
    }

这是你如何调用它:

post(url, payload)
  .then((data) => {
    // handle data
  })
  .catch((err) => {
    // handle error
  })

我希望这会有所帮助。