???它是一個(gè)存在于原生?XMLHttpRequest?對(duì)象中的屬性。在 Web API 中，XMLHttpRequest?對(duì)象用于發(fā)送 HTTP 或 HTTPS 請(qǐng)求到服務(wù)器，并接收響應(yīng)。responseType?屬性就是用來(lái)指定預(yù)期從服務(wù)器返回的響應(yīng)數(shù)據(jù)的類型。

默認(rèn)值?

responseType的默認(rèn)值為json，它還有其他可選值

1. 'arraybuffer'：表示服務(wù)器響應(yīng)預(yù)計(jì)是 ArrayBuffer 形式，對(duì)于處理二進(jìn)制數(shù)據(jù)非常有用。

2. 'blob'：表示服務(wù)器響應(yīng)預(yù)計(jì)是二進(jìn)制大對(duì)象（Blob）形式，通常用于處理文件或圖像。

3. 'document'：表示服務(wù)器響應(yīng)預(yù)計(jì)是一個(gè) HTML Document 或 XML Document，這取決于接收到的數(shù)據(jù)的 MIME 類型。

4. 'json'：這是默認(rèn)設(shè)置。表示服務(wù)器響應(yīng)預(yù)計(jì)是 JSON 格式的。

5. 'text'：表示服務(wù)器響應(yīng)預(yù)計(jì)是文本形式，包含在 DOMString 對(duì)象中。

6. 'stream'：在某些實(shí)現(xiàn)中，這個(gè)值允許你以流的形式接收響應(yīng)數(shù)據(jù)，這在處理大文件或?qū)崟r(shí)數(shù)據(jù)流時(shí)特別有用。在數(shù)據(jù)傳輸過(guò)程中就能讀取已經(jīng)下載的數(shù)據(jù)，而不是等到所有數(shù)據(jù)都下載完成

7. 空字符串 ('')：當(dāng)?responseType?為空字符串時(shí)，它通常會(huì)采用默認(rèn)類型，即 'text'。

responseType: 'stream'?的作用

1. 內(nèi)存優(yōu)化：對(duì)于大文件或大量數(shù)據(jù)，將其全部加載到內(nèi)存中可能會(huì)導(dǎo)致內(nèi)存溢出或性能問(wèn)題。通過(guò)設(shè)置?responseType: 'stream'，你可以按需處理數(shù)據(jù)，每次只處理一小部分，從而有效管理內(nèi)存使用。

2. 實(shí)時(shí)處理：對(duì)于實(shí)時(shí)數(shù)據(jù)流，如視頻流或?qū)崟r(shí)日志，使用流可以確保你能夠?qū)崟r(shí)接收并處理數(shù)據(jù)，而不是等待整個(gè)數(shù)據(jù)流結(jié)束后再處理。

3. 靈活性：通過(guò)流，你可以使用各種流處理庫(kù)或工具來(lái)進(jìn)一步處理數(shù)據(jù)，如轉(zhuǎn)換、壓縮、加密等。

4. 錯(cuò)誤處理：當(dāng)使用流時(shí)，你可以監(jiān)聽(tīng)錯(cuò)誤事件，以便在數(shù)據(jù)傳輸過(guò)程中發(fā)生錯(cuò)誤時(shí)進(jìn)行處理。

在 Node.js 中，你可以使用流（Stream）的 API 來(lái)進(jìn)一步操作這些數(shù)據(jù)，例如使用?.pipe()?方法將數(shù)據(jù)直接傳輸?shù)搅硪粋€(gè)流（如文件寫入流）或進(jìn)行其他操作。

圖片代理服務(wù)器

代理圖片時(shí)候，如果需要等待圖片下載完成才給客戶端相遇數(shù)據(jù)，這樣太慢了。如果在下載圖片過(guò)程中就把數(shù)據(jù)推送給客戶的，這樣可以提高響應(yīng)速度。

代碼

