526互联

Fetch API res.buffer vs res.arrayBuffer All In One

发布时间 2023-09-12 22:18:29作者: xgqfrms

Fetch API res.buffer vs res.arrayBuffer All In One

error

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of ArrayBuffer

import fs from 'node:fs';
import path from 'path';
import fetch from "node-fetch";

// read JSON ✅ filename
const url = `https://cdn.xgqfrms.xyz/video/web-testing.mp4`
const filename = "web-testing.mp4";
const dirPath = "./abc";
if (!fs.existsSync(dirPath)) {
  fs.mkdirSync(dirPath);
}

// fetch data as a buffer
fetch(url)
  // ❌
  // .then((res) => res.arrayBuffer())
  .then((res) => {
    // console.log(`res =`, res)
    console.log(`loading ... ⏳`);
    return res.arrayBuffer();
  })
  // (node:40449) [node-fetch#buffer] DeprecationWarning: Please use 'response.arrayBuffer()' instead of 'response.buffer()'
  .then((buffer) => {
    console.log(`finished ✅`)
    // Write the buffer to a file
    // ❌`fs.writeFile` TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of ArrayBuffer
    fs.writeFile(path.join(dirPath, filename), buffer, (err) => {
      if (err) {
        console.error(err);
      } else {
        console.log("video downloaded successfully");
      }
    });
  })
  .catch((err) => console.error(err));

warning ⚠️

The signature '(): Promise<Buffer>' of 'res.buffer' is deprecated.ts(6387)
index.d.ts(134, 6): The declaration was marked as deprecated here.
(method) BodyMixin.buffer(): Promise<Buffer>
@deprecated — Use body.arrayBuffer() instead.

Deprecation Warning: Please use 'response.arrayBuffer()' instead of 'response.buffer()'

import fs from 'node:fs';
import path from 'path';
import fetch from "node-fetch";

// read JSON ✅ filename
const url = `https://cdn.xgqfrms.xyz/video/web-testing.mp4`
const filename = "web-testing.mp4";
const dirPath = "./abc";
if (!fs.existsSync(dirPath)) {
  fs.mkdirSync(dirPath);
}

// fetch data as a buffer
fetch(url)
  // ✅
  // .then((res) => res.buffer())
  .then((res) => {
    // console.log(`res =`, res)
    console.log(`loading ... ⏳`);
    return res.buffer();
  })
  // (node:40449) [node-fetch#buffer] DeprecationWarning: Please use 'response.arrayBuffer()' instead of 'response.buffer()'
  .then((buffer) => {
    console.log(`finished ✅`)
    // Write the buffer to a file
    fs.writeFile(path.join(dirPath, filename), buffer, (err) => {
      if (err) {
        console.error(err);
      } else {
        console.log("video downloaded successfully");
      }
    });
  })
  .catch((err) => console.error(err));

image

Response.arrayBuffer()

function getData() {
  const audioCtx = new AudioContext();

  return fetch("viper.ogg")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error, status = ${response.status}`);
      }
      // arrayBuffer❓需要转换处理
      return response.arrayBuffer();
    })
    .then((buffer) => audioCtx.decodeAudioData(buffer))
    .then((decodedData) => {
      const source = new AudioBufferSourceNode();
      source.buffer = decodedData;
      source.connect(audioCtx.destination);
      return source;
    });
}

// wire up buttons to stop and play audio

play.onclick = () => {
  getData().then((source) => {
    source.start(0);
    play.setAttribute("disabled", "disabled");
  });
};

https://developer.mozilla.org/en-US/docs/Web/API/Response/arrayBuffer

demos

(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

node-fetch

export type BodyInit =
  | Blob
  | Buffer
  | URLSearchParams
  | FormData
  | NodeJS.ReadableStream
  | string;
declare class BodyMixin {
  constructor(body?: BodyInit, options?: {size?: number});

  readonly body: NodeJS.ReadableStream | null;
  readonly bodyUsed: boolean;
  readonly size: number;

  /** @deprecated Use `body.arrayBuffer()` instead. */
  buffer(): Promise<Buffer>;
  arrayBuffer(): Promise<ArrayBuffer>;
  formData(): Promise<FormData>;
  blob(): Promise<Blob>;
  json(): Promise<unknown>;
  text(): Promise<string>;
}

/Users/xgqfrms-mm/Documents/github/node-web-framework-all-in-one/000-xyz/crawler/node_modules/node-fetch/@types/index.d.ts

Response instance methods

Response.buffer() ❓

Response.arrayBuffer()
Returns a promise that resolves with an ArrayBuffer representation of the response body.

Response.blob()
Returns a promise that resolves with a Blob representation of the response body.

Response.clone()
Creates a clone of a Response object.

Response.formData()
Returns a promise that resolves with a FormData representation of the response body.

Response.json()
Returns a promise that resolves with the result of parsing the response body text as JSON.

Response.text()
Returns a promise that resolves with a text representation of the response body.

https://developer.mozilla.org/en-US/docs/Web/API/Response#instance_methods

https://developer.mozilla.org/en-US/docs/Web/API/Response/blob

refs

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ?️，侵权必究⚠️！