2017-12-05 2 views
1

korrekt macht, verwende redux-observable mit rxjs 5.5 und ich versuche, eine grundlegende ajax POST Anfrage zu einem Node express Server zu machen.Wie man eine Observable.ajax.post Anfrage in RXJS5

Ich kann nicht scheinen, irgendeine relevante Dokumentation oder aktuelle Arbeitsbeispiele für Observable.ajax zu finden. Welche Lösung auch immer angeboten wird, erscheint einige Fehler zu werfen, trotz scheinbar die richtige Signatur nach dem tatsächlichen API

Mein aktueller Code-Schnipsel zu verwenden (redux beobachtbare und rxjs 5.5: wie folgt:

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

Dies ist eine n-te Wiederholung des Versuches, dies zum Laufen zu bringen, aber ohne Erfolg.Erstes Problem ist die Tatsache, dass ich die crossDomain Eigenschaft auf true setzen möchte, da ihr Standardwert auf false ist, jedoch scheint es keinen solchen zu geben Eine Eigenschaft, die eingestellt werden soll (trotz der Chrome Dev Tools, die es anzeigt.

Hier ist der Fehler:

Ich benutze einen einfachen Express-Server auf dem Backend, der einfach ein einfaches JSON-Objekt zurückgibt, wenn die URL auf den Post trifft. Dieser Endpunkt wird jedoch nicht mit der aktuellen Observable.ajax.post-Anfrage oben getroffen.

Ich habe ein Chrome-Plugin, das CORS erlaubt, und die Verwendung anderer Bibliotheken wie Axios scheint zu funktionieren. Allerdings bevorzuge ich Observables und redux-observable und rxjs sind großartige Bibliotheken, ein großes Lob an die Autoren, aber ich kann dem Ajax-Problem nicht auf den Grund gehen. Kann jemand helfen?

+0

Sie können redux-observable mit den Versprechen verwenden, konvertieren Sie einfach Ihre Versprechen in eine beobachtbare mit ['Observable.fromPromise'] (http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html # static-method-fromPromise) –

Antwort

1

Hmm, ich habe das Problem überwunden, obwohl ich nicht sehen kann, wie diese Lösung es tatsächlich reparierte, da es nicht mit dem Api ausgerichtet ist. Hier ist meine Lösung für den Fall, dass jemand ähnliche Probleme hat.

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

Meine Verwirrung aus dem Api entsteht, die als für Observable.ajax.post bietet:

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

Pässe:

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

jedoch Ajax ohne spezifische Beitrag metho wird als gegeben in 'POST' als Anforderungsobjektparameter. Diese beiden Signaturen scheinen verwirrend zu sein. Warum sollte man ajax.post() verwenden, wenn es fehlschlägt, wo ajax() nicht funktioniert?

Hat jemand einen Einblick?

+0

'ajax.post()' erstellt ein 'AjaxRequest'-Objekt aus seinen Argumenten, wobei der Standardwert für' crossDomain' false ist. Mit 'ajax()' können Sie die tatsächliche 'AjaxRequest' definieren, so dass Sie' crossDomain' einstellen können. Die 'post()', 'get()' usw. -Methoden sind bequemer, so dass die Verwendung von 'ajax()' direkt mit der API übereinstimmt und für Ihren Anwendungsfall nützlich ist. –

+0

Schöne Erklärung, danke! – stevematdavies