ホームページ > 記事 > バックエンド開発 > Ajax の二次カプセル化 jquery について

Ajax の二次カプセル化 jquery について

小云云オリジナル: 2017-12-26 10:30:241638ブラウズ

Ajax の正式名は、jquery の二次カプセル化のための非同期 JavaScript と XML であることは誰もが知っています。次の記事では、主に jquery ajax の二次カプセル化の例を紹介します。以下をご覧ください。皆さんのお役に立てれば幸いです。

AJax には次のテクノロジーが含まれます:

1. CSS と XHTML を使用して表現します。

2. インタラクションと動的な表示には DOM モデルを使用します。

3. XMLHttpRequest を使用してサーバーと非同期通信します。 (コア)

4. JavaScript を使用してバインドして呼び出します。

フロントエンドがデータを処理する場合、ajax を介してバックエンドと通信することが避けられません。Ajax は XMLHttpRequest オブジェクトを介してサーバーと通信し、$.ajax オブジェクトに基づいた通信を行います。方法は非常に実用的で、非常にシンプルで使いやすいです。このクエリ ajax の 2 番目のカプセル化では、データを処理するミドルウェアを追加し、Promise (Deferd) オブジェクトを返し、コールバックを減らし、ajax をより簡潔かつエレガントに記述するために Express を参照します。

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

ほとんどの場合、必要なデータを取得するには、URL とデータを渡すだけで済みます。

問題点

しかし、プロジェクトで $.ajax を使用する場合、まだいくつかの問題点があります

つまり、基本的にすべてのプロジェクトで ajax によって返されるデータも再カプセル化され、バックグラウンド処理ビジネスが行われるようになりました。ロジックの情報が追加されました。

データが返されると、｛code: 200, data:{}, err_msg:''｝

すべての ajax リクエストが返された場合、ビジネスロジックの処理やエラーリマインダーの前に、コードが正しいかどうかを判断する必要があります。プロジェクト全体が冗長すぎる

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

この問題を解決するために、$.ajaxを再度カプセル化する関数を使用し、ビジネスロジックやエラーリマインダーを抽出して正しいかどうかを判断し、公開します。一部。

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}

お約束

ビジネスエラーを減らすために、$.ajax の代わりに util.ajax を使用してください。コールバックを使用する代わりに、Promise を使用して呼び出し、コールバックを減らし、コードをより明確にしてみましょう。

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}


// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })

ミドルウェア

これはパブリックなメソッドですが、微分の問題を解決するためにミドルウェアを導入するためにExpressを参照する必要がある場合があります。

util.ajax = function(obj, middleware) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })

 // 添加中间件
 if(!middleware) {
  middleware = function(){};
 }
 return deferred.done(middleware).fail(function (err) {
  message({
   content: err,
   type: 'error',
   showLeftIcon: true,
   duration: 5000
  });
 });
}

// 调用
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
var middleware = function(data) {
 data.forEach(function(item){
  item.fullName = item.firstName + item.lastName
 })
}
util.ajax(obj, middleware)
 .done(function(data){
  console.log(data.fullName)
 })

Ajax の二次カプセル化 jquery について

関連記事