【AWS】API Gatewayのタイムアウトを回避！処理時間が29秒以上でもOKな対策方法を紹介！

import logo from './logo.svg';
import './App.css';
import {Button} from "@mui/material"

function App() {
  const aaa = async () =>{
    console.log("aaa");

    const apiUrl = 'https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/develop/execution'; // 実際のAPIのエンドポイントに置き換える

    const requestData = {
      body: { aaa: '1111' },
      stateMachineArn: 'arn:aws:states:ap-northeast-1:xxxxxxx:stateMachine:MyStateMachine-b4ej5xjt2'
    };
    
    let work_res_data;

    // 実行要求
    await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 他に必要なヘッダーがあれば追加
      },
      body: JSON.stringify(requestData),
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        work_res_data = data;
        console.log('APIからの応答:', data);
        // 応答を使って何か処理を行う
      })
      .catch(error => {
        console.error('エラー発生:', error);
        // エラーが発生した場合の処理
      });

      // 結果確認
    await fetch(apiUrl + "/status", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 他に必要なヘッダーがあれば追加
      },
      body: JSON.stringify(work_res_data),
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log('APIからの応答:', data);
        // 応答を使って何か処理を行う
      })
      .catch(error => {
        console.error('エラー発生:', error);
        // エラーが発生した場合の処理
      });

  }

  return (
    <div className="App">
      <Button onClick={aaa}>StepFunctionsnAPIのテスト用</Button>
    </div>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';
import {Button} from "@mui/material"
import {MuiFileInput} from "mui-file-input"
import {useState} from "react"

function App() {

  const [file, setFile] = useState(null);
  const handleChangeFile =(newFile) =>{
    setFile(newFile);
  }

  const aaa = async () =>{
    console.log("aaa");


    const apiUrl = 'https://xxxxx.execute-api.ap-northeast-1.amazonaws.com/test/execution'; // 実際のAPIのエンドポイントに置き換える


    let formData = new FormData();
    formData.append('file', file);
   
    let work_res_data;

    // 実行要求
    await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data'
        // 他に必要なヘッダーがあれば追加
      },
      body: formData,
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        work_res_data = data;
        console.log('APIからの応答:', data);
        // 応答を使って何か処理を行う
      })
      .catch(error => {
        console.error('エラー発生:', error);
        // エラーが発生した場合の処理
      });

      // 結果確認
      var resStatusData = await confirmRequest(apiUrl, work_res_data)
      
      while (resStatusData.status === "RUNNING") {
        console.log(resStatusData.status);
        await sleep(1000);
        resStatusData = await confirmRequest(apiUrl, work_res_data)
      }
      console.log("abc");
  }

  function sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
  }

  async function confirmRequest(apiUrl, work_res_data){

    let returnData;
    
    await fetch(apiUrl + "/status", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(work_res_data),
    })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log('APIからの応答:', data);
        returnData = data;
      })
      .catch(error => {
        console.error('エラー発生:', error);
        returnData = error;
      });
    return returnData;
  }

  return (
    <div className="App">
      <input type="file" id="fileInput"></input>
      <MuiFileInput value={file} onChange={handleChangeFile}></MuiFileInput>
      <Button onClick={aaa}>StepFunctionsnAPIのテスト</Button>
    </div>
  );
}

export default App;