React - Mobx - Fetch - DRY 最佳实践

Question

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

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

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

AuthStore 提供登录功能并具有属性: @observable apiToken

其他商店存在重复逻辑，设置apiurl、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');
   }
}

（这只是一个概念示例，并非实际代码）

我的问题是：

这是一个好方法还是有更好的方法？
如何访问 api.js 中的 apiToken？
我假设 api 只是一个函数而不是 React 组件是否正确？
- 如果是这样，我还能inject把AuthStore变成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';

这样你就不用担心令牌了，它会被妥善处理。

React - Mobx - Fetch - DRY 最佳实践

React - Mobx - Fetch - DRY Best Practices

javascript

dry

reactjs

mobx