const http = require('http');
const https = require('https');
const url = require('url');const PORT = 3000; // 你的代理服務(wù)器端口  
const httpTool = (url, cb) => {console.log("https?", url.startsWith("https"), url)let ishttps = url.startsWith("https");if (ishttps) {return https.get(url, cb);}else {return http.get(url, cb);}}
const server = http.createServer((req, res) => {const parsedUrl = url.parse(req.url, true);console.log("href", parsedUrl.query.url)const targetPath = parsedUrl.query.url;// 創(chuàng)建一個(gè)請(qǐng)求到原始圖片服務(wù)器  const targetReq = httpTool(targetPath, (targetRes) => {// 將原始服務(wù)器的響應(yīng)轉(zhuǎn)發(fā)給客戶端  res.writeHead(targetRes.statusCode, targetRes.headers);console.log("流數(shù)據(jù)接受中..")targetRes.pipe(res);});targetReq.on('error', (err) => {console.error(`請(qǐng)求 ${targetPath} 時(shí)出錯(cuò):`, err);res.writeHead(500);res.end('圖片代理服務(wù)器內(nèi)部錯(cuò)誤');});
});server.listen(PORT, () => {console.log(`圖片代理服務(wù)器正在運(yùn)行，監(jiān)聽(tīng)端口 ${PORT}`);
});

命令行

命令執(zhí)行node index.js，

文件本地起一個(gè)端口3000的代理服務(wù)器,攔截所有請(qǐng)求?

客戶端請(qǐng)求地址

query url是要請(qǐng)求的真實(shí)圖片

http://localhost:3000/?url=https://www.runoob.com/images/pulpit.jpg

這種方式可以避免瀏覽器跨域，更加細(xì)致的代理插件 http-proxy-middleware?

xmlhttprequest使用?stream

const xhr = new XMLHttpRequest();  // 設(shè)置響應(yīng)類型為流  
xhr.responseType = 'stream';  // 打開(kāi)請(qǐng)求  
xhr.open('GET', 'http://example.com/large-file', true);  // 注冊(cè) onload 事件處理程序  
xhr.onload = function () {  if (this.status === 200) {  // 獲取響應(yīng)流  const reader = this.response;  const stream = reader.getReader();  // 讀取流中的數(shù)據(jù)塊  function read() {  stream.read().then(({ value, done }) => {  // 如果還有數(shù)據(jù)，處理 value（它是一個(gè) Uint8Array）  if (value) {  // 在這里處理數(shù)據(jù)塊，例如寫入文件或進(jìn)行其他操作  console.log(value);  // 繼續(xù)讀取流中的下一個(gè)數(shù)據(jù)塊  read();  } else {  // 所有數(shù)據(jù)都已讀取完畢  console.log('Stream reading complete.');  }  }).catch(error => {  console.error('Error reading stream:', error);  });  }  // 開(kāi)始讀取流  read();  } else {  console.error('Request failed with status', this.status);  }  
};  // 注冊(cè) onerror 事件處理程序  
xhr.onerror = function () {  console.error('Request failed');  
};  // 發(fā)送請(qǐng)求  
xhr.send();

?

axios使用stream

const express = require('express');  
const axios = require('axios'); // 用于發(fā)送 HTTP 請(qǐng)求  
const app = express();  
const PORT = 3000; // 代理服務(wù)器端口  // 配置 Express 應(yīng)用  
app.use(express.urlencoded({ extended: false }));  
app.use(express.json());  // 代理圖片請(qǐng)求的中間件  
function proxyImage(req, res, next) {  const targetUrl = `http://example.com${req.originalUrl}`; // 構(gòu)造目標(biāo) URL  axios({  method: 'get',  url: targetUrl,  responseType: 'stream', // 響應(yīng)類型設(shè)置為流  })  .then((response) => {  // 設(shè)置響應(yīng)頭  const headers = response.headers;  delete headers['content-length']; // 刪除 content-length，因?yàn)榱鞯拈L(zhǎng)度未知  res.set(headers);  // 將響應(yīng)流轉(zhuǎn)發(fā)給客戶端  response.data.pipe(res);  })  .catch((error) => {  console.error('Error fetching image:', error);  res.status(500).send('Error fetching image');  });  
}  // 應(yīng)用代理圖片請(qǐng)求的中間件  
app.use('/images', proxyImage); // 所有以 '/images' 開(kāi)頭的請(qǐng)求都會(huì)被代理  // 啟動(dòng)服務(wù)器  
app.listen(PORT, () => {  console.log(`圖片代理服務(wù)器正在運(yùn)行，監(jiān)聽(tīng)端口 ${PORT}`);  
});