如何在我的 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);

我想在调度 FETCH_USER 时使用 rxjs's ajax operator 以某种方式解析 onLogin 函数。
而且，我想要 onLogin 函数，即 returns promise/observable，设置在不同的文件中，以便我可以跟踪所有 ajax 请求

这些是包裹，

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

你能不能给我指点一份文档，其中涵盖了这个和 post、put ... 请求的各种用例？我没找到。

Answer 1

ajax 配置 object 与您已有的非常相似。我假设 axios 请求的数据属性是请求主体。

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 and AjaxError. The AjaxError object in particular has 0 information so far (at the time of this answer) so you will need to rely on the source code if you need to use this object for more than a trigger to tell the user that something went wrong. The ajax source code is here.

的官方 v5 文档的链接

如何在我的 React 项目中使用 rxjs ajax 运算符而不是 axios？

How to use rxjs ajax operator instead of axios in my react project?

ajax

rxjs

reactjs

axios

redux-observable