快捷導(dǎo)航

關(guān)于二次封裝jquery ajax辦法示例詳解

更新時間：2017年07月14日 08:41:48 作者：combine

Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML，下面這篇文章主要給大家介紹了關(guān)于二次封裝jquery ajax辦法示例，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。

前言

Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML

AJax所涉及到得技術(shù)：

1.使用CSS和XHTML來表示。

2. 使用DOM模型來交互和動態(tài)顯示。

3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。(核心)

4.使用javascript來綁定和調(diào)用。

在我們前端處理數(shù)據(jù)的時候免不了要 ajax 與后臺通信， ajax 是通過 XMLHttpRequest 對象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaquest 的基礎(chǔ)上封裝了 $.ajax 辦法進(jìn)行通信， $.ajax 辦法實用性非常強(qiáng)，又非常簡單易用。本次二次封裝 query ajax，參考 express 可以添加中間件處理數(shù)據(jù)，返回 Promise（Defferd）對象，減少回調(diào)，寫 ajax 更加簡潔、優(yōu)雅。

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

大部分的時候我們只需要傳入 url 和 data，就可以獲取到我們想到的數(shù)據(jù)了。

痛點(diǎn)

但是在項目中使用 $.ajax, 它還是有一些痛點(diǎn)的

就是現(xiàn)在基本所有項目的 ajax 返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺在處理業(yè)務(wù)邏輯時的信息。

從返回 data, 變成了 ｛code: 200, data:{}, err_msg:''｝

如果每一個 ajax 請求回來都要判斷 code 是否正確再進(jìn)行業(yè)務(wù)邏輯處理或者報錯提醒，整個項目下來也太冗余了，

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

為了解決這個問題，我們用一個函數(shù)再次封裝 $.ajax，把這種正確與否判斷再處理業(yè)務(wù)邏輯或者報錯提醒提取出來做成公共的部分。

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 使用就可以減少了業(yè)務(wù)錯誤的判斷啦。我們再來完善下，不使用回調(diào)的方式，使用 promise 的方式調(diào)用, 減少回調(diào)，讓代碼更清晰。

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


// 調(diào)用
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
  });
 });
}

// 調(diào)用
// 調(diào)用
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)
 })

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: