基于Async Await的API调用成功后，如何发起带指定参数的二次API调用

直接在原函数的API成功响应分支内添加第二次调用逻辑即可，修改后的完整代码如下：

const activeStepOne = async () => {
  const formData = new FormData();
  formData.append("file", csvData);
  formData.append("filetype", fileType);
  
  let postData = { filetype: fileType, file: csvData };
  let getData = { filetype: fileType, file: csvData.name };
  sessionStorage.setItem("uploadDetails", JSON.stringify(getData));
  
  const requestOptions = { 
    method: "POST", 
    body: formData 
  };
  
  try {
    let responseData = await callAPI(`${API_URL}/fileupload`, requestOptions);
    
    if (responseData?.status) {
      setDisable(true);
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
      setIsLoading(false);
      setShowSnackbar(false);
      setSnackbarType("success");
      setSnackbarMessage("File uploaded successfully!");
      setShowSnackbar(true);

      // ------------------------------
      // 新增：第一次调用成功后发起第二次API请求
      // ------------------------------
      const secondRequestOptions = {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          Upload: "True",
          Name: "Bolzen",
          WorkflowName: "file1.csv",
          UserId: 1
        })
      };

      try {
        const secondResponse = await callAPI(`${API_URL}/your-second-api-path`, secondRequestOptions);
        if (secondResponse?.status) {
          // 二次调用成功的处理逻辑
          setSnackbarMessage("二次操作执行成功！");
          setSnackbarType("success");
          setShowSnackbar(true);
        } else {
          setSnackbarMessage("二次操作失败，请重试");
          setSnackbarType("error");
          setShowSnackbar(true);
        }
      } catch (secondError) {
        console.error("第二次API调用出错：", secondError);
        setSnackbarMessage("二次操作请求异常");
        setSnackbarType("error");
        setShowSnackbar(true);
      }
      // ------------------------------
      // 新增逻辑结束
      // ------------------------------

    } else {
      setStatusCode(true);
      setIsLoading(false);
      setSnackbarMessage( "Error uploading file. Please try again with proper data." );
      setSnackbarType("error");
      setShowSnackbar(true);
    }
    console.log(responseData);
  } catch (firstError) {
    // 捕获第一次API调用的异常
    setIsLoading(false);
    setSnackbarMessage("文件上传请求异常");
    setSnackbarType("error");
    setShowSnackbar(true);
    console.error("第一次API调用出错：", firstError);
  }
};

关键修改说明 #

• 请求配置：第二次调用发送JSON格式参数，必须设置Content-Type: application/json请求头，同时通过JSON.stringify()将参数对象转为JSON字符串作为请求体
• 错误隔离：用独立的try-catch包裹第二次调用，避免二次请求失败影响第一次请求的成功状态反馈
• 端点替换：将代码中的${API_URL}/your-second-api-path替换为实际的第二次API接口地址
• 状态反馈：根据二次调用的结果更新提示信息，确保用户能感知到每一步操作的状态

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