對于前端來說，請求是前端日常工作必備的，通過請求才能與后端進行數據交互，尤其在現在前后端分離的開發模式下，請求顯得就更加重要。因此，對于前端開發者來說，掌握請求就很重要。下面將從 http 請求和常見的幾個請求技術做具體的講解。

1.XMLHttpRequest

XMLHttpRequest 一開始只是微軟瀏覽器提供的一個接口，后來各大瀏覽器紛紛效仿也提供了這個接口，再后來 W3C 對它進行了標準化，按照標準前后可以分為兩個版本，具體闡述如下：

版本一(老版本)：

//新建一個XMLHttpRequest對象var xhr=new XMLHttpRequest();//進行請求xhr.open('GET', 'url');xhr.send();//等待服務器響應xhr.onreadystatechange = function(){ //該函數會被調用四次，因此需要判斷狀態是否為4 if ( xhr.readyState == 4 && xhr.status == 200 ) { alert( xhr.responseText ); } else { alert( xhr.statusText ); }};

在老版本中的，對應的具體屬性說明如下：

1. xhr.readyState：XMLHttpRequest 對象的狀態，等于 4 表示數據已經接收完畢。

2. xhr.status：服務器返回的狀態碼，等于 200 表示一切正常。

3. xhr.responseText：服務器返回的文本數據

4. xhr.responseXML：服務器返回的 XML 格式的數據

5. xhr.statusText：服務器返回的狀態文本。

老版本因為不是統一的標準，各個瀏覽器廠商在實現的時候都有一定的差異，而且在存在一些缺陷：

1. 只支持文本數據的傳送，無法用來讀取和上傳二進制文件。

2. 傳送和接收數據時，沒有進度信息，只能提示有沒有完成。

3. 受到"同域限制"(Same Origin Policy)，只能向同一域名的服務器請求數據。

版本二(標準后的版本)：

為了更好的使用 XMLHttpRequest，w3school 發布了標準版本，該版本彌補了版本一的缺陷，也被各大瀏覽器廠商接受并實現。具體為：

1. 可以設置 HTTP 請求的時限。

2. 可以使用 FormData 對象管理表單數據。

3. 可以上傳文件。

4. 可以請求不同域名下的數據(跨域請求)。

5. 可以獲取服務器端的二進制數據。

6. 可以獲得數據傳輸的進度信息。

當然，一般為了友好的進行兼容各個瀏覽器，會采用對瀏覽器進行判斷并進行兼容性模式來獲取 XMLHttpRequest 的對象。

