不使用setTimeout实现多个API依次触发 前一个完成后立即调用下一个

核心思路是让callAPI支持异步状态通知，在单条请求完全结束后再触发下一次调用，替换原有的固定超时逻辑，具体改造步骤如下： #

步骤1：改造callAPI函数返回Promise #

首先调整你的callAPI方法，让它在请求完成（成功/失败都算完成）后返回异步状态通知，用Promise是通用性最高的方案，示例改造：

callAPI = () => {
  return new Promise((resolve, reject) => {
    // 保留你原有发起API请求的逻辑，比如axios/fetch调用
    axios.post(你的请求地址, this.state.inputData)
      .then(res => {
        // 保留原有请求成功后的处理逻辑
        resolve(res)
      })
      .catch(err => {
        // 保留原有请求失败后的处理逻辑
        reject(err)
      })
  })
}

如果你原来的callAPI已经内置了成功/失败回调，也可以直接在回调里触发下一次调用，不需要强行改造成Promise。 #

步骤2：改造dataUpdate逻辑 #

移除原有的固定setTimeout调用，改成在callAPI异步完成后触发下一次执行：

dataUpdate = async () => { 
     const arrayList = this.arrayList; 
     // 待处理数组为空时触发结束回调
     if(arrayList.length <= 0) {
         setTimeout(() => {  
             this.props.callMessage(this.totalCount);
         }, 1000);    
         return
     }
     // 构造请求参数逻辑保持和原有一致
     const inputData = {
         ...inputData,
         data:{
             ...inputData.data,
             first: arrayList[0].first,
             second: arrayList[0].second
         }
     }; 
     this.setState({ inputData:inputData });  
     // 如果需要请求失败后重试当前数据，可以把shift操作移到请求成功的逻辑之后
     arrayList.shift();
     this.arrayList = arrayList; 

     try{
         // 等待当前API请求完成
         await this.callAPI()
     } catch(err) {
         // 可自行添加请求失败的处理逻辑，比如错误日志上报、失败重试计数等
         console.error('接口请求异常', err)
     }
     // 当前请求处理完成后立即触发下一次调用
     this.dataUpdate()
}

如果你的运行环境不支持async/await语法，可以用then写法替换：

// 省略和上面一致的参数构造、数组操作逻辑
this.callAPI()
.then(() => this.dataUpdate())
.catch(err => {
    console.error('接口请求异常', err)
    this.dataUpdate()
})

可选优化说明 #

• 若需要接口请求失败后不丢弃当前数据、下次重试，只需要把arrayList.shift()代码移到await this.callAPI()之后、try块内部即可
• 若需要控制单条数据的重试次数，可以额外添加重试计数变量做判断即可

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