メインコンテンツまでスキップ

リモート API

システム開発ではHTTPリクエスト呼び出しを避けられず、サーバーからデータを取得したり、いくつかの非同期操作を行う必要があります。宜搭は非同期インターフェース呼び出しを行うためにリモートAPI機能を提供します。

リモートデータソースの作成​

ユーザーはデータソースパネルでリモートAPI構成を追加できます： リモートデータソースには以下の構成情報が含まれます：

  • 名称- リモートAPIの一意識別子で、JSの変数定義ルールに従う必要があります；

  • 説明- リモートAPIの説明情報を定義し、変数バインディング時にこの説明情報を表示します；

  • 自動読み込み- 「自動読み込み」を有効にしたデータソースは、ページのレンダリング前にリモートインターフェースをリクエストし、返却データをリモートAPI名のグローバル変数に直接割り当てます。すべての自動読み込みデータソースの読み込みが完了した後にページのレンダリングを開始します；

  • 読み込み方式- 宜搭は以下の2つの異なる読み込み方式（デフォルトは並列読み込み）を提供します：

    • 逐次 - すべての逐次データソースは上から下に実行され、相互に依存関係がある場合は、依存されているデータソースを前に配置する必要があります；
    • 並列 - すべての並列データソースは同時に実行されます；

  • リクエストアドレス- リモートAPIのアクセスアドレスで、宜搭が提供するopenAPIの場合は相対パスを使用でき、サードパーティサービスが提供するインターフェースの場合はクロスドメインアクセスをサポートする必要があります；

  • リクエスト方法- 宜搭は汎用的な非同期リクエスト方法を提供します：JSONP、GET、POST、PUT、DELETE；

  • リクエストパラメータ- 非同期リクエストのリクエストパラメータを設定するために使用され、静的構成または変数バインディングをサポートします；

  • リクエスト送信の有無- ブール値を入力することをサポートし、この変数を通じてこのリクエストを送信すべきかどうかを判断します。この入力域は変数式を入力してリクエスト送信の必要性を決定することもできます；

  • データ処理- 宜搭は4種類のデータ処理関数を提供し、異なる段階でスライス処理を行います：

    • willFetch- リクエスト送信前処理関数で、willFetchではリクエスト送信前にリクエストの各種パラメータを変更できます。例：
    function willFetch(vars, config) {
      // vars.dataでクエリパラメータを変更可能
      // config.headerでheaderを変更可能
      // config.urlでurlを変更可能
      vars.data.a = 1; // リクエストパラメータのaを1に変更
      config.url = 'https://www.taobao.com'; // リクエストのurlを淘宝に変更
      config.header['Content-Type'] = 'application/json'; // Content-Typeを変更
      console.log(vars, config); // 他に変更可能なパラメータを確認できます。
    }
    • fit- リクエスト返却時のデータ適応で、fitはリクエストの元のResponseを変更して対応するデータリクエスト形式に適応できます。例：
    // 宜搭のデフォルトは以下の形式のデータ返却のみ処理します。非同期インターフェース返却構造が要件を満たしていない場合はfitで変換する必要があります
    //{
    //    content: [], // contentフィールドはデータを保持するために使用され、contentに対応するデータ構造は制限されません。
    //    success: true, // successはこのリクエストが成功したかどうかを示すために使用されます
    //}
    function fit(response) {
      const content = (response.content !== undefined) ? response.content : response;
      const error = {
        message: response.errorMsg ||
          (response.errors && response.errors[0] && response.errors[0].msg) ||
          response.content || 'リモートデータソースリクエストエラー、success is false',
      };
      let success = true;
      if (response.success !== undefined) {
        success = response.success;
      } else if (response.hasError !== undefined) {
        success = !response.hasError;
      }
      return {
        content,
        success,
        error,
      };
    }
    • didFetch- リクエスト完了コールバック関数で、didFetchでは受信したデータを変更できます。fitとの違いは、インターフェース返却のsuccessがtrueの場合のみ実行されます。例：
    function didFetch(content) {
        content.b = 1; // 返却データ構造のbフィールドを1に変更
        return content; // 重要、contentを返却する必要があります
    }
    • onError- リクエストエラー処理関数で、onErrorはリモートデータソースのインターフェース例外をキャッチするために使用され、インターフェース返却のsuccessがfalseの場合に実行されます。例：
    function onError(error) {
      console.log(error);
    }

  • デフォルトデータ- インターフェースのデフォルトデータを指定し、インターフェースが返却しない場合またはリクエストに失敗した場合にデフォルトデータを返却します；

