封装 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 相关文章推荐
JavaScript加强之自定义callback示例
Sep 21 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
JS判断数组四种实现方法详解
Jun 29 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中文字符串截取方法实例总结
2014/09/30 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
php 数组元素快速去重
2017/05/05 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
对Python中for复合语句的使用示例讲解
2018/11/01 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python解析多帧dicom数据详解
2020/01/13 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
护士实习生自我鉴定范文
2013/12/10 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
小露珠教学反思
2014/04/30 职场文书
最新离婚协议书范本
2014/08/19 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
工作后的感想
2015/08/07 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android