質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

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

sasaki0628
sasaki0628

総合スコア105

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0グッド

0クリップ

287閲覧

投稿2023/01/25 06:07

ある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

1

ベストアンサー

ResultTextconstで定義されているように、この値は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👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

sasaki0628

2023/01/25 06:25

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

0

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

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

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

maisumakun

2023/01/25 06:25

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

2023/01/25 09:57

ありがとうございます。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。