在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？
方法可能不只一种，本文使用axios+async/await进行接口的统一管理
本文使用vue-cli生成的项目举例
使用接口管理之前
在项目的某个具体组件中调接口，把调用接口的方法直接写在mounted中，或在是methods中 比如：
xxx.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<template> <div id="areatree"> <!-- 标题 --> <div class="lefttree_title"> <el-row> <el-col :span="24">{{msg}}</el-col> </el-row> </div> </div></template><script>import axios from 'axios'export default { name: "test", data:function(){ return{ msg:'站点选择', } }, methods:{ }, computed:{ }, //--------------vue生命周期---具体细节参考：https://www.cnblogs.com/yingyigongzi/p/10844175.html --------------- beforecreate(){ }, created(){ }, beforemount(){ }, mounted(){ //理解成初始化，该操作只会执行一次 axios.get('/gettreelistforsoilbyregion',{ //从接口读取数据 params: { //参数 } }) .then(function (response) { //代码操作 }) .catch(function (error) { console.log(error); }); }, beforeupdate(){ }, updated(){ }, beforedestroy(){ }, destroyed(){ }, //--------------vue生命周期---具体细节参考：https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------} </script><style scoped></style> |
使用项目管理之后，可以做到接口一次定义，到处使用，
代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便
步骤：
1.首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义
2.在apis下新建一个js文件,叫http.js,在里面做axios相应的配置，目的 封装axios，完整代码如下，可以直接使用
http.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import axios from 'axios' //创建axios的一个实例var instance = axios.create({ baseurl:'', timeout: 6000}) //------------------- 一、请求拦截器 忽略instance.interceptors.request.use(function (config) { return config;}, function (error) { // 对请求错误做些什么 return promise.reject(error);}); //----------------- 二、响应拦截器 忽略instance.interceptors.response.use(function (response) { return response.data;}, function (error) { // 对响应错误做点什么 console.log('拦截器报错'); return promise.reject(error);}); /** * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据， * 函数的参数及返回值如下： * @param {string} method 请求的方法：get、post、delete、put * @param {string} url 请求的url: * @param {object} data 请求的参数 * @returns {promise} 返回一个promise对象，其实就相当于axios请求数据的返回值 */export default function (method, url, data = null) { method = method.tolowercase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{ console.error('未知的method'+method) return false }} |
3.按照后台文档划分的模块新建js文件,这里简单举个例子
我要去拿树结构的数据，到时候处理完数据在页面上显示出来，操作如下：
a.新建一个navigationtree.js，这里专门用来管理 我的树组件(即上文的xxx.vue)的接口，(如果还有别的组件，比如aa.vue也要用到接口，可以在api文件夹内再创一个aa.js，管理aa.vue的接口)
navigationtree.js
|
1
2
3
4
5
6
7
8
9
10
|
//navigationtree.js 用于获取导航树的树形json数据import req from './http.js' //引入封装好的axios//在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用export const gettreedata =params=>req('get','/gettreelistforsoilbyregion',params)//这里使用了箭头函数，转换一下写法：//export const gettreedata=function(req){// return req('post','/gettreelistforsoilbyregion',params)//} |
4.在组件中使用接口，来看看现在的xxx.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<template> <div id="areatree"><br> <!-- 标题 --><br> <div class="lefttree_title"><br> <el-row> <br> <el-col :span="24">{{msg}}</el-col> <br> </el-row> <br> </div> <br> </div></template> <script> //1. 引入获取树结构的接口定义import {gettreedata} from '../apis/navigationtree.js' let treetemp =[];export default { name: "ztree", data:function(){ return{ msg:'站点选择', } }, methods:{ }, computed:{ }, beforecreate(){ }, created(){ }, beforemount(){ }, mounted(){ //理解成初始化，该操作只会执行一次 let testdata = gettreedata(); //vue项目接口管理,所有接口都在apis文件夹中统一管理 testdata .then(function(response){ //console.log(response); }).catch(function(error){ console.log(error); }); }, beforeupdate(){ }, updated(){ }, beforedestroy(){ }, destroyed(){ },}</script> <style scoped></style> |
核心部分在 mounted 这块
补充知识：vue项目api接口组织方式
一般后端接口是,一个业务的方法,用一个controller,所以前端这边,一个业务的接口放到一个js文件里
shiroapi提供认证相关接口,如下图
adminapi提供组织,用户,角色管理等相关接口,如下图
将shiroapi和adminapi等等api做个汇总,到apis.js中,如下图
登陆接口调用例子,引入apis.js即可(当然也可以引入具体shiroapi.js,看自己需要和习惯),如下图:
个人总结的api组织方式,欢迎提供更好的建议
以上这篇vue项目接口管理,所有接口都在apis文件夹中统一管理操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/yingyigongzi/p/10863477.html
