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

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

1、配置api接口

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

比如:

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统一接口管理的更多相关文章

  1. axios统一接口管理及优化

    之前我写了一篇文章,分享了自己的项目中对于接口管理的方法.总结下来就是:定义接口文件--withAxios导出--调用接口方法.这样实现了接口的统一管理和调用接口的语义化与简单化. 根据在项目的使用, ...

  2. 【vue】---项目接口管理---【巷子】

    一.前言 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口 假设后端的文档分成了以下几个模块 1.发现模块 2.个人信息模块 3.商品模块 4.评论模块 ...... ...

  3. Vue.js 项目接口管理

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 本文使用vue-cli生成的项目举例. 第一步.在src目录下新建一个文件夹http,在http目录下建 ...

  4. vue axios封装以及API统一管理

    在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...

  5. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  6. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

  7. vue 中使用 axios 请求接口,请求会发送两次问题

    在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...

  8. axios统一拦截配置

    在vue项目中,和后台进行数据交互使用axios.要想统一处理所有的http请求和响应,就需要使用axios的拦截器.通过配置http response inteceptor 统一拦截后台的接口数据, ...

  9. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

随机推荐

  1. Nginx+tomcat集群使用redis共享session

    一 :nginx负载均衡 当Tomcat当做独立的Servlet容器来运行时,可看做是能运行Java Servlet的独立Web服务器. 此外 Tomcat还可以作为其他Web服务器进程内或者进程外的 ...

  2. 多条SQL语句对查询结果集的垂直合并,以及表设计时如何冗余字段

    需求引入 你有一个销售单表A 和一个销售单详情表B 和一个收付款记录表C A---->B 一对多   A---->C一对多 如果一个销售单有两个详情,三条收款记录 对一个销售单 我们想查询 ...

  3. 修改openstack用户配额

    修改openstack用户配额 这是我在工作中遇到的一个很有趣的小问题,当时的场景是这样的: 公司的云产品要上线数据库服务(trove),因为每创建数据库实例都要占用一个虚拟机及相关资源的配额,尤其是 ...

  4. Kali学习笔记39:SQL手工注入(1)

    终于到了SQL注入 最大的.最经典的.最常见的Web漏洞就是SQL注入漏洞 SQL注入的原理这里就不说了,百度 打开DVWA,SQL注入测试模块 测试单引号,发现出错,于是想到测试语句: 1' or ...

  5. 简单读!Mybatis源码(一)一条select的一生

    工具除了会用,还应该多做点.我觉得使用一个软件工具(开源类),一般会经历几个步骤: 1. 通过wiki了解大致作用,然后开始码代码: 2. 系统性地学习其特性,找出可能需要的点,用上去: 3. 通过阅 ...

  6. 【Spark调优】聚合操作数据倾斜解决方案

    [使用场景] 对RDD执行reduceByKey等聚合类shuffle算子或者在Spark SQL中使用group by语句进行分组聚合时,经过sample或日志.界面定位,发生了数据倾斜. [解决方 ...

  7. java中Base64的加密工具封装

    Base64加密作为最简单普遍的加密方式(其实只能称为编码方式),应用场景众多比如秘钥,安全证书,也应用在其他的加密方式中或与其他加密方式进行嵌套使用 可以通过引用sun.misc来使用,也可以自己手 ...

  8. 10 种保护 Spring Boot 应用的绝佳方法

    原文:developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot 译文:www.jdon.com/49653 Spring Boo ...

  9. spring boot整合 springmvc+mybatis

    需要以下依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId&g ...

  10. 【sping揭秘】25、Spring远程方案

    分化:RMI,EJB,Hessian Spring有 Rmi,http,hessian,burlap 基于rmi的remoting方案 RMI要求远程类对象包路径和本地一致 基于HTTP的轻量级rem ...