Rxjs 5 - Yêu cầu Ajax đơn giản

Question

Tôi đang cố gắng lấy giá trị từ một yêu cầu ajax đơn giản, nhưng tôi không hiểu cách thực hiện điều đó. Đây là mã:

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

Tôi đã tìm kiếm ở khắp mọi nơi và không có giải thích đơn giản.

Cảm ơn!

Answer 1

Observable.ajax thể chấp nhận string hoặc Object với giao diện như sau:

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

thấy AjaxObservable.ts on GitHub

Và đây là ví dụ:

// 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>

Answer 2

Bạn muốn sử dụng switchMap ..

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

switchMap flattens một dòng suối và chuyển đổi nó thành một dòng mà chỉ phát ra các dòng phản ứng bên trong. Nếu một innerStream thứ hai được phát ra, luồng đầu tiên bị giết và luồng thứ hai sẽ tự phát sinh.

Xem bin này mà bản demo trực tiếp yêu cầu qua HTTP .. https://jsbin.com/duvetu/32/edit?html,js,console,output

Answer 3

phiên bản nguyên cảo

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

và

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