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

Question

我正在尝试清理一些代码以消除冗余，并对最佳实践有一些疑问。

为了简单起见，假设我有 3 个 mobx 商店 、 和 。PeopleStorePlacesStoreAuthStore

所有这些商店都使用 连接到第三方 API。fetch

提供登录功能，并具有以下属性：AuthStore@observable apiToken

其他商店中存在重复的逻辑，设置 api url、令牌等...

我尝试创建以下文件：

// ./api.js

const url = 'https://example.com'

const options = {

   headers: {

      Authorization: ??? (how do I access AuthStore.apiToken)

   }

}

export const api = (endpoint) => {

  fetch(url + endpoint, options)

}

然后在PeopleStore

import 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';这样，您就不必担心令牌，它将被照顾。