LWC(Lightning Web Component)で外部APIとAjax通信をするには、Axiosが便利！ | Breaking Codes

Axios とは

Javascript で外部 API と非同期通信をするには、ブラウザ標準の fetch がインストールせずに使えるので簡単です。それに対し Axios は、ライブラリをインポートして使う必要があるのでその分手間ではあるのですが、それを遥かに上回るメリットがあり、私を含め Axios を愛用している Javascript 開発者も少なくありません。

どこらへんが優れているかはここでは割愛し、詳細は公式サイトをご覧ください。

Axios 公式サイト
https://axios-http.com/

Axios Github リポジトリ
https://github.com/axios/axios

LWC で Axios を使う

LWC で Axios を使うには、事前準備として

Axios ライブラリを静的リソースに保存
通信先エンドポイントを CSP 信頼済みサイトに登録

が必要で、これらの準備ができて初めて Axios が使えるようになります。

Axios ライブラリを静的リソースに保存

以下どちらの CDN サイトから、Axios ライブラリのライブラリを取得し、Salesforce の静的リソースに保存します。
※例えば、axiosJs という名前で保存します。

https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
https://unpkg.com/axios/dist/axios.min.js

なぜ静的リソースの保存が必要かというと、LWC は外部のサードパーティライブラリに対してアクセスができないため、必ず Salesforce 内に静的ファイルとして保存しておかないといけません。

通信先エンドポイントを CSP 信頼済みサイトに登録

Axios で連携したい通信先のドメインを、こちらも Salesforce の設定メニュー内の、CSP 信頼済みサイトというところに登録します。Salesforce は CSP が有効化されているため、登録していない先には Ajax 通信はできない仕様となっているようです。

ここまでできて、はじめて LWC の登場です。

サンプルコード

Axios ライブラリの読み込みは、

import { LightningElement } from "lwc";
import Axios from "@salesforce/resourceUrl/axiosJs"; //静的リソース名がaxiosJsの場合
import { loadScript } from "lightning/platformResourceLoader";

export default class SampleAxios extends LightningElement {
  axios = null;
  renderedCallback() {
    if (this.axios != null) {
      return;
    }
    loadScript(this, Axios).then(() => {
      this.axios = axios;
    });
  }
}

のように記載することで、axiosで非同期通信ができるようになります。

例えば、ボタンをクリックしたときにclickedButtonが呼び出されるような場合、

import { LightningElement } from "lwc";
import Axios from "@salesforce/resourceUrl/axiosJs"; //静的リソース名がaxiosJsの場合
import { loadScript } from "lightning/platformResourceLoader";

export default class SampleAxios extends LightningElement {
  axios = null;
  renderedCallback() {
    if (this.axios != null) {
      return;
    }
    loadScript(this, Axios).then(() => {
      this.axios = axios;
    });
  }
  clickedButton() {
    this.axios
      .get("https://xxx.xxxxx.xxx/xxx/xxxx")
      .then(res => {
        // 成功時の動き
      })
      .catch(err => {
        // エラー時の動き
      });
  }
}

と書くことで、ボタンがクリックされてから、外部の API サービスに非同期通信をし、結果を元に処理をする。
ということを、簡潔に記述することができます。