js fetch api

最新推荐文章于 2025-05-23 20:32:59 发布

weixin_34404393

最新推荐文章于 2025-05-23 20:32:59 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/ajanuw/p/8279944.html

本文介绍了使用Fetch API和RxJS进行网络请求的方法，包括GET和POST请求的具体实现，并展示了如何利用RxJS处理并发请求。

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

转载于:https://www.cnblogs.com/ajanuw/p/8279944.html