Javascript 当其中一个获得延迟响应时，如何在具有多个回迁的Redux中执行操作？

我正在考虑如何在Redux中实施以下操作：

第一次获取使用其id api端点：/searches/：id获取搜索数据 其响应的状态可以等于“正在进行”或“已完成” 只有当第一个请求的响应等于finished时，我才需要运行第二个fetch 第二次获取采用相同的id并获取下一个数据api端点：searches/：id/results 我对如何进行操作感到困惑，因为我不知道如何重复第一次获取，直到它获得状态：响应完成。然后才开始下一次提取以获得结果

下面是我使用redux thunk的方法：

export const fetchResults = (id) => (dispatch) => {
  return fetch(`/searches/${id}`, {
    method: 'get',
    headers: { 'Content-Type': 'application/json' }
  }
  .then(res => res.json())
  .then(data => dispatch(fetchUntilFinished(data.id)))
  .then(res => {
    if (res === true) { // allowed to make next fetch
      fetch(`/searches/${id}/results`, {
        method: 'get',
        headers: { 'Content-Type': 'application/json' }
      })
      .then(res => res.json())
      .then(results => {
        dispatch({
          type: 'FETCH_RESULTS',
          results: results
        })
      })
    }
  })

function fetchUntilFinished(id) {
  fetch(`/searches/${id}`, {
    method: 'get',
    headers: { 'Content-Type': 'application/json' }
  }
  .then(res => res.json())
  .then(data => {
     if (data.status !=== 'finished') {
       fetchUntilFinished(id);
    } else {
       return true; // to trigger that next fetch can be done
    }
  })
}

---

但它不是这样工作的。我甚至不确定我是不是在用正确的方式做这件事。我需要有关如何实施此类行动的帮助或想法。

@Dair您可以尝试以下方法：

let interval;
const promise = new Promise((resolve, reject) => {
    interval = setInterval(() => {
        fetch('your-url').then((response) => {
            if (response.status === 'finished') {
                clearInterval(interval);
                resolve(response);
            }
        })
    }, 1000);
});

promise.then(doYourStuffAfterResponse);

---

它并不完美，但它给了您一个想法。

我认为您不应该将redux操作与API调用混合使用。 两者应该分开。您可以进行API调用。获取数据，然后发送操作。这将使您更好地控制数据。 在将其存储到应用商店之前，您可能需要将其格式化一点

我使用axios而不是fetch。但他们都做同样的任务。这就是我在这种情况下所做的。 我有一个单独的函数，只进行api调用。在一个单独的文件中。为了简单起见，我会在一个地方做任何事情。 在这里输入代码

function makeRequest(serviceConfig) {

    let serviceObject;
    try {


        serviceObject = {
          url: serviceConfig.baseUrl + serviceConfig.url,
          method: serviceConfig.method,
          params: serviceConfig.params || {},
          data: serviceConfig.data || {},
          headers: serviceConfig.headers || {},
          withCredentials: (serviceConfig.withCredentials === true),
        };
      } 
      return axios(serviceObject).then((response) => {
          return  response ;
      }, (error) => {
           return error;
      });
    } catch (e) {
      throw e;
    }
  },

现在使用所有特定的配置调用request make函数

requestmaker({
   baseUrlType :'yourdomain.com',
   url:'searches/2',
   method:'GET',
   params:{},
   data:{},
   headers:{}
}).then((success)=>{
     if(success.status==='finished'){
     /*call request maker again with new params.*/ 

        requestmaker({
           baseUrlType :'yourdomain.com',
           url:'searches/2/results',
           method:'GET',
           params:{},
           data:{},
           headers:{}
       }).then((nextSuccess)=>{
         // here nextSuccess will contain the final result set.
          dispatch({
              type: 'FETCH_RESULTS',
               results: nextSuccess
               })
         })
   }
 },(error)=>{
 // your error handeler 
 });

---

也许这有点太多了，但你有没有试着用承诺来包装回访，并在你得到想要的状态时解决承诺？Fetch实现了一个类似于promise的接口，所以它非常适合这里。@sunpietro不，我真的不知道如何用promise来包装它。您可以做一个伪代码示例吗？fetchUntilFinished没有返回任何内容请在fetch/searches/${id}、{…之前尝试一个返回，并在FetchUntilFinisheded之前尝试另一个返回；在if data.status！='finished'{block此代码将继续获取，即使在status===finishede之后，它仍将继续获取。我如何停止它？当然，它将停止。您必须将间隔存储在一个变量中，当它达到所需状态时，应使用ClearIntervalVariableWithIntervalRef清除间隔。您可以使用clearInterval编辑您的答案吗？Tha非常感谢你，尝试一下。很快会有结果的！谢谢！稍后会检查你的解决方案。内存泄漏确实是一个大问题。在API方法中使用interval是不好的，因为它会在你获得数据之前进行服务器调用，所以如果你的网络速度慢或服务器响应不好，那么很可能最终会失败在多个请求中，一个接一个地发送。