[英]How to use rxjs ajax operator instead of axios in my react project?
I am new to rxjs and want to know how to handle this use case. 我是rxjs的新手,想知道如何处理该用例。
This is axios
promise, how to convert it so that it uses rxjs's ajax operator 这是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"
}
});
This is my action, 这是我的行动
export const onSubmit = payload => ({
type: FETCH_USER,
payload // payload contains username & password
});
This is my epic for now, 这是我的史诗,
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
function somehow, when FETCH_USER
is dispatched, using rxjs's ajax operator
. 我想解决onLogin
莫名其妙功能,当FETCH_USER
被分派使用rxjs's ajax operator
。 onLogin
function, which returns promise/observable
, to be set up in different file so that I can keep track of all the ajax requests 而且,我希望onLogin
函数(返回promise/observable
)可以在其他文件中设置,以便我可以跟踪所有的ajax请求 These are the packages, 这些是包裹
"redux-observable": "^0.18.0",
"rxjs": "^5.5.10",
post
, put
... requests? 您还可以指出一个涵盖该文档以及有关post
, put
...请求的各种用例的文档吗? I couldn't find any. 我找不到。 The ajax config object is fairly similar to what you already have. ajax配置对象与您已经拥有的对象非常相似。 I'm assuming the data property for the axios request is the request body. 我假设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"
}
});
Your epic would look something like this: 您的史诗看起来像这样:
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()))
);
Where fetchUserFulfilled
and fetchUserFailed
are action creator functions. 其中fetchUserFulfilled
和fetchUserFailed
是动作创建者函数。
There does not seem to be much documentation of the RxJS 5 ajax method yet. RxJS 5 ajax方法的文档似乎还很少。 Here are the links to the official v5 docs for the AjaxRequest , AjaxResponse and AjaxError . 这是AjaxRequest , AjaxResponse和AjaxError的官方v5文档的链接。 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. 到目前为止,AjaxError对象尤其具有0条信息(在回答此问题时),因此,如果您需要将此对象用作触发器而不是告诉用户出了点问题,则需要依赖源代码。 The ajax source code is here . ajax源代码在这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.