前後端資料互動(三)——ajax 封裝及呼叫

前端人發表於2021-09-06
後端封裝

有很多框架已經將 ajax 封裝，需要的時候只需要呼叫就好，比如 jquery 是最常用的。我們為什麼還需要學習 ajax 的封裝呢？首先加強我們對ajax的認識，其次如果只是因為ajax請求需要引入框架，我們可以自己封裝一個，這樣就不需要引入多餘的框架了。

一、封裝的注意點

封裝是為了把相同的部分都實現公用，節省資源，提高程式碼複用性，工作效率也高，所以需要把不同的引數事件型別等通過呼叫的時候傳入，需要注意點有：

1.1、傳參

傳送 ajax 請求時，主要引數有：

  • 請求url
  • 請求型別
  • 請求引數
  • 成功回撥
  • 失敗回撥
  • 超時時間

以上六個引數必須設定成動態傳入的，便於控制任意 ajax 請求。超時時間可以統一設定，如果作為傳參可以更方便地控制任意一個請求超時。

1.2、請求型別分別處理

請求型別有 get 和 post 兩種，get型別傳值的時候，資料跟在url地址後，post傳值時在請求體內攜帶，還需設定請求資料型別。所以需要判斷分別處理。

if(type == 'GET'){
 xhr.open( 'GET' , url+'?'+strData , true )
 shr.send()
}else{
 xhr.open('POST',url,true)
 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
 xhr.send( strData )
}

 

1.3、請求超時處理

網路服務異常或者介面異常的時候，請求傳送出去沒有響應，頁面也不會做出任何反應，需要全域性加一個超時處理，超出時間還沒有返回時，自動結束請求，返回異常。

使用語法如下：

//設定時間為2s
xhr.timeout = 2000 ;
//超時回撥
xhr.ontimeout = function(){
 console.log('網路異常，稍後重試')
}

1.4、錯誤處理

網路中斷，請求無法傳送到伺服器時，需要對請求失敗進行處理。使用onerror事件處理。

使用語法如下：

xhr.onerror = function(){
 console.log("網路異常，請檢查網路")
}

二、封裝 ajax 程式碼

根據ajax的請求流程，封裝程式碼如下：便於以後使用，建議收藏。

function ajax(option) {
 // method, url, data, timeout, success, error
 var xhr;
 var str = data2str(option.data);
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 }else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (option.type.toLowerCase() === 'post') {
  xhr.open(option.type, option.url, true);
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhr.send(str);
  } else if (option.type.toLowerCase() === 'get') {
   xhr.open(option.type, option.url + '?' + str, true);
   xhr.send();
  }
 xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
   clearTimeout(timer);
   if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) {
    option.success(xhr);
   }else {
    option.error(xhr);
   }
  }
 };
 if (option.timeout) {
  var timer = setTimeout(function () {
   xhr.abort();
   clearTimeout(timer);
  }, option.timeout)
 }
}
// 將物件轉化成用於傳輸的字串
function data2str(data) {
 var res = [];
 data.t = new Date().getTime();
 for (var key in data) {
  res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 return res.join('&');
}

 

使用的時候呼叫程式碼如下：

ajax({
  method:'GET',
  url:'1.txt',
  data:{
   //請求資料
  },
  timeout:2000,
  success:(res)=>{
   console.log('成功返回',res.response)
  },
  error: err => {
   console.log('錯誤資訊',err)
  }
 })

 

相關文章