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:

  • 相关阅读:
    jQuery 语法
    jQuery 简介
    把数据存储到 XML 文件
    XML 注意事项
    XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
    通过 PHP 生成 XML
    XML 命名空间(XML Namespaces)
    XML to HTML
    XMLHttpRequest 对象
    使用 XSLT 显示 XML
  • 原文地址:https://www.cnblogs.com/ajanuw/p/8279944.html
Copyright © 2011-2022 走看看