引言

最開(kāi)始我們看網(wǎng)頁(yè)時(shí)，對(duì)網(wǎng)頁(yè)的需求不高，顯示點(diǎn)文字，顯示點(diǎn)圖片就很滿足了，所以對(duì)于瀏覽器而言其操作的數(shù)據(jù)其實(shí)并不多（比如讀取本地圖片顯示出來(lái)，或上傳圖片到服務(wù)器），那么瀏覽器這時(shí)就需要一個(gè)對(duì)象（我們知道js里一切皆為對(duì)象）來(lái)表示圖片信息，我們知道圖片是一個(gè)文件(文件存在電腦上，其實(shí)就是一坨二進(jìn)制數(shù)字),所以就有了Blob(Binary Large Object),很大的二進(jìn)制對(duì)象，由此可見(jiàn)(小到字符串，大到文件都可以用這個(gè)二精致大對(duì)象來(lái)表示)，而File就是Blob對(duì)文件實(shí)現(xiàn)的一種(File是基于Blob做了很多擴(kuò)展)

---

1. blob

對(duì)象表示一個(gè)不可變?cè)紨?shù)據(jù)數(shù)據(jù)類(lèi)文件

//api形式
const blob = new Blob(array,options);

2. file

描述文件信息的一個(gè)對(duì)象

//api形式
const file  =  new File(bits,name[,options])

3. FormData

一種數(shù)據(jù)格式，用于表單的上傳

4. ArrayBuffer

ArrayBuffer對(duì)象代表儲(chǔ)存二進(jìn)制數(shù)據(jù)的一段內(nèi)存，它不能直接讀寫(xiě)，只能通過(guò)視圖（TypedArray視圖和DataView視圖)來(lái)讀寫(xiě)，視圖的作用是以指定格式解讀二進(jìn)制數(shù)據(jù)。ArrayBuffer也是一個(gè)構(gòu)造函數(shù)，可以分配一段可以存放數(shù)據(jù)的連續(xù)內(nèi)存區(qū)域。

const buf = new ArrayBuffer(32);

ArrayBuffer.prototype.slice()

const buff = new ArrayBuffer(32);
console.log(buff.byteLength);//32
const newBuffer = buff.slice(0, 3);

除了slice方法，ArrayBuffer對(duì)象不提供任何直接讀寫(xiě)內(nèi)存的方法，只允許在其上方建立視圖，然后通過(guò)視圖讀寫(xiě)。
5. DataView

ArrayBuffer對(duì)象、TypedArray視圖和DataView視圖是 JavaScript
操作二進(jìn)制數(shù)據(jù)的一個(gè)接口。簡(jiǎn)單說(shuō)，ArrayBuffer對(duì)象代表原始的二進(jìn)制數(shù)據(jù)，TypedArray視圖用來(lái)讀寫(xiě)簡(jiǎn)單類(lèi)型的二進(jìn)制數(shù)據(jù)，DataView視圖用來(lái)讀寫(xiě)復(fù)雜類(lèi)型的二進(jìn)制數(shù)據(jù)。很多瀏覽器操作的
API，用到了二進(jìn)制數(shù)組操作二進(jìn)制數(shù)據(jù)，下面是其中的幾個(gè)。

const buf = new ArrayBuffer(32);
const dataView = new DataView(buf);
dataView.getUint8(0) // 0, 參數(shù)表示讀取的起始位置

6. TypedArray

TypedArray視圖，與DataView視圖的一個(gè)區(qū)別是，它不是一個(gè)構(gòu)造函數(shù)，而是一組構(gòu)造函數(shù)，代表不同的數(shù)據(jù)格式。

const buffer = new ArrayBuffer(12);const x1 = new Int32Array(buffer);
x1[0] = 1;
const x2 = new Uint8Array(buffer);
x2[0] = 2;console.log(x1[0]); //2

