zoukankan      html  css  js  c++  java
  • js fetch

    返回的对象

    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 和 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 包装 fetch

    let get$ = rxjs.from(fetch('/get', {
      method: 'GET',
      headers: headers
    }))
    
    get$
      .pipe(rxjs.operators.mergeMap(res => rxjs.from(res.json())))
      .subscribe(console.log)
    

    并发请求

    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(console.log)
    

    读取流

    fetch("http://localhost:3000/api/stream")
      .then((r) => r.body)
      .then((body) => body.getReader())
      .then(async (reader) => {
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          const resString = new TextDecoder("utf-8").decode(value);
          console.assert(JSON.parse(resString).data === 100);
        }
        console.log("done.");
      });
    
      @Get('/stream')
      stream() {
        return of(JSON.stringify({ data: 100 })).pipe(delay(2000));
      }
    

    发送流

    example 1:

    const r$ = new ReadableStream({
      start(c) {
        c.enqueue("hello ");
        setTimeout(() => {
        c.enqueue("world");
          c.close();
        }, 2000);
      },
    });
    
    await fetch("http://localhost:3000/api/stream", {
      method: "POST",
      body: r$.pipeThrough(new TextEncoderStream()),
      allowHTTP1ForStreamingUpload: true,
    });
    

    example 2:

    const { writable, readable } = new TransformStream();
    const w$ = writable.getWriter();
    w$.write("hello ");
    setTimeout(() => {
      w$.write("world");
      w$.close();
    }, 2000);
    
    await fetch("http://localhost:3000/api/stream", {
      method: "POST",
      body: readable.pipeThrough(new TextEncoderStream()),
      allowHTTP1ForStreamingUpload: true,
    });
    
    import * as rawbody from 'raw-body';
    
      @Post('/stream')
      async stream(@Req() req) {
        const raw = await rawbody(req);
        const text = raw.toString('utf-8').trim();
        console.log(text);
        return 'hello';
      }
    

    See also:

  • 相关阅读:
    让AutoMapper更好用
    设置ADB网络连接目标板
    windos或linux中 which命令 查看当前要执行的命令所在的路径
    secureCRT使用退格键(backspace)出现^H解决办法
    Ubuntu12.04安装insight-6.8
    Linux命令之type
    BUG:给Nexus7编译Android4.2的时候出现 fatal error: map: No such file or directory
    Kconfig和Makefile的修改
    diff命令的参数详解和实例
    Linux获取当前目录名,shell获取当前目录名
  • 原文地址:https://www.cnblogs.com/ajanuw/p/8279944.html
Copyright © 2011-2022 走看看