前端如何相对优雅管理api

梁小倩

一般来说,项目由子模块组成,拿到后端提供过来的接口,一般也是按照子模块来分类提供的.请教一下各位,你们前端项目是如何管理api的?
希望各位贴点你们的优秀代码段上来学习学习.
 
常见:
各个模块的api存放到单独的js文件里,返回一个请求实例promise对象
使用的时候根据需求引入相应的请求方法

1. // axios/request.js 文件:<br>
2. /* 创建axios请求实例,并返回实例 代码就不贴上来了*/

复制代码

1. // axios/apis/home.js 文件:
3. import request from "../request";
4. //获取菜单
5. export function getHomeNav(params) {
6.   return request({
7.      url: "/api/home/getNav",
8.      params: params
9.    });
10. }
11. //获取热门新闻
12. export function getHotNewsList(params) {
13.    return request({
14.      url: "/api/home/getHotNewsList",
15.      params: params
16.    });
17. }

复制代码

1. // axios/apis/my.js 文件:
2.   
3. // 获取用户信息
4. export function getUserInfo(params) {
5.    return request({
6.      url: "/api/get/user/info",
7.      params: params
8.    });
9. }
10. // 更新用户信息
11. export function updateUserInfo(params) {
12.    return request({
13.      url: "/api/post/user/update",
14.      data: params
15.    });
16. }

复制代码

1. // 使用文件:
2. import { getHomeNav, getHotNewsList } from '@/axios/apis/home.js'<br> import { getUserInfo, updateUserInfo} from '@/axios/apis/home.js'

复制代码

1. getHomeNav({}).then(res=>{
2.     console.log(res)
3. });

复制代码

 
个人在某个项目上,烦透了在使用的时候一个个api请求方法引入.花了点时间,改成了所有api直接挂在一个全局变量上.牺牲了点性能,但是使用起来爽歪歪的感觉.

1. 假如axios/apis/home.js文件:
2. export default {
3.     //获取菜单
4.     nav: {
5.         url: "/api/home/getNav",
6.         method: "get",
7.         config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
8.     },
9.     body: {
10.         //getHotNewsList
11.         getHotNewsList: {
12.             url: "/api/home/getHotNewsList",
13.             method: "get",
14.         },
15.         //getList
16.         getList: {
17.             url: "/api/home/getList",
18.             method: "get",
19.         },
20.     },
21. };

复制代码

 全局引入所有API:
 import requireApi from '@/axios/index.js'
 const APIS  = requireApi();
 home里的api调用可以这样:
 APIS.home.nav({page:1,sizePages:20}).then(res=>{ ... })
 APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
假如另外有一个my的模块api,使用起来可以这样:
APIS.my.xxxx().then(res=>{ ... });
 下面是实现代码段:

1. // 假如目前有两个模块的api,分别存放在home.js,my.js里<br>

复制代码

1. // axios/apis/home.js文件:<br>export default {
2.   //获取菜单
3.   nav: {
4.     url: "/api/home/getNav",
5.     method: "get",
6.     config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
7.   },
8.   body: {
9.     //getHotNewsList
10.     getHotNewsList: {
11.       url: "/api/home/getHotNewsList",
12.       method: "get",
13.     },
14.     //getList
15.     getList: {
16.       url: "/api/home/getList",
17.       method: "get",
18.     },
19.   },
20. };

复制代码

1. [/code][code]// axion/apis/my.js文件:<br>export default {
2.   // 获取用户信息
3.   getUserInfo: {
4.     url: "/api/get/user/info",
5.     method: "get",
6.   },
7.   // 更新用户信息
8.   updateUserInfo: {
9.     url: "/api/post/user/update",
10.     method: "post",
11.   },
12. };

复制代码

 
 

