封裝ajax、axios請求

wade3po發表於2019-01-23
封裝iOS

作為一個前端開發工作者，與後臺互動是必不可少的，用互動實現非同步重新整理頁面、請求資料、傳送資料等等。一般互動都是基於JavaScript的XMLHttpRequest來做封裝，目前比較常用的有Ajax、Fetch、axios等。但是很多開發的時候都是直接用這幾個給的方法，沒有二次封裝。雖然這幾個給的直接用也很方便，但是不同專案不同公司，各自的約定也不一樣，所以個人認為還是需要二次封裝一個適合自己適合專案的互動方法。

由於本人從未用過Fetch,所以只講解一下Ajax和axios本人的封裝。

一般我們用Ajax的時候是這樣的

$.ajax({
    type:'',
    url:'',
    data:{},
    success:function (data) {
    },
    error:function () {
        
    }
})
複製程式碼

然後在成功或者失敗的方法裡進行操作，但是一些失敗的返回，是跟後臺約定好的，是否不需要每一次呼叫都去判斷一遍。或者是錯誤的時候，是否也不需要每一次都做判斷，只要做一次判斷，也就是全域性的方法。再有就是引數，是否使用get還是post（一般只用這兩個）直接用引數傳參，資料地址也是。所以我自己封裝了一個簡易的方法

const apiurl = function (url) {
    return '' + url;
}
const ajaxConnect = (type,url,data,callBack) => {

var data = data || {};
    $.ajax({
        type:type,
        url:apiurl(url),
        data:data,
        success:function (data) {
            if(data.code == 10000){

       

      }else if(data.code == 0){

        

      }else{

        callBack(data.data);

      }       

 },
        error:function (data) {
            
        }
    })
};
複製程式碼

呼叫的時候就是

ajaxConnect('post','','',function (data) {
    

})
複製程式碼

可以看見，我們跟後臺約定好錯誤程式碼，我們可以全域性處理，錯誤之後要做什麼操作也可以全域性處理，包括錯誤狀態也可以全域性處理。包括每個介面都需要傳一個token還是傳什麼也可以這邊直接處理，這樣就不需要每一個都加那個需要傳的欄位。

我們都知道，Ajax除了這些引數之外還有好多，比如穿檔案、同步還是非同步等等，需要的話可以封裝上去，但是個人認為那些用的少的，需要用到的時候重新寫一個Ajax會更好。

Axios封裝跟Ajax差不多，反而更簡單，因為axios已經幫我們設定好了響應和請求的過程。

//請求攔截器

axios.interceptors.request.use(config => {

  //請求之前處理

  return config

}, error => error);
複製程式碼

//響應攔截器即異常處理

axios.interceptors.response.use(response => {

  return response.data;

}, error => {

  //錯誤返回處理

  return error.response;

});

 

//設定預設地址

axios.defaults.baseURL = baseUrl;

//設定超過10秒報錯

axios.defaults.timeout = 5000;

//還可設定各種請求頭，按需配置

 

//get請求

function get(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: data,
    }).then(response => {
        resolve(response);
      }).catch(err => {
        console.log(err)
      })
  })
}

 

//post請求

function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err)
      })
  })
}
複製程式碼

可以看見，axios有請求攔截器和響應攔截器，我們可以在請求前加上全域性需要的欄位或者是設定動畫等等，也可以在響應攔截器裡面處理跟後端約定好的各種code。

因為es6的Promise語法，我這邊返回了Promise物件，只是為了需要同步的時候可以使用Promise.all()方法。

以上就是想要分享的封裝請求，我封裝的並不是很好，只是想讓大家知道請求最好是自己分裝一個適合的。

歡迎關注 Coding個人筆記 公眾號

相關文章