XMLHttpRequest (傳統 XHR 物件、Axios 的瀏覽器端底層實作) - daniel-qa/Vue GitHub Wiki

/* 采用原生Xhr来发送HTTP请求 避免携带token访问blob报错 */
getFile(url, type) {
	return new Promise((resolve, reject) => {
		var xhr = new XMLHttpRequest();
		var formData = new FormData();
		xhr.open('get', url); //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
		if (type) xhr.responseType = 'arraybuffer';
		xhr.onload = function (e) {
			switch (e.currentTarget.status) {
				case 200:
					resolve(e.currentTarget.response)
					break;
				case 404:
					// Message.error('有资源丢失')
					reject(404)
					break;
				case 403:
					Message.error(app.$t('http.error403'))
					reject(403)
					break;
				default:
					break;
			}
		};
		xhr.send(formData);
	})
},

responseType = 'arraybuffer' 是讓瀏覽器用二進位資料格式接收檔案內容，而不是把檔案內容轉成文字。

---

XMLHttpRequest (傳統 XHR 物件、Axios 的瀏覽器端底層實作)

XMLHttpRequest (XHR)

1 . 瀏覽器原生 HTTP 通訊 API

• 使用 JavaScript 發送 HTTP Request，取得 Server Response。

• Axios / Fetch 都是在它之上的封裝概念。

2 . 支援資料與檔案處理

可處理：

JSON / Text
Blob（PDF、圖片、Excel）
ArrayBuffer（二進位資料）

3 .常見使用情境

檔案上傳 / 下載

需要控制 Header、ResponseType

避免 axios 全域設定（例如 Token interceptor）影響下載流程

• 範例

const xhr = new XMLHttpRequest();

// 設定 GET 請求
xhr.open('GET', '/api/user');

// 接收回應
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};

// 發送請求
xhr.send();

流程

建立 XMLHttpRequest
        ↓
open() 設定 API
        ↓
send() 發送請求
        ↓
onload 取得結果