jquery ajaxの二次カプセル化を実装する方法

今回は、jquery ajaxの2次カプセル化を実装する方法と、jquery ajaxの2次カプセル化を実装するための注意事項を紹介します。実際のケースを見てみましょう。

前書き

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

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

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

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

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

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

フロントエンドがデータを処理する場合、ajax を介してバックエンドと通信することが避けられません。Ajax は XMLHttpRequest オブジェクトを介してサーバーと通信し、それに基づいて通信用の $.ajax メソッドをカプセル化します。 XMLHttpReaquest. $.ajax メソッドは非常に実用的で、使い方も簡単です。 この 2 番目のクエリ Ajax のカプセル化では、Express を参照して、データを処理して Promise (Deferd) を返すミドルウェア $.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 を追加します。 ) オブジェクトを作成し、コールバックを減らし、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と呼びます。 🎜rrreee🎜🎜🎜🎜🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜フォームフォームの送信を実装するための Ajax メソッド🎜🎜🎜🎜🎜jQuery が Ajax 送信フォームのパラメーターを検証する方法🎜🎜🎜

以上がjquery ajaxの二次カプセル化を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。