前言
最近在做一個(gè)針對單個(gè)節(jié)點(diǎn)測速的功能頁面，測速的邏輯是，測上傳速度時(shí)，前端傳5m數(shù)據(jù)給server，記錄上傳和返回?cái)?shù)據(jù)的時(shí)間，測下載速度時(shí)，從server下載1m的數(shù)據(jù)，記錄下載和下載成功的時(shí)間，上傳和下載用的是ajax同步以避免客戶端帶寬阻塞的問題，并進(jìn)行3次取平均值。在開發(fā)過程過，因?yàn)閍jax同步異步的問題，走了不少彎路，特地也把之前遇到的業(yè)務(wù)邏輯整理匯總一下。
ajax請求方法如下
一、普通的ajax，async即同步異步處理，success之后，會有data返回值，status請求狀態(tài)，xhr封裝的是請求頭，但要注意是的是，并不是所有的請求頭信息都能獲取到的，比如center-length就獲取不到
$.ajax({
type: "GET",
async: true, //異步執(zhí)行 默認(rèn)是true異步
url: url,
dataType: "json",
// jsonp: "callback",
success: function(data, status, xhr){
console.log(data);//返回值
console.log(status);//狀態(tài)
console.log(xhr);//obj
console.log(xhr.getResponseHeader("Content-Type"));//application/octet-stream
console.log(xhr.getResponseHeader("Center-Length"));//null
}
});
二、有時(shí)候碰到的業(yè)務(wù)邏輯是這樣的，請求2依賴請求1的返回結(jié)果，請求3依賴請求2的返回結(jié)果，如果用回調(diào)的方式寫，會很冗長，解決的方法有兩個(gè)，首先來看ES5的解決辦法
(1)ES5的解決辦法，用ajax同步，默認(rèn)的ajax是異步的，即多個(gè)請求同時(shí)執(zhí)行，改成同步后，ajax一個(gè)一個(gè)的執(zhí)行，這樣ajax2就能取到ajax1的返回結(jié)果了
let res1 = ""
let res2 = ""
$.ajax({
type: 'get',
async: false, //同步執(zhí)行 默認(rèn)是true異步
url: pars.domain + "/api.php?Action=xxxdate=2017-03-08t=" + (new Date).getTime(),
dataType: 'json',
success: function(res) {
if(res.code == 0){
res1 = res.data.bandwidth[0]
}else{
}
}
});
$.ajax({
type: 'get',
async: false, //同步執(zhí)行 默認(rèn)是true異步
url: pars.domain + "/api.php?Action=xxxdate=2017-03-08dom1111" + res1 + "t=" + (new Date).getTime(),
dataType: 'json',
success: function(res) {
if(res.code == 0){
res2 = res.data.bandwidth[0]
}else{
}
}
});
(2)ES6的解決辦法，用promise的then方法，效果和上面的一樣，ajax會按順序執(zhí)行，并且后面的ajax會拿到前一個(gè)ajax的返回值，這樣寫起來，代碼看起來會很流暢
let pro = new Promise(function(resolve,reject){
let url = pars.domain + "/api.php?Action=xxx=2017-03-08t=" + (new Date).getTime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resData);
}
else{
}
}, "json");
console.log('請求pro成功');
});
//用then處理操作成功，catch處理操作異常
pro.then(requestA)
.then(requestB)
.then(requestC)
.catch(requestError);
function requestA(res){
console.log('上一步的結(jié)果：'+res);
console.log('請求A成功');
let proA = new Promise(function(resolve,reject){
let url = pars.domain + "/api.php?Action=xxxdate=2017-03-08t=" + (new Date).getTime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resData);
}
else{
}
}, "json");
});
return proA
}
function requestB(res){
console.log('上一步的結(jié)果：'+res);
console.log('請求B成功');
let proB = new Promise(function(resolve,reject){
let url = pars.domain + "/api.php?Action=xxxdate=2017-03-08t=" + (new Date).getTime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resData);
}
else{
}
}, "json");
});
return proB
}
function requestC(res){
console.log('上一步的結(jié)果：'+res);
console.log('請求C成功');
let proC = new Promise(function(resolve,reject){
let url = pars.domain + "/api.php?Action=xxxdate=2017-03-08t=" + (new Date).getTime()
let ajax = $.get(url, function(res) {
if (res.code == 0) {
resolve(resData);
}
else{
}
}, "json");
});
return proC
}
function requestError(){
console.log('請求失敗');
}
三、jsonp跨域，動(dòng)態(tài)添加script標(biāo)簽實(shí)現(xiàn)跨域，注意這里有一個(gè)callback需要跟server協(xié)商好
function switchEngineRoomAjax(api,statusChanged){
var api = api;
var statusChanged = statusChanged;
var url = api + "?method=setStatus" + "status=" + statusChanged;
$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
jsonp: "callback",// 這里的callback是給后端接收用的，前端通過動(dòng)態(tài)添加script標(biāo)簽，完成回調(diào)
success: function(res){
if (res.code == 0) {
console.log('更改狀態(tài) jsonp獲取數(shù)據(jù)成功！');
}
else{
}
}
});
};
四、還會碰上這種業(yè)務(wù)邏輯，ajax1 ajax2 ajax3三個(gè)異步請求，不一定哪個(gè)先返回?cái)?shù)據(jù)，都請求成功后，執(zhí)行一個(gè)回調(diào) function，需要注意的是，單獨(dú)的ajax也需要是new的promise
ajax1:function(){
var promise = new Promise(function (resolve, reject) {
var url = "/api.php?Action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('queryLog完成！');
}
else{
}
}, "json");
});
return promise
},
ajax2: function(){
var promise = new Promise(function (resolve, reject) {
var url = "/api.php?Action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('queryGroupNodeList完成！');
}
else{
}
}, "json");
});
return promise
},
ajax3: function(){
var promise = new Promise(function (resolve, reject) {
var url = "/api.php?Action=xxx;
$.get(url, function(res) {
if (res.code == 0) {
resolve('queryGroupNodeMapList完成！');
}
else{
}
}, "json");
});
return promise
},
initQuery: function(){
var mySelf = this;
var promiseList = [];
var ajax1Promise = mySelf.ajax1();
var ajax2Promise = mySelf.ajax2();
var ajax3Promise = mySelf.ajax3();
promiseList.push(ajax1Promise,ajax2Promise,ajax3Promise);
var p1 = new Promise(function (resolve, reject) {
console.log('創(chuàng)建1.2秒延時(shí)執(zhí)行promise');
setTimeout(function () {
resolve("1.2秒延時(shí)執(zhí)行promise");
}, 1200);
});
promiseList.push(p1)
Promise.all(promiseList).then(function (result) {
console.log('ajax全部執(zhí)行完畢：' + JSON.stringify(result)); // ["Hello", "World"]
mySelf.assembleTableData();
});
},
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:- 淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
- Ajax請求中的異步與同步，需要注意的地方說明
- AJAX跨域請求json數(shù)據(jù)的實(shí)現(xiàn)方法
- Ajax請求內(nèi)嵌套Ajax請求示例代碼
- 如何將ajax請求返回的Json格式數(shù)據(jù)循環(huán)輸出成table形式
- Ajax請求在數(shù)據(jù)量大的時(shí)候出現(xiàn)超時(shí)的解決方法
- 多ajax請求的各類解決方案(同步, 隊(duì)列, cancel請求)
- ajax請求亂碼的解決方法(中文亂碼)
- ajax請求成功后新開窗口window.open()被攔截解決方法
- ajax 同步請求和異步請求的差異分析
