2

不确定是否有任何方法可以像我们使用axios js那样在 rxjs 中设置默认请求标头-

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

请帮忙。

4

2 回答 2

4

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

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

实用程序/ajax.js

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

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

我的例子.js

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

// Usage is the same, but now with defaults
ajax.get(`http://localhost/products?${action.q}`;)
于 2017-08-21T02:19:28.380 回答
4

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

ES6支持代理，在阅读本文并改进这里的解决方案后，我使用高阶函数在原始 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);
                };
            }
        });
    };

你这样使用它：

配置Ajax.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 对象作为依赖项注入此处了解更多信息）：

配置存储.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

于 2018-08-05T01:23:42.617 回答