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

2023-07-18 21:20:03 66

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

方法可能不只一种，本文使用axios+async/await进行接口的统一管理

本文使用vue-cli生成的项目举例

使用接口管理之前

在项目的某个具体组件中调接口，把调用接口的方法直接写在mounted中，或在是methods中比如：

xxx.vue

使用项目管理之后，可以做到接口一次定义，到处使用，

代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便

步骤：

1.首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义

2.在apis下新建一个js文件,叫http.js,在里面做axios相应的配置，目的封装axios，完整代码如下，可以直接使用

http.js

importaxiosfrom'axios'

//创建axios的一个实例
varinstance=axios.create({
baseURL:'',
timeout:6000
})


//-------------------一、请求拦截器忽略
instance.interceptors.request.use(function(config){

returnconfig;
},function(error){
//对请求错误做些什么

returnPromise.reject(error);
});

//-----------------二、响应拦截器忽略
instance.interceptors.response.use(function(response){

returnresponse.data;
},function(error){
//对响应错误做点什么
console.log('拦截器报错');
returnPromise.reject(error);
});

/**
*使用es6的exportdefault导出了一个函数，导出的函数代替axios去帮我们请求数据，
*函数的参数及返回值如下：
*@param{String}method请求的方法：get、post、delete、put
*@param{String}url请求的url:
*@param{Object}data请求的参数
*@returns{Promise}返回一个promise对象，其实就相当于axios请求数据的返回值
*/
exportdefaultfunction(method,url,data=null){
method=method.toLowerCase();
if(method=='post'){
returninstance.post(url,data)
}elseif(method=='get'){
returninstance.get(url,{params:data})
}elseif(method=='delete'){
returninstance.delete(url,{params:data})
}elseif(method=='put'){
returninstance.put(url,data)
}else{
console.error('未知的method'+method)
returnfalse
}
}

3.按照后台文档划分的模块新建js文件,这里简单举个例子

我要去拿树结构的数据，到时候处理完数据在页面上显示出来，操作如下：

a.新建一个navigationTree.js，这里专门用来管理我的树组件(即上文的xxx.vue)的接口，(如果还有别的组件，比如aa.vue也要用到接口，可以在api文件夹内再创一个aa.js，管理aa.vue的接口)

navigationTree.js

//navigationTree.js用于获取导航树的树形json数据

importreqfrom'./http.js'//引入封装好的axios

//在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
exportconstGETTREEDATA=params=>req('get','/GetTreeListForSoilByRegion',params)
//这里使用了箭头函数，转换一下写法：
//exportconstGETTREEDATA=function(req){
//returnreq('post','/GetTreeListForSoilByRegion',params)
//}

4.在组件中使用接口，来看看现在的xxx.vue

核心部分在mounted这块

补充知识：vue项目api接口组织方式

一般后端接口是,一个业务的方法,用一个controller,所以前端这边,一个业务的接口放到一个js文件里

shiroApi提供认证相关接口,如下图

adminApi提供组织,用户,角色管理等相关接口,如下图

将shiroApi和adminApi等等api做个汇总,到apis.js中,如下图

登陆接口调用例子,引入apis.js即可(当然也可以引入具体shiroApi.js,看自己需要和习惯),如下图:

个人总结的api组织方式,欢迎提供更好的建议

以上这篇vue项目接口管理,所有接口都在apis文件夹中统一管理操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