Vue+axios实现统一接口管理的方法


Posted in Javascript onJuly 23, 2018

通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法。

但咱们不用每个接口都定义成一个??碌?xios请求方法,既然是想简单点,就尽量只在一处完成简单的配置。

1、配置api接口

将同一模块的接口放在一个文件下,比如我在src的services下定义了一个global.js作为全局服务的配置,在它里面配置的api可以作为这个服务的方法。

比如:

Vue+axios实现统一接口管理的方法

name字段将作为之后被调用的方法名,但这个只是一个单纯的对象,现在我们定义方法将它转为方法。

2、将接口配置的数组对象转化为方法

import axios from "axios";
const withAxios = apiConfig => {
 const serviceMap = {};
 apiConfig.map(({ name, url, method }) => {
 serviceMap[name] = async function(data = {}) {
  let key = "params";
  if (method === "post" || method === "put") {
  key = "data";
  }
  return axios({
  method,
  url: "/api" + url,
  [key]: data
  });
 };
 });
 return serviceMap;
};
export default withAxios;

我们在utils下定义了一个通用的方法withAxios,这个方法的作用是将api配置文件转化为包含方法的一个对象。

3、在api配置文件中使用withAxios

import withAxios from "../utils/withAxios";
const apiConfig = [
 {
 name: "userLogin",
 url: "/login",
 method: "get"
 },
 {
 name: "getUserInfo",
 url: "/login/user",
 method: "get"
 },
 {
 name: "getDeptList",
 url: "/login/department",
 method: "get"
 }
];
export default withAxios(apiConfig);

直接export出包装后的对象即可。

4、在vuex中使用

想在vuex中调用某个api,首先import刚才导出的对象

import GlobalService from "@/services/global";

在action中调用某个接口:

const { data } = await GlobalService.userLogin(payload);

这样就完事了。之后只需要配置-调用这么两步就可以完成接口调用。

5、axios的其他配置

我们可以在utils的withAxios中顺便对axios做一些通用的设置。

比如每次请求头中都自动带上鉴权:

axios.defaults.headers.common["Authorization"] = getCookie("jwt") || "";
// 注意:此处只会在web应用初始化时配置,在登录成功后需重新配置Authorization。

比如使用拦截器对返回对象做统一处理:

axios.interceptors.response.use(response => {
 const { data } = response;
 if (data.status === -2) {
 Vue.prototype.$Message.error(`无效的登录信息或登录已失效,请重新登录`);
 delCookie("jwt");
 router.push({ path: "/login" });
 }
 if (data.status === -1) {
 Vue.prototype.$Message.error(`发生错误[${data.message}]`);
 }
 return response;
});

总结

以上所述是小编给大家介绍的Vue+axios实现统一接口管理的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 #Javascript
js正则表达式校验指定字符串的方法
Jul 23 #Javascript
js中时间格式化的几种方法
Jul 22 #Javascript
详解vue axios二次封装
Jul 22 #Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 #Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 #Javascript
5分钟学会Vue动画效果(小结)
Jul 21 #Javascript
You might like
PHP防注入安全代码
2008/04/09 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
动态样式类封装JS代码
2009/09/02 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python threading多线程编程实例
2014/09/18 Python
Python实现ping指定IP的示例
2018/06/04 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python实现自动签到脚本功能
2020/08/20 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
工程力学硕士生的自我评价范文
2013/11/16 职场文书
干部行政关系介绍信
2014/01/17 职场文书
执行总经理岗位职责
2014/02/03 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python