[Angular x AWS SDK for JavaScript] SPAからAWSのデータを取得する際の待ち合わせ処理(非同期処理)

  • SPAのプラットフォームにAWSを採用した際によく書くロジックについてのメモ

    • ex. クライアントからs3 bucketのobjectを取得して画面に表示
  • AWS SDKでデータを取得するまではディベロッパーガイドを見れば容易だが、待ち合わせ処理の書き方が少し面倒

前提知識


実装例

AWS SDK for JavaScript

  • 想定する状況

    • Angularのコンポーネント生成時(画面遷移時)に自動でAWS(S3)から情報を取得して画面に表示する
  • AWSからデータを取得して値を取り出すまでを待ち合わせ処理にする例

    1. ComponentからServiceのロジックを呼び出す
    2. Service内でAWSからデータを取得
      • 変数 = new Promise() の形式で、AWSへ問い合わせるロジックを書く
        • resolve(data)で変数に返り値を格納
      • 各関数間の待ち合わせ処理は async/await で実現する
    3. Promise型の返り値をComponentへ返す
    4. Component側で forkJoin().subscribe を使って受け取る
      .then()で受け取ってもOK (Angularでは基本subscribeが推奨されている)

書き方は他にもあるかも

AWS SDKを導入するまで

sampleの構成

  • request.service.ts

    • AWSとの通信用のService
  • sample.component.ts

    • Serviceを呼び出し、返り値を受け取るComponent
  • sample.component.html

    • 取得したデータを表示する

AWSへリクエストするService

以下の様に書かないと、データが帰ってくる前にcomponentにundefinedを返してしまう

  • AWSへのリクエストからの待ち合わせで返り値を取り出す方法

    • Promiseの中でリクエストする
    • GETしたデータをresolve()で返す
    • resolveで返された値をreturn
  • async/await でService内の各関数間の待ち合わせ処理を実現する

  • Service記載例 (request.service.ts)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    import { Injectable } from '@angular/core';

    // aws-sdkを変数AWSとしてimportする必要がある
    import * as AWS from 'aws-sdk'

    @Injectable({
    providedIn: 'root'
    })

    export class requestService {
    constructor() { }

    // 1. Componentから呼び出される関数
    async getAwsData() {
    return await this.requestData();
    }

    // 2. AWSに対してリクエストする関数
    async requestData() {

    // 変数requestに返り値を格納 待ち合わせのためにPromiseを用いる
    const request = new Promise((resolve, reject) => {

    // AWS SDKサービスのオブジェクトを宣言
    let bucket = new AWS.S3(({params: {Bucket: 'myBucket'}});

    // リクエストを実行 基本的に以下の様にdataに返り値が入る
    bucket.listObject(({}, (err, data ) => {
    if (err) {
    let errorMessage = String(err);
    alert(errorMessage);
    }
    else {
    // resolveでPromiseの処理を終了させる
    resolve(data); // データ加工が必要であれば、ここで関数を呼び出す
    }
    });
    });

    // エラーハンドリング
    request.catch((error) => {alert(error); } );
    // リクエスト結果を返す
    return request;
    }

    }
  • s3のデータの扱い方についてはディベロッパーガイドを参照。ここではあくまで共通した待ち合わせ処理の記法のみ


データを受け取るComponent側

  • Component側の受け取り方は2パターンある

    1. .then()
    2. .subscribe()
  • Component側の実装例(sample.component.ts)

    • serviceを呼び、データを受け取る
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//rxjs 待ち合わせ処理に必要
import { forkJoin } from 'rxjs';

let awsData; //データ受取用の変数を宣言

// 起動時に取得 → ngOnInitから呼び出す
ngOnInit() {
getData();
}

getData() {

// Credential認証 Service側でもいいかも
AWS.config.credentials = new AWS.Credentials("<access key>","<secret key>")

// thenで受け取る例
this.requestService.getAwsData().then(response =>{
console.log(response);
this.awsData = response; // 取得データを代入
});

// subscribeで受け取る例 Promise型のため、forkJoinが必要
forkJoin(this.grequestService.getAwsData()).subscribe(result => {
this.awsData = result[0]; // 取得データを代入
});
}
  • sample.compoent.html 取得したデータを画面に表示
    1
    {{getAwsData}}

参考

関連記事

その他

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×