axiosクライアントのAjaxリクエストメソッド

今回は、axios クライアントでの ajax リクエスト メソッドについて説明します。 axios クライアントで ajax リクエスト メソッドを使用する際の 注意事項については、次のとおりです。

はじめに

AJAX、Asynchronous

JavaScript and XML (非同期 JavaScript および XML)、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジ ソリューション。

非同期 JavaScript:

【JavaScript言語】および関連する【ブラウザ提供のクラスライブラリ】の機能を利用して、サーバーにリクエストを送信します。サーバーがリクエストを処理した後、【特定のJavaScriptコールバック関数を自動的に実行します】。

追記:

上記のリクエストとレスポンスのプロセス全体は、ページ上で認識されることなく[秘密裏に]実行されます。 以下では特に言うことはありませんが、この記事の本文を見てみましょう。

この記事の http クライアントは axios です

まずはお話をさせてください

Promise をサポートする axios のような API は、すでに非常に使いやすいものになっており、リクエストが成功すると、バックエンドから返されたデータをレスポンスから取得できます。例:

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

データは

にあります。つまり、実際のデータを取得するには、リクエストごとにもう 1 つのプロセスを実行する必要があります。

実際のシナリオでは、バックエンドは基本的にデータを直接提供しません。たとえば、response.data の構造は次のようになります。 つまり、

は本当に必要なデータなので、リクエストごとにもう 1 つのプロセスを実行する必要があります =_=

response.data ある日突然、バックエンドから「

はオブジェクトではなくなったので、JSON

文字列response.data.objに変わったので、処理をしてください～」と言われました。

そして、はい、すべてのインターフェース、すべてを response.data、半減期に変更する必要があります。 バックエンドが再度「オブジェクトを元に戻しました。前の処理を元に戻してください～」と言ってきたら。 。 。

バックエンドが「すべてがオブジェクトであるわけではありません。一部は JSON 文字列です。詳細については、更新されたインターフェースのドキュメントを参照してください~」と表示された場合。 。 。 JSON.parse(response.data).obj

もし私たちが会わなかったら。 。 。

残りの私たち

ES6 プロキシは、特定の操作のデフォルトの動作を変更するために使用されます。これは、言語レベルで変更を行うことと同等であるため、一種の「メタプログラミング」、つまり、プログラミング言語

をプログラミングすることになります。

プロキシは、ターゲット オブジェクトの前に「インターセプト」層を設定するものとして理解できます。そのため、オブジェクトへの外部アクセスは、まずこのインターセプト層を通過する必要があります。そのため、外部アクセスをフィルタリングして書き換えるメカニズムを提供します。 上記の問題を軽減するには、すべてのインターフェイス要求を均一にカプセル化する必要があります。このようにして、バックエンドが何度も変更された場合でも、1 か所を変更するだけで済むか、まったく変更しなくても済みます。 りー

対応するインターフェイスのリクエスト部分は次のように変更されます:

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

単一ページで 2 つの zTree のリンクを実現する方法

nodejs で WeChat 共有機能を呼び出す方法

以上がaxiosクライアントのAjaxリクエストメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。