二次カプセル化 jquery ajax メソッドの例 (グラフィック チュートリアル)

Ajax の正式名称は、Asynchronous JavaScript and XML です。次の記事では、jquery ajax の二次カプセル化の例を中心に紹介します。必要な方は一緒に読んでください。

前書き

Ajax の正式名は、非同期 JavaScript および XML です。 非同期 JavaScript および XML

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

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

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

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

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

フロントエンドがデータを処理する場合、ajax を介してバックエンドと通信することが避けられません。Ajax は XMLHttpRequest オブジェクトを介してサーバーと通信し、それに基づいて通信用の $.ajax メソッドをカプセル化します。 XMLHttpReaquest. $.ajax メソッドは非常に実用的で、使い方も簡単です。 このクエリ ajax の 2 番目のカプセル化では、データを処理するミドルウェアを追加し、Promise (Deferd) オブジェクトを返し、コールバックを減らし、ajax をより簡潔かつエレガントに記述するために Express を参照します。 $.ajax 办法进行通信， $.ajax 办法实用性非常强，又非常简单易用。 本次二次封装 query ajax，参考 express 可以添加中间件处理数据，返回 Promise（Defferd） 对象，减少回调， 写 ajax 更加简洁、优雅。

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

大部分的时候我们只需要传入 url 和 data， 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 ｛code: 200, data:{}, err_msg:''｝

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒， 整个项目下来也太冗余了，

$.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)
 }
 })
}

promise

用 util.ajax 代替 $.ajax

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)
 })

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

問題点

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

つまり、現在、基本的にすべてのプロジェクトで ajax によって返されるデータも、バックエンド処理ビジネス ロジックに関する情報を追加しました。

データを返すまで ｛code: 200, data:{}, err_msg:''｝

ajax リクエストが返されるたびに、ビジネス ロジックの処理前にコードが正しいかどうかを判断する必要がありますまたはエラー通知、プロジェクト全体が冗長すぎます、

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 を再度カプセル化し、処理する前にそれが正しいかどうかを判断します。ビジネスロジックやエラーリマインダーを抽出して公開部分とします。 rrreee

お約束

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

🎜🎜ミドルウェア🎜🎜🎜🎜これは公開されたメソッドですが、微分に対処する必要がある場合、微分問題を解決するためにミドルウェアを導入することをExpressと呼びます。 🎜rreee🎜 以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜🎜ajax🎜クロスドメインの問題に対する完璧なソリューション🎜🎜🎜🎜JSにおけるAjaxの使用スキルの詳細な分析🎜🎜🎜🎜JQueryはAjaxを呼び出して画像をロードします🎜🎜

以上が二次カプセル化 jquery ajax メソッドの例 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。