あるAPIを実行してから次のAPIを実行したい

Question

あるAPIを実行して、そのAPIによって取得したtokenを次のAPIのデータに入れてpost送信したいのですが、2番目のAPIが先に実行されてしまいうまくいきません。順番に確実にAPIを実行させるにはどう書けばよいでしょうか。

const [ResultText,setResultText] = useState("");

const TEST = async () => {
    recaptcha.execute({ action: "click" }).then((token) => {
      setResultText(token)
    })
    const data = await axios({
      method: "post",
      data: ResultText,
      url: "APIのURL",
    })
    以下、定数dataに対する処理

recaptcha.executeはひとつ目のAPIで、reCAPTCHAv3のトークンを取得します。そのトークンをResultTextという変数に入れています。ふたつ目のAPIはResultTextをPOST送信し、レスポンスをdataという定数にしています。

Answer 1

ResultTextがconstで定義されているように、この値は1つのコールバックを実行している間は変化しません。

stateとは別に値を持たせて、それをawaitで回す形にすればいいのではないでしょうか。

const TEST = async () => {
    const token = await recaptcha.execute({ action: "click" })
    setResultText(token)
    const data = await axios({
      method: "post",
      data: token,
      url: "APIのURL",
    })

Comments

[sasaki0628]

ありがとうございます。勉強になりました。

Answer 2

正しい書き方なのかわかりませんが、以下の処理で動くようになりました。

let data: any;

const TEST = async () => {
    recaptcha.execute({ action: "click" }).then((token) => {
      data = axios({
      method: "post",
      data: token,
      url: "APIのURL",
    })
    })
    以下、定数dataに対する処理

Comments

[maisumakun]

これでは、「以下、定数dataに対する処理」の部分が通信を待たずに実行されてしまいます。

[sasaki0628]

ありがとうございます。