आरएक्सजेएस 5 - सरल अजाक्स अनुरोध

Question

मैं एक साधारण AJAX अनुरोध से मूल्य प्राप्त करने का प्रयास कर रहा हूं, लेकिन मुझे समझ में नहीं आता कि यह कैसे करना है। यहां कोड है:

Rx.Observable 
    .ajax({ url: 'https://jsonplaceholder.typicode.com/posts', method: 'GET', responseType: 'json' }) 
    .subscribe(function(data) { return data.response; }); 

मैंने हर जगह खोज की और कोई सरल स्पष्टीकरण नहीं है।

धन्यवाद!

Answer 1

Observable.ajaxstring या Object निम्नलिखित इंटरफेस के साथ स्वीकार कर सकते हैं:

// simple GET request example 
 
const simple$ = Rx.Observable 
 
    .ajax('https://httpbin.org/get') 
 
    .map(e => e.response); 
 

 
const complex$ = Rx.Observable.ajax({ 
 
    url: 'https://httpbin.org/post', 
 
    method: 'POST', 
 
    headers: { 
 
    'Content-Type': 'application/json', 
 
    'x-rxjs-is': 'Awesome!' 
 
    }, 
 
    body: { 
 
    hello: 'World!', 
 
    } 
 
}).map(e => e.response); 
 

 

 
const htmlSubscription = Rx.Observable.combineLatest(simple$, complex$) 
 
    .subscribe(([simple, complex]) => { 
 
    const simpleResponse = JSON.stringify(simple, null, 2); 
 
    const complexResponse = JSON.stringify(complex, null, 2); 
 
    document.getElementById('root').innerHTML = ` 
 
     <div> 
 
     <span><b>GET</b> https://httpbin.org/get</span> 
 
     <pre>${simpleResponse}</pre> 
 

 
     <span><b>POST</b>* https://httpbin.org/post</span> 
 
     <pre>${complexResponse}</pre> 
 
     </div>`; 
 
    });

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script> 
 
<div id="root">loading ...</div>

:

interface AjaxRequest { 
    url?: string; // URL of the request 
    body?: any; // The body of the request 
    user?: string; 
    async?: boolean; // Whether the request is async 
    method?: string; // Method of the request, such as GET, POST, PUT, PATCH, DELETE 
    headers?: Object; // Optional headers 
    timeout?: number; 
    password?: string; 
    hasContent?: boolean; 
    crossDomain?: boolean; //true if a cross domain request, else false 
    withCredentials?: boolean; 
    createXHR?:() => XMLHttpRequest; //a function to override if you need to use an alternate XMLHttpRequest implementation 
    progressSubscriber?: Subscriber<any>; 
    responseType?: string; 
} 

यहाँ AjaxObservable.ts on GitHub

देखने और उदाहरण है

Answer 2

आप switchMap उपयोग करना चाहते हैं ..

const response$ = request$.switchMap((url) => { 
    console.log(url); 
    return fetch(url).then(res => res.json()); 
}); 

switchMap धाराओं की एक धारा सपाट और एक धारा है कि बस भीतरी धाराओं प्रतिक्रियाओं का उत्सर्जन करता है में बदल देता है। यदि एक दूसरा आंतरिक प्रवाह उत्सर्जित होता है, तो पहली धारा मारे जाती है और दूसरा अपना स्वयं का होता है।

इस बिन जो क़ौम से अधिक अनुरोध स्ट्रीम किए देखें HTTP .. https://jsbin.com/duvetu/32/edit?html,js,console,output

Answer 3

टाइपप्रति संस्करण

"dependencies": { 
    "rxjs": "^5.1.0" 
} 

और

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/dom/ajax'; 
import 'rxjs/add/observable/combineLatest'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/catch'; 


const posts$ = Observable 
    .ajax('https://jsonplaceholder.typicode.com/posts') 
    .map(e => e.response); 


    const htmlSubscription = posts$ 
    .subscribe(res => { 
    console.log(JSON.stringify(res, null, 2)); 
    });