React Nativeでaxiosを使用してネットワークリクエストを行う方法

フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を完了する方法が多数あります。しかし、テクノロジーの発展により、現在見られる 2 つの方法は基本的に axios と fetch です。

Axios は、ブラウザ側と Node.js で実行できる Promise ベースの HTTP ネットワークライブラリです。Vue アプリケーションのネットワークリクエストは基本的にこれを使用して完了します。 Axios には、リクエストのインターセプトと応答、リクエストのキャンセル、自動 JSON 変換、XSRF に対するクライアント側の防御などのサポートなど、多くの優れた機能があります。

axios を使用する前に、プロジェクトに axios プラグインをインストールする必要があります。インストールコマンドは次のとおりです。

//npm 
npm インストール axios --save
//糸
糸に反応ネイティブaxiosを追加

優れたネットワークリクエストライブラリとして、axios は GET、POST、DELET、PUT などの基本的なリクエストをサポートしています。たとえば、axios を使用して GET リクエストを行う場合、以下に示すように、axios.get() メソッドと axios(config { ... }) を使用できます。

axios.get('/getData', {
    パラメータ: { 
      id: 123
    }
  }).then(関数 (応答) {
    console.log(応答);
  })

アクシオス({
  メソッド: 'GET'、
  URL: '/getData',
  パラメータ: {
    id: 123,
  }
}).then(関数 (応答) {
    console.log(応答);
});

axios をネットワークリクエストに直接使用すると、冗長なコードが大量に生成されることがわかります。そのため、実際の開発プロセスでは、以下に示すように、後の使用を容易にするために、axios リクエストのカプセル化も必要になります。

定数リクエスト = axios.create({
  変換レスポンス: [
    関数（データ）{
      データを返します。
    },
  ]、
});

const defaultOptions = { // デフォルト設定の処理 URL: '',
  ユーザーエージェント: 'BIZSTREAM ライブラリ'、
  認証:
    統合：
      access_token: 未定義、
    },
  },
};

クラス Bizstream {
  init(オプション) {
    this.configuration = {...defaultOptions、...options};
    this.base_url = this.configuration.url;
    this.root_path = '';
  }

  post(パス、パラメータ、データ、タイプ = ADMIN_TYPE) {
    this.send(path, 'POST', params, data, type) を返します。
  }

  get(パス、パラメータ、データ、タイプ = ADMIN_TYPE) {
    this.send(path, 'GET', params, data, type) を返します。
  }

  send(パス、メソッド、パラメータ、データ、タイプ、ヘッダーオプション) {
    定数 url = `${this.base_url}${this.root_path}${path}`;
    定数ヘッダー = {
      'ユーザーエージェント': this.configuration.userAgent、
      'コンテンツタイプ': 'application/json',
      ...ヘッダーオプション、
    };

    新しい Promise を返します ((resolve, reject) => {
      リクエスト({url, メソッド, ヘッダー, パラメーター, データ}).then(レスポンス => {
        .... // 返された結果を処理する});
    });
  }
}

エクスポート const bizStream = new Bizstream();

カプセル化後は、ネットワークリクエストの実行がはるかに便利になり、ネットワーク層でいくつかの共通の戻り結果も処理されます。実際の使用では、開発者は必要に応じて必要なパラメータを渡し、返された結果を以下に示すように非同期関数を通じて処理するだけで済みます。

//GET リクエスト const hotMovie='';
const data = apiRequest.get(hotMovie); を待機します。
//POSTリクエスト let baseUrl = '';
パラメータ = {
   ページ番号: 0,
   都市Cd: 31,
 };
const data = apiRequest.post(baseUrl, param); を待機します。

React Nativeでaxiosを使ってネットワークリクエストを行う方法についての記事はこれで終わりです。React Nativeのネットワークリクエストについての詳細は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: