非同期処理をコントールする方法(await/async)

javascriptの初心者なのですが以下のことをどう実装すればよいか、可能なのか教えてください。
localstorageにトークンを保存している状態なのですが、このトークンをとってきて、ヘッダーに付与にAPIに投げたいです。

javascript
1function fetchData(){
2
3//①トークンを取得しにいく処理//
4
5//②取得したトークンをヘッダーに付与し、APIへのリクエストを作成する処理//
6
7}

簡単にこのような関数があり、トークンをとり、リクエストを作成します、
そしてこの関数はAPIへのリクエストを戻り値とします。
このとき、②で作成されるリクエストのヘッダーの中にトークンが埋め込まれているのが理想なのですが、
②の直下でログを出してみると、埋め込まれていません。
ただ、トークンを格納している変数を見てみると、しっかりとトークンが入っていました。
ログをみていると、①の処理が終わる前に②の処理が終了しているようでした。
そのため、①でトークンを取得する前に②でリクエストを作っていることから、理想とするリクエストができていませんでした。
ここでなのですが、どのようにして①の処理が終わったあとに②の処理を走らせることができるのでしょうか。
非同期関数についてしらべたのですが、どれも関数に対してasyncを使っていました。
①の処理や②の処理を関数化する必要があるのでしょうか。
どのあたりにawait やasyncをつけ、どの部分を関数化させるべきなのか意見ください。

以下により具体的な処理を記載します。（諸事情により全部は載せられなくて、すみません）

function fetchData(){
//①トークンを取得しにいく処理
 const tokenRequest ={
     scope:["http://XXXXX"]
     account:account 
}
msalInstance.acquireTokenSilent(tokenRequest)
.then((res) => {
  let accesstoken = res.accessToken //ここでトークンを取得しています。
}

//②取得したトークンをヘッダーに付与し、APIへのリクエストを作成する処理

const headers = new Header();
const bearer = 'Bearer  ${accsesstoken}';

headers.append("Authorization", bearer)

const options = {
  method:"POST",
 header: headers
};
//以下bodyの作成//
}

int32_t

2022/04/26 12:45

質問文のコードがほぼ空で、助言できません。もっと具体的なコードを開示してください。

退会済みユーザー

2022/04/27 02:04

質問者さん、その後無言ですが、当方が提案した Fiddler などのキャプチャツール (ブラウザのディベロッパーツールでもできるはず) を使って調べることをやってみましたか？　キャプチャ結果を見ないことには、闇夜に鉄砲、暗中模索という感じで、問題を見つけるのが難しく、なかなか進展しないと思うのですが・・・ > 今使っているのとは別の方法でlocalstorageのトークンを取りに行き、同じようにAPIにリクエストした際は上手くデータが取得できてたので、ヘッダーの作成等は問題ないかと思います。特にうまくいくケース/いかないケースがあるなら、Fiddler で両方の要求・応答を調べて、その違いを見るとそこにヒントが見つかると思います。

行動規範の内容に同意します

回答3件

アクセストークンを受け取ってから続けて処理を行いたいのであれば、まずはシンプルに .then の中で一緒に記載しましょう。

js
1function fetchData(){
2  //①トークンを取得しにいく処理
3  const tokenRequest ={
4    scope: ["http://XXXXX"],
5    account: account
6  };
7
8  msalInstance.acquireTokenSilent(tokenRequest)
9    .then((res) => {
10      let accesstoken = res.accessToken; //ここでトークンを取得しています。
11
12      //②取得したトークンをヘッダーに付与し、APIへのリクエストを作成する処理
13      const headers = new Header();
14      const bearer = 'Bearer  ${accsesstoken}';
15
16      headers.append("Authorization", bearer);
17
18      const options = {
19        method:"POST",
20        header: headers
21      };
22      //以下bodyの作成//
23    }
24}

投稿2022/04/26 15:41

mather

総合スコア6753

js
1(res) => {
2  let accesstoken = res.accessToken //ここでトークンを取得しています。
3}

現状のコードだと、この部分のコードは関数 fetchData() が終了した後に呼ばれます。

ご察しの通り、この場合は async/await を使うことで希望の動作が得られます。

function fetchData() の前に async を追加
acquireTokenSilent(tokenRequest) の部分を let accesstoken = (await msalInstance.acquireTokenSilent(tokenRequest)).accessToken; に。
fetchData() の呼び出しコードも、await fetchData() にしたりasync function にするなど変更が必要です。

投稿2022/04/26 14:41

int32_t

総合スコア20880