フロントエンドの Ajax リクエストに対する洗練されたソリューションを実装する方法

今回は、フロントエンドの Ajax リクエストに対するエレガントなソリューションを実装する方法を説明します。フロントエンドの Ajax リクエストに対するエレガントなソリューションを実装するための 注意事項は何ですか。実際のケースを見てみましょう。

はじめに

AJAX、Asynchronous

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

非同期 JavaScript:

[JavaScript 言語] および関連する [ブラウザー提供のクラス ライブラリ] 関数を使用して、サーバーにリクエストを送信します。サーバーがリクエストを処理した後、[特定の JavaScript

コールバック関数] を実行します。

追記: 上記のリクエストとレスポンスのプロセス全体は、ページ上で認識されることなく[秘密裏に]実行されます。

次に言うことはあまりないので、この記事の本文を見てみましょう。

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

最初に話をさせてください

Promise をサポートする axios のような API は、すでに非常にフレンドリーです。リクエストが成功した後、バックエンドのリターンを取得できます。 then の応答データから。例:

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

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

response.data中，这意味着我们每个请求都需要多做一次处理才能拿到实际的数据。

然后，实际场景后端基本不会直接把数据给我们，他会做一层封装，比如response.data的结构会是这样：

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

所以，response.data.obj才是我们真正要的数据啊喂，所以我们每个请求都需要再多做一次处理=_=

突然有一天，后端说，“response.data不再是对象，改成了JSON字符串，你做一下处理~”。

然后是的，每个接口，是每一个，我们都需要改成JSON.parse(response.data).objその後、実際のシナリオでは、バックエンドは基本的にデータを直接提供しません。たとえば、response.data の構造は次のようになります。

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

ある日突然、バックエンドがこう言いました。 response.data これはオブジェクトではなくなり、JSON文字列

に変更されました。何らかの処理をしてください〜」。

それでは、はい、すべてのインターフェース、すべてを JSON.parse(response.data).obj に変更する必要があります。これは半分の寿命です。

バックエンドが「オブジェクトを再度元に戻しました。前の処理を元に戻すことができます〜」と言ったら。 。 。 バックエンドが「すべてがオブジェクトであるわけではありません。一部は JSON 文字列です。詳細については、更新されたインターフェースのドキュメントを参照してください~」と表示された場合。 。 。 もし会わなかったらどうしよう。 。 。

後で説明します

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

プログラミング言語

プログラムを取得します。

プロキシは、ターゲット オブジェクトの前に「インターセプト」層を設定するものとして理解できます。オブジェクトへの外部アクセスは、まずこのインターセプト層を通過する必要があるため、外部アクセスをフィルタリングして書き換えるメカニズムを提供します。

上記の問題を軽減するには、すべてのインターフェースリクエストを均一にカプセル化する必要があります。このようにして、バックエンドが何度も変更された場合でも、1 か所を変更するだけで済むか、まったく変更しなくても済みます。

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});

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

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

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

推奨読書:

更新せずにステータスの変更と Ajax+PHP コードの削除を実現する

🎜🎜🎜 Ajax がクライアントを実装してサーバーを非同期に呼び出す方法🎜🎜🎜

以上がフロントエンドの Ajax リクエストに対する洗練されたソリューションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。