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';
  }