React - Mobx - Fetch - DRY 最佳实践

Question

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

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

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

AuthStore提供登录功能并有一个属性： @observable apiToken

其他商店有重复逻辑，设置api url，token等...

我尝试创建以下文件：

// ./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');
   }
}

（这只是概念的一个例子，而不是实际的代码）

我的问题是：

• 这是一个好方法还是有更好的方法来 go 关于这个？

• 如何访问apiToken中的api.js ？

• 我是否正确假设api只是 function 而不是反应组件？

  • 如果是这样，我仍然可以将AuthStore inject api()吗？ （我相信我遇到了这个问题）

• 我的另一个想法是将所有商店包装在提供此功能的HOC中，但同样（我假设）商店不是实际的反应组件，这会导致任何问题吗？

Answer 1

另一种方法是在应用程序的顶层全局设置您的授权 header 。 这将需要您安装axios或类似的东西

例如，在您的根 index.js 中：

• 获取您的 api 密钥，通过process.env.apiToken或者您正在获取它
• 设置 header：

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

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

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

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