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

ある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という定数にしています。

回答2件

ベストアンサー

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

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

js
1const TEST = async () => {
2    const token = await recaptcha.execute({ action: "click" })
3    setResultText(token)
4    const data = await axios({
5      method: "post",
6      data: token,
7      url: "APIのURL",
8    })

投稿2023/01/25 06:23

maisumakun

総合スコア142177

回答へのコメント

sasaki0628

2023/01/25 06:25

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

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

let data: any;

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

投稿2023/01/25 06:23

sasaki0628

総合スコア105