fetch() 向每次调用注入查询变量/标头值

Question

现在，在我的 React-Native 应用程序中，我有以下内容：

fetch('http://localhost/SOMETHING', { 
    method: 'GET', 
    headers: { 
        'Content-Type': 'application/json', 
        'Authorization': 'Bearer '+this.state.authtoken 
    } 
})

目标：让我的 API 知道 UID 正在调用什么。我知道这应该在身份验证令牌中，但不同的用户可以拥有相同的身份验证令牌。

我最初的想法是在每个 url 的末尾添加一个?uid=${UID}。但是，我有 GET、POST、PATCH，以及它们自己的一组查询

另一个想法是添加一个带有 UID 数据的标头值。

无论我选择什么，能够将此值添加到每个 FETCH 中而无需做太多其他工作都会很棒。

这是可能的吗？对你会做什么的建议持开放态度。

Answer 1

如果

可以的话，最好是切换到Axios（https://github.com/axios/axios） - 在那里这样做要容易得多。

但是，如果您需要使用fetch，那么 https://github.com/werk85/fetch-intercept 就是您的解决方案。

示例代码

fetchIntercept.register({
  request: (url, config) => {
   config.headers = {
     "X-Custom-Header": true,
      ...config.headers
   };
    return [url, config];
  }
});

Answer 2

不确定您是否愿意离开fetch，但我们使用apisauce。

import { create } from 'apisauce';
const api = create({
  baseURL: 'http://localhost',
  headers: { 'Accept': 'application/json' },
});
api.addRequestTransform(request => {
  if (accessToken) {
    request.headers['Authorization'] = `bearer ${accessToken}`;
  }
});
api.get('/SOMETHING');

编辑

如果你想让它靠近fetch，你可以做一个辅助函数。

let authToken = null;
export const setAuthToken = token => {
  authToken = token;
};
export const fetch = (url, options) => {
  if (!options) {
    options = {};
  }
  if (!options.headers) {
    options.headers = {};
  }
  if (authToken) {
    options.headers['Authorization'] = `Bearer ${authToken}`;
  }
  return fetch(url, options);
};

您可能只会使用 setAuthToken 函数一次。

import { setAuthToken } from '../api';
// e.g. after login
setAuthToken('token');

然后你通常会在哪里使用fetch：

import { fetch } from '../api';
fetch('http://localhost/SOMETHING');

我不会考虑为每个获取大量"额外工作"创建一个一次性帮助程序函数和一个额外的导入语句。

Answer 3

你可以构建一个包装函数来使用 uid 获取

function fetchWithUid(baseUrl, uid, authtoken, options) {
    const { method, headers, body, ...rest } = options;
    const fetchOptions = {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + authtoken,
            ...headers,
        },
        method,
        ...rest,
    };
    if (body) {
        fetchOptions.body = JSON.stringify(body);
    }
    return fetch(`${baseUrl}?uid=${uid}`, fetchOptions);
}

像这样使用 fetchWithUid 函数，fetchOptions 只是模仿原始 fetch 函数的选项。

const fetchOptions = {
    method: 'POST',
    body: {
        hello: 'world',
    },
};
fetchWithUid('http://localhost/SOMETHING', 123, 'abcd', fetchOptions);