1. // axios/index.js 文件:
3. import createApiFn from "./createApiFn";
4. /**
5. *  把api文件夹下的所有Api文件require进来，在逐个export出去
6. *  假如axios/apis/home.js文件:
7.         export default {
8.             //获取菜单
9.             nav: {
10.                 url: "/api/home/getNav",
11.                 method: "get",
12.                 config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
13.             },
14.             body: {
15.                 //getHotNewsList
16.                 getHotNewsList: {
17.                     url: "/api/home/getHotNewsList",
18.                     method: "get",
19.                 },
20.                 //getList
21.                 getList: {
22.                     url: "/api/home/getList",
23.                     method: "get",
24.                 },
25.             },
26.         };
28. *  按需求引入:
29. *  import { home } from '@/axios/index.js'
30. *  home.nav({page:1,sizePages:20}).then(res=>{ ... })
31. *  home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
32. *
33. *  全局引入所有API:
34. *  import requireApi from '@/axios/index.js'
35. *  const APIS  = requireApi();
36. *  APIS.home.nav({page:1,sizePages:20}).then(res=>{ ... })
37. *  APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
38. */
40. /**
41. // webpack
42. let requireApi = () => {
43.   let allApi = require.context("./apis/", false, /\.js$/),
44.       allApiFnObj = {};
45.   allApi.keys().map((item) => {
46.     allApiFnObj[item.replace(/(\.\/|\.js)/g, "")] = createApiFn(allApi(item).default);
47.   });
48.   return allApiFnObj;
49. };
50. */
52. // vite
53. let requireApi = () => {
54.       let allApi = import.meta.globEager('./apis/*.js'),
55.           allApiFnObj = {};
56.       Object.keys(allApi).map((item) => {
57.         const fileName = item.replace(/\.\/apis\/|\.js/g, '');
58.         allApiFnObj[fileName] = createApiFn(allApi[item].default);
59.       });
60.       return allApiFnObj;
61.     };
63. export default requireApi;
65. // 需要手动把各个模块export出去
66. let { home, my } = requireApi();
67. export { home, my };

复制代码

 

1. // axios/createApiFn.js文件:
3. import requestInstance from "./request";
5. const bindPromiseFn = (apiObj, args, config={}) => {
6.   const params = {
7.     method: apiObj.method || "get",
8.     url: apiObj.url,
9.     params: args,
10.     config: apiObj.config || {},
11.   };
12.   params.config = {
13.     ...params.config,
14.     ...config
15.   }
16.   return requestInstance(params);
17. };
18. /**
19. * 把apis对象转变成以字段名为方法名的对象
20. * 如:
21. * apis={
22. *   getDemo:{
23. *      url:"xxxx",
24. *      method: "get"
25. *   },
26. *   postDemo:{}
27. * }
28. * 执行方法后返回对象结构如下：
29. * {
30. *  getDemo:function(){},
31. *  postDemo:function(){}
32. * }
33. * @param {object} apis
34. */
35. const createApiFn = (apis) => {
36.   var obj = {};
37.   Object.keys(apis).map((key) => {
38.     if (apis[key] && apis[key].url) {
39.       obj[key] = (function (apiObj) {
40.         /**
41.          * args 请求入参
42.          * config 请求配置相关信息,最终会传给实例axios.config
43.          */
44.         return function (args,config={}) {
45.           return bindPromiseFn(apiObj, args, config);
46.         };
47.       })(apis[key]);
48.     } else if ( apis[key] && !apis[key].url && Object.prototype.toString.call(apis[key]) === "[object Object]") {
49.       obj[key] = createApiFn(apis[key]);
50.     }
51.   });
52.   return obj;
53. };
55. export default createApiFn;

复制代码

 

1. // axios/request.js 文件:
3. import axios from "axios";
5. // 创建axios实例
6. const axiosInstance = (config = {}) => {
7.   const _config = {
8.     // baseURL: `${location.protocol}//${process.env.VUE_APP_BASE_API}`, //  `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
9.     timeout: 30000,
10.   };
11.   config = {
12.     ..._config,
13.     ...config
14.   };
15.   return axios.create(config);
16. };
18. const requestInstance = (args) => {
19.   let { method, url, params, config = {} } = args;
20.   if (!url) {
21.     return;
22.   }
23.   if (method === "get") {
24.     params = { params: params };
25.   }
27.   const instance = axiosInstance(config);
29.   instance.interceptors.request.use(
30.     (config) => {
31.       // config.headers["x-auth-token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
32.       return config;
33.     },
34.     (error) => {
35.       return Promise.reject(error);
36.     }
37.   );
39.   instance.interceptors.response.use(
40.     (response) => {
41.       const { status, statusText, data } = response
42.       if (status === 200 || status === 304) {
43.         return Promise.resolve(data);
44.       } else {
45.         return Promise.reject(statusText || "Error");
46.       }
47.     },
48.     (error) => {
49.       return Promise.reject(error);
50.     }
51.   );
53.   debugger;
54.   return instance[method](url, params, config);
55. };
57. export default requestInstance;

复制代码

 

1. //全局引入所有API使用方法:
2. import requireApi from '../axios/index'
3. const API  = requireApi();
4. API.my.updateUserInfo({name:'xiaomou'}).then(res=>{
5.       console.log(res);
6. })
7. APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
9. //按需求引入方法:
10. import { home } from '@/axios/index.js'
11. home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })

复制代码

 
 
 
　　

来源:https://www.cnblogs.com/xiaomou2014/p/17200411.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！