javascript - React - Mobx - Fetch

问题描述

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

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

所有这些商店都使用fetch.

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

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

我的问题是：

这是一个好方法还是有更好的方法来解决这个问题？
我如何进入apiToken内部api.js？
我假设这api只是一个功能而不是反应组件是否正确？
- 如果是这样，我还可以inject进入AuthStore吗api()？（我相信我遇到了这个问题）
我的另一个想法是将所有商店包装在HOC提供此功能的一个中，但是（我假设）商店不是实际的反应组件，这会导致任何问题吗？

标签： javascriptreactjsdrymobx

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

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

获取您的 api 密钥，通过process.env.apiToken或以任何方式获取它
设置标题：

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

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

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

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

javascript - React - Mobx - Fetch - DRY 最佳实践

问题描述

解决方案

推荐阅读