RxJs如何设置默认请求头？

不确定是否有任何方法可以像我们使用as-

axios.defaults.headers.common['Authorization']=“C7B9392955CE63B38CF0901B7E523EFBF7613001526117C79376122B7BE2A9519D49C5FF5DE1E217DB93BEAE2033E9”；

这是我想要设置请求头的epic代码-

导出默认函数产品（action$，store）{
返回操作$of type（获取产品请求）
.mergeMap（操作=>
ajax.get(`http://localhost/products?${action.q}`）
.map（响应=>doFetchProductsFulfilled（响应））
);
}

---

请提供帮助。

不可能使用RxJS的ajax实用程序为所有ajax请求设置默认头

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

utils/ajax.js my-example.js

---

我使用的是redux observatable，但这适用于rxjs；也许下一个答案过于夸张，但我需要根据某些因素以友好的方式获取标题，而不影响单元测试（这与我的epics也是分离的），也不改变ajax.get/ajax.post等的sintax，这就是我发现的：

ES6已经完成了，在阅读并改进了解决方案之后，我正在使用一个高阶函数在原始rxjs/ajax对象中创建一个代理，并返回代理对象；下面是我的代码：

注意：我使用的是typescript，但您可以将其移植到普通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);
                };
            }
        });
    };

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;

import ajax from './ConfigureAjax.ts'

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

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

在应用程序中的任何地方，您都可以从ConfigureAjax.ts导入ajax，并正常使用它

如果您使用的是redux observable，您可以这样配置epics（将ajax对象作为依赖项注入更多信息）：

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

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;

import ajax from './ConfigureAjax.ts'

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

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

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

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;

import ajax from './ConfigureAjax.ts'

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

// 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

也@jayphelps如何设置根URL，如axios.defaults.baseURL='localhost/api'？无法设置任何类型的默认值，但您可以将其添加到auth头这样的抽象中。