封装 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 相关文章推荐
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
RequireJs的使用详解
Feb 19 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Node.js console控制台简单用法分析
2019/01/04 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python读写Excel文件方法介绍
2014/11/22 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python里dict变成list实例方法
2019/06/26 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
详解Flask前后端分离项目案例
2020/07/24 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
护理实习自我鉴定
2013/12/14 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
弄虚作假心得体会
2014/09/10 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
聊聊golang中多个defer的执行顺序
2021/05/08 Golang