2017-12-05 14 views
1

rxjs 5.5와 함께 redux-observable을 사용하고 node express 서버에 기본 ajax POST 요청을 시도하고 있습니다.RXJS5에서 Observable.ajax.post 요청을 올바르게 작성하는 방법

Observable.ajax에 대한 관련 문서 또는 최신 작동 예제를 찾을 수 없습니다. 제공되는 무엇이든간에 솔루션은 실제 API에 따라 올바른 서명으로 보이는에도 불구하고, 일부 오류를 던져 나타납니다

사용하여 내 현재 코드 (REDUX-관찰이 5.5 rxjs : 다음과 같다 :

const loginEpic = (actions) => { 

    const opts = credentials => { 
     const { username, password } = credentials; 
     return { 
      url: 'http://localhost:3001/login', 
      body:{ username, password }, 
      headers: { 'Content-Type': 'application/json; charset=utf-8' }, 
     };  
    }; 

    return actions.ofType(ActionTypes.LOGIN_REQUESTED) 
     .switchMap(({credentials}) => { 
      const { url, body, headers } = opts(credentials) 
      return Observable.ajax.post(url, body, headers) 
      .map(loginResponse => 
       loginResponse.status===200 
        ? loginResolvedAction(loginResponse.response) 
        : loginFailedAction(loginResponse.response))}) 
} 

첫 번째 문제는 crossDomain 속성을 true로 설정하고 기본값을 false로 설정하고 싶습니다. 그러나 그런 경우에는 아무 것도 없을 것 같습니다. 설정해야 할 속성 (Chrome Dev Tools에 표시됨에도 불구하고 표시됨)

여기에 오류가 있습니다.

url이 게시물에 도달했을 때 기본 JSON 개체를 반환하는 간단한 익스프레스 서버를 백 엔드에 사용하고 있습니다. 그러나이 끝점은 위의 현재 Observable.ajax.post 요청과 일치하지 않습니다.

CORS를 허용하고 Axios와 같은 다른 라이브러리를 사용하는 Chrome 플러그인이 있습니다. 그러나 Observables를 사용하는 것을 선호하며 redux-observable 및 rxjs는 훌륭한 라이브러리이며 작성자에게 명성을 얻지 만 아약스 문제의 맨 아래로 갈 수는 없습니다. 누구든지 도와 줄 수 있습니까?

+0

redux-observable을 사용하여 약속을 변환 할 수 있습니다. [Observable.fromPromise'] (http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html)를 사용하여 약속을 Observable로 변환하면됩니다. # static-method-fromPromise) –

답변

1

흠, Api와 맞지 않기 때문에이 솔루션이 어떻게 실제로 고정되었는지는 알 수 없지만 문제를 극복 한 것 같습니다. 누구든지 비슷한 문제가있는 경우를 대비하여 내 솔루션입니다.

내 혼란으로 Observable.ajax.post 위해 제공하는 API의 발생
const reportsEpic = (actions) => { 

    const requestSettings = token => ({ 
     url:`http://localhost:3001/testReports/${token}`, 
     crossDomain: true, 
     contentType: "application/json; charset=utf-8", 
     responseType:'json', 
    }) 

    return actions.ofType(ActionTypes.REPORTS_REQUESTED) 
     .switchMap(({token}) => 
      Observable.ajax(requestSettings(token)) 
      .map(reportsResponse => 
       reportsResolvedAction(reportsResponse.response))); 
} 

:

let Observable<T>.ajax: AjaxCreationMethod(urlOrRequest: string | AjaxRequest) => Observable<AjaxResponse> 

합격 :

그러나
(method) AjaxCreationMethod.post(url: string, body?: any, headers?: Object): Observable<AjaxResponse> 

특정 포스트 운전 방식 않고 Ajax를 사용하여는 다음과 같이 주어진다 'POST'에서 요청 개체 매개 변수로. 이 두 가지 서명은 혼란스러워 보입니다. ajax()이 실패하면 왜 ajax.post()을 사용합니까?

누구든지이 사실에 대해 통찰력을 갖고 있습니까?

+0

'ajax.post()'는 인수로부터'AjaxRequest' 객체를 생성합니다. 여기서'crossDomain'의 기본값은 false입니다. 'ajax()'는 실제'AjaxRequest'를 정의 할 수 있도록'crossDomain'을 설정할 수 있습니다. 'post()','get()'등의 메소드는 편리하기 때문에'ajax()'를 직접 사용하면 API와 연계되어 사용 사례로 유용합니다. –

+0

좋은 설명, 고마워! – stevematdavies