<strike id="ysggm"></strike>

<ul id="ysggm"></ul><del id="ysggm"></del>

<ul id="ysggm"></ul>

點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

關于二次封裝jquery ajax辦法示例詳解

來源：懂視網責編：小采時間：2020-11-27 22:51:37

關于二次封裝jquery ajax辦法示例詳解

關于二次封裝jquery ajax辦法示例詳解:前言 Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML AJax所涉及到得技術： 1.使用CSS和XHTML來表示。 2. 使用DOM模型來交互和動態顯示。 3.使用XMLHttpRequest來和服務器進行異步通信。(核心) 4.使用jav

推薦度：

點擊下載本文 文檔為doc格式

導讀關于二次封裝jquery ajax辦法示例詳解:前言 Ajax 的全稱是Asynchronous JavaScript and XML 異步的javaScript和XML AJax所涉及到得技術： 1.使用CSS和XHTML來表示。 2. 使用DOM模型來交互和動態顯示。 3.使用XMLHttpRequest來和服務器進行異步通信。(核心) 4.使用jav

前言

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

AJax所涉及到得技術：

1.使用CSS和XHTML來表示。

2. 使用DOM模型來交互和動態顯示。

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

4.使用javascript來綁定和調用。

在我們前端處理數據的時候免不了要 ajax 與后臺通信， ajax 是通過 XMLHttpRequest 對象與服務器進行通信的， jquery 在 XMLHttpReaquest 的基礎上封裝了 $.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 使用就可以減少了業務錯誤的判斷啦。我們再來完善下，不使用回調的方式，使用 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)
 })

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

關于二次封裝jquery ajax辦法示例詳解

推薦度：

點擊下載本文 文檔為doc格式

標簽：封裝 ajax jQuery

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

關于二次封裝jquery ajax辦法示例詳解

關于二次封裝jquery ajax辦法示例詳解

關于二次封裝jquery ajax辦法示例詳解

最新推薦

猜你喜歡

熱門推薦