开发那点事（三）封装前端公用网络请求

去年十月份接触的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()关闭遮罩

开发那点事（三）封装前端公用网络请求

猜你喜欢