Redux-saga POST请求卡在yield call步骤不写入数据库且不触发catch

可能的触发原因 #

• api.post 方法调用时丢失 this 指向：如果你的 api 是 axios 一类的实例，直接把 api.post 作为 call 的第一个参数传入，会导致方法内部的 this 指向错误，方法无法正常执行返回 Promise，导致 saga 一直处于等待状态，既不返回结果也不抛出错误。
• api.post 未返回标准 Promise：如果你的请求封装逻辑有问题，比如在拦截器中吞掉了错误、没有正确返回 Promise 实例，也会导致 call effect 无法监听到请求的结束状态。
• 请求本身处于永久 pending 状态：后端接口没有正确返回响应、没有配置请求超时时间、跨域配置错误导致请求被拦截但没有抛出错误，都会出现既没有返回数据也没有报错的情况。

修复方案 #

1. 先排查请求本身状态：打开浏览器开发者工具的「网络」面板，触发操作后查看 /club 接口的请求是否正常发出、状态码、返回内容，也可以直接用 Postman 等工具调用后端接口，传入相同参数验证后端逻辑是否正常，先排除后端接口本身的问题。
2. 修复 call 方法的 this 指向问题，可选以下任意一种写法：

// 写法1：用箭头函数包装请求，保留this指向
const response = yield call(() => api.post('/club', { login, password, tradingName, corporateName, cnpj}))
// 写法2：用call的绑定语法指定this上下文
const response = yield call([api, api.post], '/club', { login, password, tradingName, corporateName, cnpj})

3. 检查请求封装逻辑：如果用了 axios 等请求库的拦截器，确保响应拦截器中没有吞掉错误，错误场景下要正常抛出错误，示例配置参考：

// 响应拦截器示例
api.interceptors.response.use(
  response => response,
  error => {
    // 处理完错误逻辑后必须抛出，才能让saga捕获到进入catch分支
    return Promise.reject(error)
  }
)

4. 给请求添加超时配置：初始化请求实例时配置超时时间，避免请求永久 pending：

const api = axios.create({
  baseURL: '你的接口基础地址',
  timeout: 10000 // 10秒超时，超时后自动抛出错误
})

5. 可以临时加日志验证：在 call 前后加 console.log 确认参数是否正确，在 catch 分支也加日志，确认错误是否正常抛出。

内容的提问来源于stack exchange，提问作者Daniel di Navaronne