開發那點事（三）封裝前端公用網絡請求

去年十月份接觸的vue，到現在已經有了半年。今天分享一下，自己封裝的帶加載動畫效果前端公用網絡請求，適用於vue以及微信小程序

1 抽取url前綴，數據，以及回調方法

在api.js文件中定義preUrl，在網絡請求中通過拼接preUrl以及方法中傳遞來的url形成完整的api接口，在網絡請求的回調方法中，做出相應的邏輯操作。相關代碼如下

function get(url, vueObj, successCallback, errorCallback,loadMsg='加載中...') {
  let realurl = preUrl + url;
  axios.get(realurl, {
  }).then(function (response) {
    stopNetWork();
    console.log(response);
    successCallback(vueObj, response.data)
  }).catch(function (response) {
    errorCallback(vueObj, response);

  })
}

2 網絡加載效果

在網絡請求前，我們能在網頁中加上遮罩層，當請求完成時將它移除，這一步驟需要用到js動態添加div,代碼如下。

//開始加載動畫效果
function startNetWork(msgText) {
  //修復多接口訪問無法關閉浮層BUG
  if (document.body.contains(loadDialog)) {
    document.body.removeChild(loadDialog);
  }
  loadDialog = document.createElement('div');
  loadDialog.className = 'popContainer';
  let loadImage = document.createElement('img');
  loadImage.src = 'static/img/load.svg';
  let loadMsg = document.createElement('label');
  loadMsg.innerText = msgText?msgText:'加載中...';
  loadDialog.appendChild(loadImage);
  loadDialog.appendChild(loadMsg);
  document.body.appendChild(loadDialog)
}
//關閉加載動畫效果
function stopNetWork() {
  //修復多接口訪問無法關閉浮層BUG
  if (document.body.contains(loadDialog)) {
    document.body.removeChild(loadDialog);
  }
}

3 將步驟結合

最終達到的效果，只需要調用get方法就能自動的加載網絡加載效果，因爲抽離了域名前綴，方便服務部署

function get(url, vueObj, successCallback, errorCallback,loadMsg='加載中...') {
  let realurl = preUrl + url;
  startNetWork(loadMsg);
  // let token = localStorage.getItem('token')
  // if (!token) {
  //   // 跳轉回登錄頁
  //   vueObj.$router.push({path: '/'})
  // }
  axios.get(realurl, {
    // headers: {
    //   token: token
    // }
  }).then(function (response) {
    stopNetWork();
    console.log(response);
    successCallback(vueObj, response.data)
  }).catch(function (response) {
    stopNetWork();
    errorCallback(vueObj, response);

  })
}
export {get} //將方法暴露

拓展

微信小程序與vue很相似，我們也可以將網絡請求方法抽取，思路是一樣的。請求前wx.showLoading()打開遮罩,然後在回調方法中執行wx.hideLoading()關閉遮罩