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:

  • 相关阅读:
    SSM项目搭建(提供源码)
    U盘启动安装linux时卡在“starting dracut initqueue hook”
    nginx 中只能访问根目录,无法访问路由(404)
    在多GPU情况下TensorFlow如何指定在哪些GPU上运行程序
    TensorFlow只训练部分参数
    python中的随机数函数
    Python中读取、显示和保存图片的方法
    神经网络中参数数量的计算
    排序算法
    window Linux 双系统安装
  • 原文地址:https://www.cnblogs.com/ajanuw/p/8279944.html
Copyright © 2011-2022 走看看