我的团队正在构建一个React应用程序,我们需要一个javascript中间件/模块来管理对我们(C#) API的调用。
有很多API,每个API都有很多方法。
“我们的目标是构建一个能够轻松访问每个API的中间件”
为了避免编写包含所有不同API和方法的大型javascript文件,我决定将代码拆分到不同的文件中。
middlewear.js
export default config => {
const middleware = { config };
return Object.assign(middleware , getFileApi(middleware), getDocumentApi(middleware) /*, ... */);
}
此文件将每个API组合在一起。
我们的想法是这样命名它:middleware.fileAPi.getFile(123)
。
file-api.js
// getFileApi
export default middleware => ({
getFile: getFile.bind(middleware),
getFiles: getFiles.bind(middleware),
});
该文件返回一个对象,其中包含来自File api的所有方法。
为了在这些函数中使用关键字,我将它们分别绑定到中间件。
我需要使用中间件根目录下的配置。
getFile.js
export default async function(model) {
// I need to use the `config` from "api.js" in here.
let someCode = this.config.baseUrl + someOtherCode;
}
此指的是中间件。这样,我就可以访问传递给中间件的所有属性。
问题
export default config => {
const api = { config };
return
Object.assign(
api,
getFileApi(api));
getDocumentApi(api));
getAudioApi(api));
getSomeApi(api));
getSomeOtherApi(api));
getYetAnotherApi(api));
getWoohooApi(api));
}
谢谢!
编辑
我找到了一种方法来解决一些问题,但我不知道它是否是最优的。
// Middleware
// ================================================
export default {
getFileApi: appConfig => getFileApi(buildConnect(appConfig))
};
// getFileApi
// ================================================
export default (connect) => ({
getFile: connect(getFile)
getFiles: connect(getFiles)
});
// getFile
// ================================================
export default (config) => async (data) => {
const url = config.url;
// return await ...;
}
// buildConnect
// ================================================
export default (appConfig) => {
const initalConfig = { /* ... */ };
const config = Object.assign({}, initalConfig, appConfig);
return function(func) {
return params => func(config)(params)
}
}
// Usage (in react app)
// ================================================
import middleware from "...";
import appConfig from "...";
// usage
middleware
.getFileApi(appConfig)
.getFile(123)
.then( /* ... */ )
.catch( /* ... */ );
我使用closure-scope传递配置。
嗯,我不是Javascript的专家,所以也许我错过了一个更干净的解决方案……
发布于 2018-05-29 05:18:43
看起来闭包作用域更适合你的情况。
getFile.js
export default function(api) {
return async (model) => {
const someCode = api.config.baseUrl + someOtherCode;
}
}
文件-api.js
export default api => ({
getFile: getFile(api),
getFiles: getFiles(api),
});
请注意,getFile
返回访问api
变量的新函数,而不是使用bind
操作上下文。
编辑
我对你最新的例子做了修改,看看有没有什么有用的东西。
// Middleware
// ================================================
const connectionConfig = buildConnectConfig(appConfig);
export const Middleware = {
fileApi: appConfig => getFileApi(connectionConfig)
};
// getFileApi
// ================================================
export const getFileApi = (config) => ({
getFile: getFile(config)
getFiles: getFiles(config)
});
// getFile
// ================================================
export const getFile = (config) => async (data) => {
const url = config.url;
// return await ...;
}
// buildConnect
// ================================================
export const buildConnectConfig = (appConfig) => {
const initalConfig = { /* ... */ };
return { // or Object.assign({}, ...)
...initalConfig,
...appConfig
};
}
https://stackoverflow.com/questions/50573313
复制相似问题