前端管理页面（前端如何相对优雅管理api）
导读：一般来说,项目由子模块组成,拿到后端提供过来的接口,一般也是按照子模块来分类提供的.请教一下各位,你们前端项目是如何管理api的?...
一般来说,项目由子模块组成,拿到后端提供过来的接口,一般也是按照子模块来分类提供的.请教一下各位,你们前端项目是如何管理api的?
希望各位贴点你们的优秀代码段上来学习学习.
常见:
各个模块的api存放到单独的js文件里,返回一个请求实例promise对象
使用的时候根据需求引入相应的请求方法
// axios/apis/home.js 文件:
import request from "../request";
//获取菜单
export function getHomeNav(params) {
return request({
url: "/api/home/getNav",
params: params
});
}
//获取热门新闻
export function getHotNewsList(params) {
return request({
url: "/api/home/getHotNewsList",
params: params
});
}
// axios/apis/my.js 文件:
// 获取用户信息
export function getUserInfo(params) {
return request({
url: "/api/get/user/info",
params: params
});
}
// 更新用户信息
export function updateUserInfo(params) {
return request({
url: "/api/post/user/update",
data: params
});
}
// 使用文件:
import { getHomeNav, getHotNewsList } from @/axios/apis/home.js import { getUserInfo, updateUserInfo} from @/axios/apis/home.js
getHomeNav({}).then(res=>{
console.log(res)
});
个人在某个项目上,烦透了在使用的时候一个个api请求方法引入.花了点时间,改成了所有api直接挂在一个全局变量上.牺牲了点性能,但是使用起来爽歪歪的感觉.
假如axios/apis/home.js文件:
export default {
//获取菜单
nav: {
url: "/api/home/getNav",
method: "get",
config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
},
body: {
//getHotNewsList
getHotNewsList: {
url: "/api/home/getHotNewsList",
method: "get",
},
//getList
getList: {
url: "/api/home/getList",
method: "get",
},
},
};
全局引入所有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=>{ ... });
下面是实现代码段:
// 假如目前有两个模块的api,分别存放在home.js,my.js里
// axios/apis/home.js文件:export default {
//获取菜单
nav: {
url: "/api/home/getNav",
method: "get",
config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
},
body: {
//getHotNewsList
getHotNewsList: {
url: "/api/home/getHotNewsList",
method: "get",
},
//getList
getList: {
url: "/api/home/getList",
method: "get",
},
},
};
// axion/apis/my.js文件:export default {
// 获取用户信息
getUserInfo: {
url: "/api/get/user/info",
method: "get",
},
// 更新用户信息
updateUserInfo: {
url: "/api/post/user/update",
method: "post",
},
};
// axios/index.js 文件:
import createApiFn from "./createApiFn";
/**
* 把api文件夹下的所有Api文件require进来 ，在逐个export出去
* 假如axios/apis/home.js文件:
export default {
//获取菜单
nav: {
url: "/api/home/getNav",
method: "get",
config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
},
body: {
//getHotNewsList
getHotNewsList: {
url: "/api/home/getHotNewsList",
method: "get",
},
//getList
getList: {
url: "/api/home/getList",
method: "get",
},
},
};
* 按需求引入:
* import { home } from @/axios/index.js
* home.nav({page:1,sizePages:20}).then(res=>{ ... })
* home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
*
* 全局引入所有API:
* import requireApi from @/axios/index.js
* const APIS = requireApi();
* APIS.home.nav({page:1,sizePages:20}).then(res=>{ ... })
* APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
*/
/**
// webpack
let requireApi = () => {
let allApi = require.context("./apis/", false, /\.js$/),
allApiFnObj = {};
allApi.keys().map((item) => {
allApiFnObj[item.replace(/(\.\/|\.js)/g, "")] = createApiFn(allApi(item).default);
});
return allApiFnObj;
};
*/
// vite
let requireApi = () => {
let allApi = import.meta.globEager(./apis/*.js),
allApiFnObj = {};
Object.keys(allApi).map((item) => {
const fileName = item.replace(/\.\/apis\/|\.js/g, );
allApiFnObj[fileName] = createApiFn(allApi[item].default);
});
return allApiFnObj;
};
export default requireApi;
// 需要手动把各个模块export出去
let { home, my } = requireApi();
export { home, my };
// axios/createApiFn.js文件:
import requestInstance from "./request";
const bindPromiseFn = (apiObj, args, config={}) => {
const params = {
method: apiObj.method || "get",
url: apiObj.url,
params: args,
config: apiObj.config || {},
};
params.config = {
...params.config,
...config
}
return requestInstance(params);
};
/**
* 把apis对象转变成以字段名为方法名的对象
* 如:
* apis={
* getDemo:{
* url:"xxxx",
* method: "get"
* },
* postDemo:{}
* }
* 执行方法后返回对象结构如下：
* {
* getDemo:function(){},
* postDemo:function(){}
* }
* @param {object} apis
*/
const createApiFn = (apis) => {
var obj = {};
Object.keys(apis).map((key) => {
if (apis[key] && apis[key].url) {
obj[key] = (function (apiObj) {
/**
* args 请求入参
* config 请求配置相关信息,最终会传给实例axios.config
*/
return function (args,config={}) {
return bindPromiseFn(apiObj, args, config);
};
})(apis[key]);
} else if ( apis[key] && !apis[key].url && Object.prototype.toString.call(apis[key]) === "[object Object]") {
obj[key] = createApiFn(apis[key]);
}
});
return obj;
};
export default createApiFn;
// axios/request.js 文件:
import axios from "axios";
// 创建axios实例
const axiosInstance = (config = {}) => {
const _config = {
// baseURL: `${location.protocol}//${process.env.VUE_APP_BASE_API}`, // `baseURL` 将自动加在 `url` 前面 ，除非 `url` 是一个绝对 URL 。
timeout: 30000,
};
config = {
..._config,
...config
};
return axios.create(config);
};
const requestInstance = (args) => {
let { method, url, params, config = {} } = args;
if (!url) {
return;
}
if (method === "get") {
params = { params: params };
}
const instance = axiosInstance(config);
instance.interceptors.request.use(
(config) => {
// config.headers["x-auth-token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
return config;
},
(error) => {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
(response) => {
const { status, statusText, data } = response
if (status === 200 || status === 304) {
return Promise.resolve(data);
} else {
return Promise.reject(statusText || "Error");
}
},
(error) => {
return Promise.reject(error);
}
);
debugger;
return instance[method](url, params, config);
};
export default requestInstance;
//全局引入所有API使用方法:
import requireApi from ../axios/index
const API = requireApi();
API.my.updateUserInfo({name:xiaomou}).then(res=>{
console.log(res);
})
APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
//按需求引入方法:
import { home } from @/axios/index.js
home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！