2016-07-26 9 views

ответ

35

(Примечание: RX.DOM.ajax от RxJS v4, и не работает с redux-observable, который требует RxJS v5 эквивалент в v5 является Rx.Observable.ajax или import { ajax } from 'rxjs/observable/ajax';.)

Это действительно можно использовать fetch(), а также любые другой API AJAX; хотя некоторые адаптируются легче других!

fetch() API возвращает Promise, который RxJS v5 имеет встроенную поддержку для. Большинство операторов, которые ожидают наблюдаемого, могут использовать Promises as-is (например, mergeMap, switchMap и т. Д.). Но часто вам нужно применить Rx-операторы к Promise, прежде чем передавать их вместе с остальной частью вашего Epic, поэтому вы часто захотите обернуть Promise внутри Observable.

Вы можете обернуть Promise в наблюдаемую с Observable.from(promise)

Вот пример, где я выборки для пользователя, запросить ответ в формате JSON, а затем оберните обещание в наблюдаемой:

const api = { 
    fetchUser: id => { 
    const request = fetch(`https://jsonplaceholder.typicode.com/users/${id}`) 
     .then(response => response.json()); 
    return Observable.from(request); 
    } 
}; 

Затем вы можете использовать это в своей Epic и применять любые операторы, которых вы хотите:

const fetchUserEpic = action$ => 
    action$.ofType(FETCH_USER) 
    .mergeMap(action => 
     api.fetchUser(action.payload) // This returns our Observable wrapping the Promise 
     .map(payload => ({ type: FETCH_USER_FULFILLED, payload })) 
    ); 

JSBin с этим рабочий пример: https://jsbin.com/fuwaguk/edit?js,output


Если у вас есть контроль над кодом API, в идеале вы должны использовать Observable.ajax (или любые другие Observable на основе AJAX утилиты), потому что Обещания не могут быть отменены. (на момент написания этой статьи)

+0

Спасибо, Джей, для объяснения! – zatziky

 Смежные вопросы

  • Нет связанных вопросов^_^