国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 重復的ajax請求讓人很受傷

重復的ajax請求讓人很受傷

來源:千鋒教育
發布人:qyf
時間: 2022-10-10 17:17:07 1665393427

  重復的ajax請求一波又一波的襲來,服務器正躲在角落里瑟瑟發抖,它內心是崩潰的,這算是遭了罪了,

  前端小王子為啥沒有做好限制和封鎖,真是傷不起啊,哎,不如意事常八九,能與人言無二三......

  以上場景是我們平時在開發中稍微不注意就會重現的,也因此傷了多少服務器的心;我們作為前端開發人員,應該正視而且重視這個問題。在這里,給大家提供以下幾種解決方案:

  1. UI層面的攔截

  當用戶動了動發財的小手點擊完按鈕后,就立即禁用按鈕, 并開啟等待動畫,如果收到服務器的成功響應返回后,再隱藏動畫,一定要設置超時,時間不能太長,如果過長,用戶會罵街的。

1

  1.$("#submit").prop("disabled",true); //按鈕禁用

  2.showLoading() //顯示動畫

  3.$.ajax({

  ...

  timeout: 4000, // 設置超時時間

  complete:function(){

  hideLoading() //隱藏動畫

  }

  })

  2. JS層面的封鎖

  (1) 暴力點擊

  如果用戶連續暴力點擊按鈕,我們可以通過函數防抖來做,其實就是閉包里的setTimeout 與clearTimeout結合使用, 連續的點擊會把上一次點擊處理函數清掉,我們的 ajax請求會在最后一次點擊后再發出去。

  obtn.onclick = (function(){

  var timer;

  return function(){

  if(timer){

  clearTimeout(timer)

  }

  timer= setTimeout(() => {

  console.log("ajax發送; 查詢結果")

  }, 500)

  }

  })()

  (2)多tab頁快速切換

  多個tab頁 快速切換也是常見的場景,如果用戶從tab1快速切換到tab2,再從tab2快速切換到tab1,不避免的同一個tab 要重復發起多次請求。

  還有一個問題就是,在單頁面應用中,切換tab后dom 結構銷毀了,此時數據回來了,如果去操作了已經銷毀的dom,那么控制臺會報錯。而在vue ,react 等不需要開發者手動操作的dom的框架,如果我們去修改狀態,還會報出如下的警告信息,這就很難看了。

2

  解決這個問題的思路就是abort掉上一個請求。XMLHttpRequest對象有abort方法,可以直接調用。

  如果使用第三方的請求庫的話,比如axios,我們可以為我們的請求創建一個cancel token ,在每個請求設置一個token,在頁面切換, 或者組件銷毀前,只需要通過source.cancel取消就好了,其實原理還是通過xhr的abort方法實現。

  具體的代碼以及流程可以參考如下。

  var CancelToken = axios.CancelToken;

  var source = CancelToken.source();

  axios.get('/user/12345', {

  cancelToken: source.token

  }).catch(function(thrown) {

  if (axios.isCancel(thrown)) {

  console.log('Request canceled', thrown.message);

  } else {

  // handle error

  }

  });

  // cancel the request (the message parameter is optional)

  source.cancel('Operation canceled by the user.');

  不同的使用場景,我們可以靈活的組合以上的解決方案, 不知道這樣做的話,是否能挽回服務器的心,我又想起了夕陽下的奔跑,那是我與服務器美好邂逅,也是我們逝去的青春......

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT