RxJs如何设置默认请求标头？

Question

不确定是否有办法在rxjs中设置默认请求标头，就像我们使用axios js as-

一样

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

这是我想要设置请求标题的史诗代码 -

export default function epicFetchProducts(action$, store) {
    return action$.ofType(FETCH_PRODUCTS_REQUEST)
    .mergeMap(action =>
        ajax.get(`http://localhost/products?${action.q}`)
      .map(response => doFetchProductsFulfilled(response))
    );
}

请帮忙。

Answer 1

使用RxJS的ajax实用程序无法为所有ajax请求设置默认标头。

但是，您可以在每次调用中提供标头，或创建自己的默认包装器，默认情况下提供它们。

utils的/ ajax.js

const defaultHeaders = {
  Authorization: 'c7b9392955ce63b38cf090...etc'
};

export const get = (url, headers) =>
  ajax.get(url, Object.assign({}, defaultHeaders, headers));

MY-example.js

import * as ajax from './utils/ajax';

// Usage is the same, but now with defaults
ajax.get(`http://localhost/products?${action.q}`;)

Answer 2

我正在使用 redux-observable ，但这适用于rxjs；也许下一个答案太过精心设计，但我需要根据某些因素来获取标题，而又不影响单元测试（也与我的史诗解耦），并且不更改 ajax.get < / strong> / ajax.post 等，这就是我发现的：

ES6具有proxies support，在阅读this并改进了解决方案here之后，我正在使用高阶函数在原始rxjs / ajax对象中创建代理，并且返回代理对象；下面是我的代码：

注意：我使用的是打字稿，但您可以将其移植到普通ES6。

AjaxUtils.ts

export interface AjaxGetHeadersFn {
    (): Object;
}

// the function names we will proxy
const getHeadersPos = (ajaxMethod: string): number => {
    switch (ajaxMethod) {
        case 'get':
        case 'getJSON':
        case 'delete':
            return 1;
        case 'patch':
        case 'post':
        case 'put':
            return 2;
        default:
            return -1;
    }
};

export const ajaxProxy = (getHeadersFn: AjaxGetHeadersFn) =>
    <TObject extends object>(obj: TObject): TObject => {
        return new Proxy(obj, {
            get(target: TObject, propKey: PropertyKey) {
                const origProp = target[propKey];
                const headersPos = getHeadersPos(propKey as string);

                if (headersPos === -1 || typeof origProp !== 'function') {
                    return origProp;
                }

                return function (...args: Array<object>) {
                    args[headersPos] = { ...args[headersPos], ...getHeadersFn() };
                    // @ts-ignore
                    return origProp.apply(this, args);
                };
            }
        });
    };

您以这种方式使用它：

ConfigureAjax.ts

import { ajax as Ajax } from 'rxjs/ajax'; // you rename it

// this is the function to get the headers dynamically
// anything, a function, a service etc.
const getHeadersFn: AjaxGetHeadersFn = () => ({ 'Bearer': 'BLABLABLA' });

const ajax = ajaxProxy(getHeadersFn)(Ajax); // proxified object
export default ajax;

在应用程序中的任何位置，您都从 ConfigureAjax.ts 导入ajax，并正常使用它。

如果您使用的是redux-observable，则可以通过以下方式配置史诗（将ajax对象作为依赖项注入更多信息here）：

ConfigureStore.ts

import ajax from './ConfigureAjax.ts'

const rootEpic = combineEpics(
    fetchUserEpic
)({ ajax });

UserEpics.ts

// the same sintax ajax.getJSON, decoupled and
// under the covers with dynamically injected headers
const fetchUserEpic = (action$, state$, { ajax }) => action$.pipe(
  ofType('FETCH_USER'),
  mergeMap(({ payload }) => ajax.getJSON(`/api/users/${payload}`).pipe(
    map(response => ({
      type: 'FETCH_USER_FULFILLED',
      payload: response
    }))
  )
);

希望它可以帮助人们寻找相同的：D