React API请求：父组件函数错误传递至子组件及Promise捕获方案

首先，你遇到的"fun1.then is not a function"错误，核心原因是你的ParentFunction没有返回Promise对象。当子组件调用this.props.fetch时，这个函数执行后没有返回值（默认返回undefined），自然就没有.then方法可用。

接下来一步步解决问题：

1. 修复ParentFunction，让它返回Promise #

你需要让ParentFunction返回post函数调用后的Promise，这样子组件调用它时才能继续链式调用.then和.catch：

function ParentFunction(url, payload) { 
  // 关键：返回post请求的Promise
  return post(url, payload);
}

这样，当子组件调用this.props.fetch(url, payload)时，得到的就是一个Promise对象，就能正常使用.then和.catch了。

2. 优化post函数的错误处理（可选但推荐） #

原生fetch的一个坑是：只有网络请求失败时才会触发catch，如果是HTTP错误（比如400、500状态码），fetch会认为请求成功，不会进入catch。所以建议在post函数里加上res.ok的判断，把HTTP错误也转化为Promise的reject，这样所有错误都能统一用.catch捕获：

export const post = async (url, payload) => { 
  const res = await fetch(url, { 
    method: 'POST', 
    body: JSON.stringify(payload), 
    headers // 确保headers是已定义的变量，比如包含Content-Type: application/json
  });

  // 检查HTTP响应是否成功
  if (!res.ok) {
    // 可以把响应错误信息也抛出去
    const errorData = await res.json().catch(() => ({ message: 'HTTP请求失败' }));
    throw new Error(errorData.message || `请求失败，状态码：${res.status}`);
  }

  return res.json();
}

3. 子组件中正确调用并处理错误 #

现在子组件的fun2可以正常调用并捕获错误了：

fun2() { 
  this.props.fetch(yourUrl, yourPayload)
    .then(data => {
      // 处理数据并dispatch
      dispatch(/* 你的action */);
    })
    .catch(err => {
      // 这里就能捕获到所有错误，包括网络错误、HTTP错误
      dispatch({ type: 'FETCH_ERROR', payload: err.message });
      // 或者直接在组件中展示错误
      console.error('请求出错：', err);
    });
}

这样就能把API请求的错误传递到Redux或者子组件中处理展示了。

内容的提问来源于stack exchange，提问作者warl0ck