反应 - 暴民 - 获取 - DRY 最佳实践

Question

我正在尝试清理一些代码以消除冗余，并对最佳实践有一些疑问。为了简单起见，假设我有 3 个 mobx 商店 、 和 。PeopleStorePlacesStoreAuthStore所有这些商店都使用 连接到第三方 API。fetch提供登录功能，并具有以下属性：AuthStore@observable apiToken其他商店中存在重复的逻辑，设置 api url、令牌等...我尝试创建以下文件：// ./api.jsconst url = 'https://example.com'const options = {   headers: {      Authorization: ??? (how do I access AuthStore.apiToken)   }}export const api = (endpoint) => {  fetch(url + endpoint, options)}然后在PeopleStoreimport api from './api'class PeopleStore {   getPeople() {     api('/people');   }}（这只是概念的一个示例，而不是实际的代码）我的问题是：这是一个好方法，还是有更好的方法可以做到这一点？如何进入内部？apiTokenapi.js我假设这只是一个函数而不是一个反应组件，这是否正确？api如果是这样，我还能不能把？（我相信我遇到了这个问题）injectAuthStoreapi()我的另一个想法是将所有商店包装在提供此功能的商店中，但再次（我假设）商店不是实际的 react 组件，这是否会导致任何问题？HOC

Answer 1

另一种方法是在应用的顶层全局设置授权标头。这将要求您安装公理或类似的东西

例如，在根索引中.js：

• 通过或以任何方式获取 API 密钥process.env.apiToken

• 设置标头：

axios.defaults.headers.common['Authorization'] = apiToken;

您还可以设置基本 URL 以帮助处理路径：

axios.defaults.baseURL = 'https://api.example.com';

这样，您就不必担心令牌，它将被照顾。