如何在我的React项目中使用rxjs ajax运算符代替axios？

Question

我是rxjs的新手，想知道如何处理该用例。

这是axios保证，如何将其转换为使用rxjs的ajax运算符

export const onLogin = ({ username, password }) =>
  axios({
    method: "post",
    url: O_TOKEN_URL,
    data: querystring.stringify({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      grant_type: "password",
      username,
      password
    }),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

这是我的行动

export const onSubmit = payload => ({
  type: FETCH_USER,
  payload // payload contains username & password
});

这是我的史诗，

export const loginEpic = action$ =>
  action$
    .ofType(FETCH_USER)
    // somehow import onLogin from above and resolve it
    // then, dispatch FETCH_USER_FULFILLED
    .do(
        payload => console.log(payload.username, payload.password)
        // i am able to console these username and password
    )
    .mapTo(() => null);

• 我想以onLogin某种方式解析函数，在FETCH_USER分派时使用rxjs's ajax operator。
• 而且，我希望在其他文件中设置onLogin返回的函数，promise/observable以便我可以跟踪所有的ajax请求

这些是包裹

"redux-observable": "^0.18.0",
"rxjs": "^5.5.10",

• 难道你还点我覆盖此和各种使用情况下的文件post，put......请求？我找不到。

Answer 1

ajax配置对象与您已经拥有的对象非常相似。我假设axios请求的data属性是请求正文。

import {ajax} from 'rxjs/observable/dom/ajax';

export const onLogin = ({ username, password }) =>
  ajax({
    method: "POST",
    url: O_TOKEN_URL,
    body: JSON.stringify({
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
      grant_type: "password",
      username,
      password
    }),
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });

您的史诗看起来像这样：

export const loginEpic = action$ =>
  action$
    .ofType(FETCH_USER)
    .mergeMap(action =>
      onLogin(action.payload)
        // map will be called when the request succeeded
        //   so we dispatch the success action here.
        .map((ajaxResponse) => fetchUserFulfilled())
        // catch will be called if the request failed
        //   so we dispatch the error action here.
        // Note that you must return an observable from this function.
        // For more advanced cases, you can also apply retry logic here. 
        .catch((ajaxError, source$) => Observable.of(fetchUserFailed()))
    );

动作创建者功能在哪里fetchUserFulfilled和fetchUserFailed。

RxJS 5 ajax方法的文档似乎还很少。这是AjaxRequest，AjaxResponse和AjaxError的官方v5文档的链接。到目前为止，AjaxError对象特别是具有0条信息（在回答此问题时），因此，如果您需要将此对象用作触发器（而不是告诉用户出了点问题），则需要依赖源代码。ajax源代码在这里。