API​

宜搭リモートAPIは以下の2つのAPIを提供します：

this.dataSourceMap.xxx.load()​

指定されたリモートAPIを手動で呼び出します。xxxはデータソースパネルで設定されたデータソース名です。リクエストパラメータの入力もサポートされ、API呼び出しで入力されたリクエストパラメータはデータソース構成のリクエストパラメータとマージされてリクエストを送信します。loadメソッドはPromiseを返却します。

例：

export function fetchData() {
  // データソースで構成されたgetDataListリモートAPIをリクエストし、pageSizeとpageパラメータを渡します。リクエスト成功時はconsoleに結果を出力し、リクエスト失敗時はポップアップでアラートを表示
  this.dataSourceMap.getDataList.load({
    pageSize: 10,
    page: this.state.currentPage
  }).then((res) => {
    if (res) {
      console.log('fetchData', res);
    }
  }).catch((err) => {
    this.utils.toast({
      type: 'error',
      title: 'リクエスト失敗！'
    });
  });
}

this.reloadDataSource()​

自動読み込み設定がtrueのすべてのリモートAPIを再リクエストします。

例：

export function reload() {
  // すべての初期データソースリクエストを再リクエスト
  this.reloadDataSource();
}

使用シナリオ​

リモートデータソースはシステム開発で非常に一般的であり、フロントエンドページとバックエンドサービスを結ぶ橋渡しをします。宜搭プラットフォームでは、リモートデータソースを使用する最も一般的な2つのシナリオがあります：

自動読み込みデータソース​

場合によっては、ユーザーがページに入る際に自動的にデータを読み込み、これらのデータをページに表示する必要があります。例えば、マイ待機タスクリストのシナリオです。

  • 自動読み込みデータソースを構成して待機タスクを読み込みます（自動読み込みデータソースはリクエスト完了後自動的に結果をグローバル変数にマウントし、対応する変数名はデータソースの名称になります）：

もちろん、返却データをより意味的に構造化するためにdidFetchデータ処理関数も構成しました：

function didFetch(content) {
  return (content.data || []).map(item => {
    return {
      id: item.formInstId,
      content: item.formData.textField_kymq5pdi,
      done: item.formData.radioField_kymq5pdj
    }
  });
}

  • 次に、テーブルコンポーネントを使用して自動読み込みした待機データを表示する必要があります：

    • テーブルのデータソース変数バインディングstate.todoListを設定；
    • テーブルのフィールドマッピングフィールドおよび対応する型を設定；

  • 最後に、デザイナーのプレビューボタンをクリックすると、待機タスクデータがテーブルに表示されていることがわかります；

手動読み込みデータソース​

場合によっては、ユーザーのインタラクション時にイベント処理を通じて手動でデータソースを呼び出していくつかの操作を行う必要があります。例えば、ユーザーが削除ボタンをクリックした際にリモートAPIを呼び出して待機タスクを削除する場合です。

  • 最初に削除タスクのリモートAPIを構成します：

同時に、このインターフェースのためにdidFetchデータ処理関数も構成し、インターフェースリクエスト成功後、メッセージでユーザーに削除成功を通知し、reloadDataSource APIで自動読み込みリクエストを再リクエストしてタスクリストを更新します：

function didFetch(content) {
  // メッセージでユーザーに削除成功を通知
  this.utils.toast({
    title: 'delete Success!',
  });
  // 自動リクエストを再読み込みしてタスクリストを更新
  this.reloadDataSource();
  return content; // 重要、contentを返却する必要があります
}
  • 次に、テーブルに削除操作項目を追加し、ユーザーが削除項目をクリックしたときに手動でリモートAPIを呼び出して削除操作を完了する必要があります：
    • テーブルの操作列属性を設定：
    • 操作項目を追加：
    • 操作項目タイトルを設定し、コールバック関数でこの操作項目にアクションをバインド：
    • onDelete関数を実装し、データソースを手動で読み込み、削除操作を実現： 
export function onDelete(rowData) {
  this.dataSourceMap.del.load({
    formInstId: rowData.id
  });
}
  • 最後に、デザイナーのプレビューボタンをクリックすると、テーブルの操作列に削除操作項目が表示され、対応する削除ボタンをクリックすると削除操作を実行してリストを更新します；
ヒント

上記の例では、データのクエリおよび削除操作を行うために宜搭プラットフォームが提供するいくつかのオープンインターフェースを使用しています。より多くの宜搭オープンインターフェースについては、OpenAPI 文書 を参照してください。

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited