[Javascript] AbortController to cancel the fetch request

We are able to cancel the fetch request by using AbortController with RxJS Observable.

return Observable.create(observer => {
  // Create an AbortController to able to cancel the fetch request
  const controller = new AbortController();
  // we need singal to pass to the fetch request
  const signal = controller.singal;
  // Pass the singal in fetch options
  fetch(url, { singal })
    .then(response => {
      return response.json();
    })
    .then(body => {
      observer.next(body);
      observer.complete();
    })
    .catch(err => {
      observer.error(err);
    });
  // When comsumer call sub.unsubscribe(), it will call abort()
  // to cancel the request.
  return () => controller.abort();
});

 

posted @ 2018-07-06 18:05  Zhentiw  阅读(315)  评论(0编辑  收藏  举报