var xhr;if (window.XMLHttpRequest) { // Mozilla, Safari... xhr = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE5,6 } catch (e) {} }}// 請求成功回調函數xhr.onload = e => { console.log('request success');};// 請求結束xhr.onloadend = e => { console.log('request loadend');};// 請求出錯xhr.onerror = e => { console.log('request error');};// 請求超時xhr.ontimeout = e => { console.log('request timeout');};// 請求回調函數.XMLHttpRequest標準又分為Level 1和Level 2,這是Level 1和的回調處理方式// xhr.onreadystatechange = () => {// if (xhr.readyState !== 4) {// return;// }// const status = xhr.status;// if ((status >= 200 && status < 300) || status === 304) {// console.log('request success');// } else {// console.log('request error');// }// };xhr.timeout = 0; // 設置超時時間,0表示永不超時// 初始化請求xhr.open('GET/POST/DELETE/...', '/url', true || false);// 設置期望的返回數據類型 'json' 'text' 'document' ...xhr.responseType = '';// 設置請求頭xhr.setRequestHeader('', '');// 發送請求xhr.send(null || new FormData || 'a=1&b=2' || 'json字符串');

2.ajax 請求

AJAX 是一種與服務器交換數據的技術，可以在不重新載入整個頁面的情況下更新網頁的一部分，其實就是對 XMLHttpRequest 的封裝，可以直接引入 jquery 工具包來進行調用ajax 請求(jquery 是一個 js 工具包，其特點是：寫得少，做得多)，具體的 ajax 常用方式如下：

優點：

• 對原生 XHR 的封裝
• 針對 MVC 的編程
• 完美的兼容性
• 支持 jsonp

缺點：

• 不符合 MVVM
• 異步模型不夠現代，不支持鏈式，代碼可讀性差
• 整個 Jquery 太大，引入成本過高

當然，我們可以直接使用 XMLHttpReqeust 來進行實現自己的 ajax 封裝，具體代碼如下：

const http = { /** * js封裝ajax請求 * >>使用new XMLHttpRequest 創建請求對象,所以不考慮低端IE瀏覽器(IE6及以下不支持XMLHttpRequest) * >>使用es6語法,如果需要在正式環境使用,則可以用babel轉換為es5語法 https://babeljs.cn/docs/setup/#installation * @param settings 請求參數模仿jQuery ajax * 調用該方法,data參數需要和請求頭Content-Type對應 * Content-Type data 描述 * application/x-www-form-urlencoded 'name=哈哈&age=12'或{name:'哈哈',age:12} 查詢字符串,用&分割 * application/json name=哈哈&age=12' json字符串 * multipart/form-data new FormData() FormData對象,當為FormData類型,不要手動設置Content-Type * 注意:請求參數如果包含日期類型.是否能請求成功需要后臺接口配合 */ ajax: (settings = {}) => { // 初始化請求參數 let _s = Object.assign({ url: '', // string type: 'GET', // string 'GET' 'POST' 'DELETE' dataType: 'json', // string 期望的返回數據類型:'json' 'text' 'document' ... async: true, // boolean true:異步請求 false:同步請求 required data: null, // any 請求參數,data需要和請求頭Content-Type對應 headers: {}, // object 請求頭 timeout: 1000, // string 超時時間:0表示不設置超時 beforeSend: (xhr) => { }, success: (result, status, xhr) => { }, error: (xhr, status, error) => { }, complete: (xhr, status) => { } }, settings); // 參數驗證 if (!_s.url || !_s.type || !_s.dataType || !_s.async) { alert('參數有誤'); return; } // 創建XMLHttpRequest請求對象 let xhr = new XMLHttpRequest(); // 請求開始回調函數 xhr.addEventListener('loadstart', e => { _s.beforeSend(xhr); }); // 請求成功回調函數 xhr.addEventListener('load', e => { const status = xhr.status; if ((status >= 200 && status < 300) || status === 304) { let result; if (xhr.responseType === 'text') { result = xhr.responseText; } else if (xhr.responseType === 'document') { result = xhr.responseXML; } else { result = xhr.response; } // 注意:狀態碼200表示請求發送/接受成功,不表示業務處理成功 _s.success(result, status, xhr); } else { _s.error(xhr, status, e); } }); // 請求結束 xhr.addEventListener('loadend', e => { _s.complete(xhr, xhr.status); }); // 請求出錯 xhr.addEventListener('error', e => { _s.error(xhr, xhr.status, e); }); // 請求超時 xhr.addEventListener('timeout', e => { _s.error(xhr, 408, e); }); let useUrlParam = false; let sType = _s.type.toUpperCase(); // 如果是"簡單"請求,則把data參數組裝在url上 if (sType === 'GET' || sType === 'DELETE') { useUrlParam = true; _s.url += http.getUrlParam(_s.url, _s.data); } // 初始化請求 xhr.open(_s.type, _s.url, _s.async); // 設置期望的返回數據類型 xhr.responseType = _s.dataType; // 設置請求頭 for (const key of Object.keys(_s.headers)) { xhr.setRequestHeader(key, _s.headers[key]); } // 設置超時時間 if (_s.async && _s.timeout) { xhr.timeout = _s.timeout; } // 發送請求.如果是簡單請求,請求參數應為null.否則,請求參數類型需要和請求頭Content-Type對應 xhr.send(useUrlParam ? null : http.getQueryData(_s.data)); }, // 把參數data轉為url查詢參數 getUrlParam: (url, data) => { if (!data) { return ''; } let paramsStr = data instanceof Object ? http.getQueryString(data) : data; return (url.indexOf('?') !== -1) ? paramsStr : '?' + paramsStr; }, // 獲取ajax請求參數 getQueryData: (data) => { if (!data) { return null; } if (typeof data === 'string') { return data; } if (data instanceof FormData) { return data; } return http.getQueryString(data); }, // 把對象轉為查詢字符串 getQueryString: (data) => { let paramsArr = []; if (data instanceof Object) { Object.keys(data).forEach(key => { let val = data[key]; // todo 參數Date類型需要根據后臺api酌情處理 if (val instanceof Date) { // val = dateFormat(val, 'yyyy-MM-dd hh:mm:ss'); } paramsArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(val)); }); } return paramsArr.join('&'); }}

3.vue-resource 請求

vue-resource 是 Vue.js 的一款插件，它可以通過 XMLHttpRequest 或 JSONP 發起請求并處理響應。也就是說，$.ajax 能做的事情，vue-resource 插件一樣也能做到，而且vue-resource 的 API 更為簡潔。另外，vue-resource 還提供了非常有用的 inteceptor功能，使用 inteceptor 可以在請求前和請求后附加一些行為，比如使用 inteceptor 在ajax 請求時顯示 loading 界面。

特點：1. 體積小

vue-resource 非常小巧，在壓縮以后只有大約 12KB，服務端啟用 gzip 壓縮后只有 4.5KB 大小，這遠比 jQuery 的體積要小得多。

2. 支持主流的瀏覽器

和 Vue.js 一樣，vue-resource 除了不支持 IE 9 以下的瀏覽器，其他主流的瀏覽器都支持。

3. 支持 Promise API 和 URI Templates

Promise 是 ES6 的特性，Promise 的中文含義為“先知”，Promise 對象用于異步計算。

URI Templates 表示 URI 模板，有些類似于 ASP.NET MVC 的路由模板。

4. 支持攔截器

攔截器是全局的，攔截器可以在請求發送前和發送請求后做一些處理。

攔截器在一些場景下會非常有用，比如請求發送前在 headers 中設置 access_token，或者在請求失敗時，提供共通的處理方式。

常用api

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

option 詳解

4.fetch

1. fetch 是基于 promise 實現的，也可以結合 async/await

2. fetch 請求默認是不帶 cookie 的，需要設置 fetch(URL，{credentials:’include’})。

3. Credentials 有三種參數：same-origin，include，*

4. 服務器返回 400 500 狀態碼時并不會 reject，只有網絡出錯導致請求不能完成時，fetch才會被 reject

5. 所有版本的 IE 均不支持原生 Fetch

6. fetch 是 widow 的一個方法

fetch(url).then(function(response) { return response.json();}).then(function(data) { console.log(data);}).catch(function(e) { console.log("Oops, error");});

可配合 es6 的箭頭函數進行使用

fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))

5.axios

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中

特點：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 PromiseAPI
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF

常用 api：

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]]

實例：

get 請求

// 為給定 ID 的 user 創建請求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// 可選地，上面的請求可以這樣做axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

post 請求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

并發請求

function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 兩個請求現在都執行完成 }));

攔截器

// 添加請求攔截器axios.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); });// 添加響應攔截器axios.interceptors.response.use(function (response) { // 對響應數據做點什么 return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); });

取消請求

var CancelToken = axios.CancelToken;var source = CancelToken.source();axios.get('/user/12345', { cancelToken: source.token}).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 }});// 取消請求(message 參數是可選的)source.cancel('Operation canceled by the user.');

當然，無論選擇哪一種方式都需要自身結合業務的需要和自我的認知，沒有哪個絕對的優秀，也沒有哪個絕對不優秀。

總結

以上是生活随笔為你收集整理的ajax请求后台报没有body_前端常见面试 - 请求篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。