封装 axios+promise通用请求函数操作


Posted in Javascript onAugust 11, 2020

我就废话不多说了,大家还是直接看代码吧~

import axios from "axios";
import baseUrl from "../../setBaseUrl";
axios.defaults.baseURL = baseUrl;
import { Loading, Message } from "element-ui";
const loadingOptions = {
 lock: true,
 text: "拼命加载中",
 spinner: "el-icon-loading",
 background: "rgba(0, 0, 0, 0.7)"
};
if (localStorage.token) {
 axios.defaults.headers.common["x-token"] = localStorage.token;
}
const Http = {
 get: function(url: string, data: any, isLoading: boolean) {
  if (localStorage.token) {
   axios.defaults.headers.common["x-token"] = localStorage.token;
  }
  let loading: any;
  if (isLoading) {
   loading = Loading.service(loadingOptions);
  }
  return new Promise<any>((resolve, reject) => {
   axios
    .get(url, { params: data })
    .then(function(res) {
     if (isLoading) {
      loading.close();
     }
     if (res.data.code === 200) {
      resolve(res.data.data);
     } else {
      // console.warn("Http error Info ===> ", res.data);
      reject(res.data.message);
     }
    })
    .catch(function(err) {
     if (isLoading) {
      loading.close();
     }
     // console.warn("Http error Info ===> ", err);
     Message({
      message: err.message,
      type: "error",
      duration: 2500,
      showClose: true
     });
    });
  }).catch(function(err) {
   Message({
    message: err,
    type: "error",
    duration: 2500,
    showClose: true
   });
  });
 },
 post: function(url: string, data: any, isLoading: boolean) {
  if (localStorage.token) {
   axios.defaults.headers.common["x-token"] = localStorage.token;
  }
  let loading: any;
  if (isLoading) {
   loading = Loading.service(loadingOptions);
  }
  return new Promise<any>((resolve, reject) => {
   axios
    .post(url, data)
    .then(function(res) {
     if (isLoading) {
      loading.close();
     }
     if (res.data.code === 200) {
      resolve(res.data.data);
     } else {
      reject(res.data.message);
     }
    })
    .catch(function(err) {
     if (isLoading) {
      loading.close();
     }
     // console.warn("Http error Info===>", err);
     Message({
      message: err.message,
      type: "error",
      duration: 2500,
      showClose: true
     });
    });
  }).catch(function(err) {
   Message({
    message: err,
    type: "error",
    duration: 2500,
    showClose: true
   });
  });
 },
 put: function(url: string, data: any, isLoading: boolean) {
  if (localStorage.token) {
   axios.defaults.headers.common["x-token"] = localStorage.token;
  }
  let loading: any;
  if (isLoading) {
   loading = Loading.service(loadingOptions);
  }
  return new Promise<any>((resolve, reject) => {
   axios
    .put(url, data)
    .then(function(res) {
     if (isLoading) {
      loading.close();
     }
     if (res.data.code === 200) {
      resolve(res.data.data);
     } else {
      reject(res.data.message);
     }
    })
    .catch(function(err) {
     if (isLoading) {
      loading.close();
     }
     // console.warn("Http error Info===>", err);
     Message({
      message: err.message,
      type: "error",
      duration: 2500,
      showClose: true
     });
    });
  }).catch(function(err) {
   Message({
    message: err,
    type: "error",
    duration: 2500,
    showClose: true
   });
  });
 },
 delete: function(url: string, data: any, isLoading: boolean) {
  if (localStorage.token) {
   axios.defaults.headers.common["x-token"] = localStorage.token;
  }
  let loading: any;
  if (isLoading) {
   loading = Loading.service(loadingOptions);
  }
  return new Promise<any>((resolve, reject) => {
   axios
    .delete(url, data)
    .then(function(res) {
     if (isLoading) {
      loading.close();
     }
     if (res.data.code === 200) {
      resolve(res.data.data);
     } else {
      reject(res.data.message);
     }
    })
    .catch(function(err) {
     if (isLoading) {
      loading.close();
     }
     // console.warn("Http error Info===>", err);
     Message({
      message: err.message,
      type: "error",
      duration: 2500,
      showClose: true
     });
    });
  }).catch(function(err) {
   Message({
    message: err,
    type: "error",
    duration: 2500,
    showClose: true
   });
  });
 }
};
export default Http;

补充知识:vuex刷新页面是store被更新,如何解决数据备份?

我用的方法很简单,在App.vue中的生命周期函数created中,监听页面刷新,在页面刷新的时候,将store的数据及时存储在sessionStorage中,然后刷新完毕后就可以将sessionStorage中的数据再取出来用

created () { //页面刷新store数据备份
  if (localStorage.cmstoken) {
   this.$router.replace("/data");
  }else {
   this.$router.replace("/");
  }
  if (sessionStorage.getItem("store") ) { //在页面加载时读取sessionStorage里的状态信息
    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
  }
  window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
  })
 },

以上这篇封装 axios+promise通用请求函数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
没有document.getElementByName方法
Aug 19 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
JS中的phototype详解
Feb 04 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
浅析js中mvvm模式实现的原理
Oct 06 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
node.js express框架简介与实现
Jul 23 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 #Javascript
vue 调用 RESTful风格接口操作
Aug 11 #Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 #Javascript
vue接口请求加密实例
Aug 11 #Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
You might like
解析php如何将日志写进syslog
2013/06/28 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python简单商城购物车实例代码
2018/03/15 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
2014年会计工作总结
2014/11/27 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
学校安全管理制度
2015/08/06 职场文书
导游词之长城八达岭
2019/09/24 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python