js fetch api

MDN

fatch

返回的對象

type string
url string
redirected boolean
status number
ok boolean
statusText string
headers object
body object
bodyUsed boolean
clone function

arrayBuffer function
blob function
formData function
json function
text function

接口

@Get('get')
  root(): Observable < any > {
    return of({ msg: 'get res ...'})
  }

  @Get('get1')
  root1(): Observable < any > {
    return of({
      msg: 'get1 res...'
    });
  }

  @Get('get2')
  root2(): Observable < any > {
    return of({
      msg: 'get2 res...'
    });
  }

  @Post('post')
  create(): Observable < any > {
    return of({
      msg: 'post res...'
    });
  }

get 和 post

get() {
          let headers = new Headers();
          headers.append('Content-Type', 'application/json');

          let option = {
            method: 'GET',
            headers: headers,
            mode: 'cors',
            cache: 'default'
          };

          let request = new Request('/get', option);
          fetch(request).then(res => res.json()).then(res => console.log(res));
        

        post() {
          let headers = new Headers();
          headers.append('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');

          let option = {
            method: 'POST',
            headers: headers,
            mode: 'cors',
            cache: 'default'
          };

          let request = new Request('/post', option);
          fetch(request).then(res => res.json()).then(res => console.log(res));

        }

rxjs的ajax

rxjs.ajax.ajax.get('/get',{'content-type': 'application/json'})
            .pipe(
              rxjs.operators.map(res => res.response)
            )
            .subscribe(
              v => { console.log(v) },
              e => { console.log(e) },
              () => { console.log('complete') }
            );

            rxjs.ajax.ajax.post('/post',{'content-type': 'application/x-www-form-urlencoded;charset=utf-8'})
            .pipe(
              rxjs.operators.map(res => res.response)
            )
            .subscribe(
              v => { console.log(v) },
              e => { console.log(e) },
              () => { console.log('complete') }
            );

rxjs 包裝 fetch

let get$ = rxjs.from(fetch('/get', {
            method: 'GET',
            headers: headers
          }))

          get$.pipe( rxjs.operators.mergeMap(res => rxjs.from(res.json())))
          .subscribe(res => console.log( res))

併發請求

let get$ = rxjs.from(fetch('/get', {
            method: 'GET',
            headers: headers
          }))

          let get1$ = rxjs.from(fetch('/get1', {
            method: 'GET',
            headers: headers
          }))

          let get2$ = rxjs.from(fetch('/get2', {
            method: 'GET',
            headers: headers
          }))

          rxjs.merge(get$, get1$, get2$)
            .pipe(
              rxjs.operators.mergeMap(res => rxjs.from(res.json()))
            )
            .subscribe(res => console.log(res), err => console.error(err))