數(shù)據(jù)類(lèi)型	字節(jié)長(zhǎng)度	含義	對(duì)應(yīng)的 C 語(yǔ)言類(lèi)型
Int8	1	8 位帶符號(hào)整數(shù)	signed char
Uint8	1	8 位不帶符號(hào)整數(shù)	unsigned char
Uint8C	1	8 位不帶符號(hào)整數(shù)（自動(dòng)過(guò)濾溢出）	unsigned char
Int16	2	16 位帶符號(hào)整數(shù)	short
Uint16	2	16 位不帶符號(hào)整數(shù)	unsigned short
Int32	4	32 位帶符號(hào)整數(shù)	int
Uint32	4	32 位不帶符號(hào)的整數(shù)	unsigned int
Float32	4	32 位浮點(diǎn)數(shù)	float
Float64	8	64 位浮點(diǎn)數(shù)	double

7. WebSocket

WebSocket可以通過(guò)ArrayBuffer，發(fā)送或接收二進(jìn)制數(shù)據(jù)。

 1 let socket = new WebSocket('ws://127.0.0.1:8081');2 socket.binaryType = 'arraybuffer';3 4 // Wait until socket is open5 socket.addEventListener('open', function (event) {6   // Send binary data7   const typedArray = new Uint8Array(4);8   socket.send(typedArray.buffer);9 });
10 
11 // Receive binary data
12 socket.addEventListener('message', function (event) {
13   const arrayBuffer = event.data;
14   // ···
15 });

8. Fetch

Fetch API 取回的數(shù)據(jù)，就是ArrayBuffer對(duì)象。Fetch 是 window.fetch，fetch() 方法必須接受一個(gè)參數(shù)：要請(qǐng)求的路徑，和一個(gè)可選參數(shù) Request 對(duì)象。無(wú)論請(qǐng)求成功與否，它都返回一個(gè) Promise 對(duì)象

優(yōu)點(diǎn)：fetch 會(huì)自己的匹配數(shù)據(jù)類(lèi)型設(shè)置 content type, 所以發(fā)送json 或者formdata 等其他數(shù)據(jù)類(lèi)型的時(shí)候,不需要你手動(dòng)設(shè)置

缺點(diǎn)：
1.兼容性,fetch的兼容性并不太好,ie 和 safari 都不支持， 返回的reponse body 是readable stream 不支持
解決方案: 使用第三方庫(kù) whatwg-fetch, 如果同構(gòu)在node端使用isomorphic-fetch.

獲取后端數(shù)據(jù)的方式

1. 刷新頁(yè)面：最直接但是最體驗(yàn)最差的一種方式

2. form表單：會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)，無(wú)法實(shí)現(xiàn)頁(yè)內(nèi)重復(fù)請(qǐng)求

3. ifream：比較消耗性能，且控制成本過(guò)高

4. Ajax - 使用XMLHttpRequest對(duì)象進(jìn)行異步請(qǐng)求，極大的提高了用戶體驗(yàn)，實(shí)現(xiàn)了頁(yè)內(nèi)請(qǐng)求

5. Fetch - Ajax的替代者，瀏覽器內(nèi)置方法，封裝了Promise機(jī)制，優(yōu)化了異步問(wèn)題

6. jQuery - 一種前端框架，封裝了數(shù)據(jù)請(qǐng)求模塊，但體積較大

7. axios、request等眾多第三方開(kāi)源庫(kù)：對(duì)原生方法的二次封裝，各有優(yōu)劣勢(shì)，百家爭(zhēng)鳴

// 其中
// imgObj = 上面那個(gè)對(duì)象
// imgObj.url = blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2const imgBlob = await fetch(imgObj.url). then(r => r.blob())//把blob字符串變成Blob對(duì)象，
const imgFile = new File([imgBlob], imgObj.file.name , { type: imgBlob.type })
const formData = new FormData();
formData.append("file", imgFile);
const res: any = await http.post("/api/uploadFile",formData);