Visual Builderの保留中のRESTコールの中断

applicationへのRESTコールに時間がかかりすぎる場合は、途中でユーザーがコールを取り消せます。これを行うには、webリクエストを中止できるブラウザベースのインタフェースであるAbortControllerを追加します。

Visual BuilderアプリケーションでAbortControllerを使用する方法を示すサンプル・シナリオを次に示します。デモ目的で、アプリケーションに2つのボタンがあるページがあるとします: 「RESTのコール」ボタンおよび「RESTの取消」ボタン。

ユーザーが「RESTのコール」ボタンをクリックすると、ojActionイベントによってアクション・チェーンがトリガーされ、Get/Employee/{Employee_Id}エンドポイントがコールされ、ユーザーに通知が表示されます。
ユーザーが「RESTの取消」ボタンをクリックすると、別のojActionイベントによってアクション・チェーンがトリガーされ、RESTリクエストが中止され、ユーザーに通知が表示されます。

ノート:

AbortController APIは、「PWAとして有効」または「オフライン機能用に構成」のVisual Builderアプリケーションではサポートされていません。

AbortController APIを使用するには、最初にAbortControllerインスタンスを作成する必要があります。また、作成されたAbortControllerインスタンスでabortメソッドをコールする必要があります。これを行うには、applicationページ全体で使用できる2つのアプリケーション・レベルのJavaScript関数を追加します。
1. applicationノードを選択し、JavaScriptをクリックしてアプリケーション・レベルのJavaScriptエディタを開きます。
2. 次のJavaScriptスニペットをエディタに追加します:
```
  /**
   * Method to create an instance of AbortController. 
   */
  createAbortController() {
    return new AbortController();
  }

  /**
   * Method to invoke the abort method on the AbortController instance. 
   */
  abortRequests(abortController) {
    abortController.abort();
  }
```
  JSエディタは次のようになります:
  
  図abortcontroller-js-snippet.jpgの説明
作成されるAbortControllerインスタンスを追跡する変数を作成します。
1. 「変数」をクリックして、アプリケーション・レベルの変数エディタを開きます。
2. 「+変数」をクリックし、ID abortController (たとえば)の変数を作成し、「Any」と入力します。
アプリケーションがロードされたときにabortController変数を初期化するには、アプリケーションのvbEnterイベントにレスポンスしてトリガーされるアクション・チェーンを作成します。
1. アプリケーション・レベルで「イベント・リスナー」をクリックします。
2. 「+イベント・リスナー」をクリックします。
3. ライフサイクル・イベントの下のvbEnterを選択し、「次」をクリックします。
4. 「アプリケーション・アクション・チェーンの作成」を選択して、新しいアプリケーション・レベルのアクション・チェーンを作成します。「終了」をクリックします。
5. 新しく作成したvbEnterListenerアクション・チェーンの横にある「アクション・チェーンに移動」をクリックして、アクション・チェーン・エディタを開きます。
6. アクション・パレットから、関数呼出しアクションをキャンバスにドラッグします。
7. アクション「関数名」プロパティで、アプリケーションの下のcreateAbortControllerを選択して、AbortControllerインスタンスを作成するJS関数をコールします。
  
  「図abortcontroller-callfunction.jpgの説明」
8. 「変数の割当て」アクションをドラッグ・アンド・ドロップして、「ファンクションのコール」アクションに従います。
9. 「変数の割当て」アクションの「プロパティ」ペインで、「変数」リストから「アプリケーション」の下のabortControllerを選択します。
  
  「図abortcontroller-assignvariable.jpgの説明」
10. 「値」プロパティにマウス・ポインタを重ねて(x) 「変数ピッカーを開く」をクリックし、「ローカル」の下のcreateAbortControllerを選択して、createAbortController関数によって返された値をabortController変数に割り当てます。
AbortControllerを、中断するRESTコールに関連付けます。これを行うには、signalオプションを使用して、AbortControllerインスタンスのAbortSignalをRESTリクエストにアタッチします。たとえば、Get/Employee/{Employee_Id}エンドポイント・リクエストを中止するには、ボタン・コンポーネントの基礎となるアクション・チェーンのコールRESTアクションにAbortSignalをアタッチします(この例ではButtonActionChain)。
1. アクション・チェーン・エディタで、コールRESTアクションを使用するアクション・チェーンを開きます。この例では、ページ上のREST呼出しボタンを想定しているため、このコールRESTアクションは、ページ・レベルで定義されたButtonActionChainアクション・チェーンに存在します。
2. 「コード」をクリックして、コード・ビューに切り替えます。
3. 特定のコールRESTアクションのコード・スニペットを探し、endpointコンストラクタの後に次の行を追加します:
```
signal: $application.variables.abortController.signal,
```
  この例では、AbortSignalは$application.variables.abortController.signalを介してアクセスされ、get_Employee RESTリクエストにアタッチされます:
  
  図abortcontroller-abortsignal.jpgの説明
AbortSignalがアタッチされた状態でRESTリクエストを中断するには、AbortControllerインスタンスでabortメソッドを呼び出すアクション・チェーンを構築します。この例では、ユーザーがページ上のGet/Employee/{Employee_Id}リクエストを中止するためにクリックする「取消」ボタンを想定しているため、中断アクション・チェーンはページ・レベルで定義します(ただし、アプリケーション・レベルでも定義できます)。
1. 「アクション・チェーン」をクリックして、アクション・チェーン・エディタを開きます。
2. 「+アクション・チェーン」をクリックし、abortRequestsChainをIDとして新しいアクション・チェーンを作成します。
3. アクション・パレットから、関数呼出しアクションをキャンバスにドラッグします。
4. アクション「関数名」プロパティで、abortRequestsを選択して、特定のRESTリクエストのAbortControllerインスタンスでabortメソッドをコールするJS関数を指定します。
5. abortController変数を入力パラメータとしてabortRequests関数に渡すには、「パラメータ」でabortControllerを見つけ、パラメータ「変数ピッカーを開く」にマウス・ポインタを重ね、「アプリケーション」でabortControllerを選択します。
  
  「図abortcontroller-mapinputparam.jpgの説明」
6. AbortControllerインスタンスでabortメソッドをコールすると、今後のリクエストは完全に中断されるため、新しいAbortControllerインスタンスを作成してabortController変数に割り当てる必要があります。これを行うには、コール・アクション・チェーン・アクションをドラッグ・アンド・ドロップし、「アクション・チェーンID」リストでvbEnterListenerアクション・チェーン(両方を実行するために「ステップ3」で作成)を選択します。
  
  「図abortcontroller-callactionchain.jpgの説明」
7. 必要に応じて他の処理を追加して、取消操作を処理します。たとえば、ユーザーに通知するアクションを追加し、アプリケーションの一般的なフローに必要なものをリセットできます。