自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Battle！用JavaScript發(fā)出HTTP請(qǐng)求的不同方法

作者：讀芯術(shù)
開發(fā) 前端
使用JavaScript時(shí)，總會(huì)有各種需要發(fā)出調(diào)用請(qǐng)求的情況，進(jìn)行ajax調(diào)用什么技術(shù)更適合呢?

本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)

使用JavaScript時(shí)，總會(huì)有各種需要發(fā)出調(diào)用請(qǐng)求的情況，進(jìn)行ajax調(diào)用什么技術(shù)更適合呢?

最初，盡管有一些方法可以在不刷新頁面的情況下從服務(wù)器提取數(shù)據(jù)，但它們通常依賴于笨拙的技術(shù)。直到微軟為Outlook電子郵件客戶端的替代瀏覽器開發(fā)了XMLHttpRequest。它在2006年成為了Web標(biāo)準(zhǔn)。

2015年，F(xiàn)etch API隨ES6引入。通用的Request和Response接口提供了一致性，而Promises允許更容易的鏈接和沒有回調(diào)的異步/等待。Fetch簡潔，優(yōu)雅且易于理解，但是還有其他不錯(cuò)的選擇，本文將簡要的含義、語法以及利弊。

以下代碼展示了使用不同替代方法的基本HTTP GET和POST示例。現(xiàn)在開始吧~

[[323124]]

XMLHttpRequest

XMLHttpRequest對(duì)象可用于從Web服務(wù)器請(qǐng)求數(shù)據(jù)。它是這次比較中最早的方法，盡管其他選擇都優(yōu)于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

  1. var req= new XMLHttpRequest();//The onreadystatechange property 
  2. //specifies a function to be 
  3. //executed every time the status 
  4. //of the XMLHttpRequest changes 
  5. req.onreadystatechange = function() { 
  6.     if (this.readyState == 4 &&this.status == 200) { 
  7.        //The responseText property 
  8.        //returns a text string           
  9.        console.log(xhttp.responseText) 
  10.        //Do some stuff 
  11.     } 
  12. };req.open("GET", "http://dataserver/users", true); 
  13. req.send(); 

發(fā)送：

  1. varformData = new FormData(); 
  2. formData.append("name", "Murdock"); 
  3. var req = new XMLHttpRequest(); 
  4. req.open("POST", "http://dataserver/update"); 
  5. req.send(formData); 

優(yōu)點(diǎn)：

  • 不需要從外部源加載
  • 向后兼容性
  • 成熟/穩(wěn)定
  • 在所有瀏覽器中均可使用
  • 是原生瀏覽器API

缺點(diǎn)：

  • 支持回調(diào)地獄
  • 笨拙冗長的語法
  • Fetch能自然地替代它

Qwest

Qwest是一個(gè)基于Promise的簡單ajax庫，它支持XmlHttpRequest2的獨(dú)立數(shù)據(jù)，例如ArrayBuffer，Blob和FormData。

得到：

  1. qwest.get('http://dataserver/data.json') 
  2.      .then(function(xhr, response) { 
  3.         // ...do some stuff whith data 
  4.      }); 

發(fā)送：

  1. qwest.post('http://dataserver/update',{ 
  2.         firstname: 'Murdock',       
  3.         age: 30 
  4.      }) 
  5.      .then(function(xhr, response) { 
  6.         // Make some useful actions 
  7.      }) 
  8.      .catch(function(e, xhr, response) { 
  9.         // Process the error 
  10.      }); 

優(yōu)點(diǎn)：

  • 可以建立請(qǐng)求限制
  • 基于Promise

缺點(diǎn)：

  • 并非所有瀏覽器上都可使用XmlHttpRequest2
  • 非原生
  • 必須從外部源加載

JQuery.ajax

該庫在不久前被廣泛用于發(fā)出HTTP異步請(qǐng)求。jQuery的所有Ajax方法都返回XMLHTTPRequest對(duì)象的超集

得到：

  1. $.ajax({ 
  2.     url: 'http://dataserver/data.json' 
  3.   }).done(function(data) { 
  4.     // ...do some stuff whith data 
  5.   }).fail(function() { 
  6.     // Handle error 
  7. }); 

發(fā)送：

  1. $.ajax({ 
  2.   type: "POST", 
  3.   url: 'http://dataserver/update', 
  4.   data: data, 
  5.   success: successCallBack, 
  6.   error: errorCallBack, 
  7.   dataType: dataType 
  8. }); 

優(yōu)點(diǎn)：

  • 良好的支持和文檔
  • 可配置的對(duì)象
  • 在許多項(xiàng)目中使用
  • 學(xué)習(xí)曲線低
  • 它返回XMLHttpRequest對(duì)象，因此可以中止請(qǐng)求

缺點(diǎn)：

  • 非原生
  • 必須從外部源加載
  • 沒有與Promises結(jié)合
  • 對(duì)于原生ES6 Fetch不是必需的。

Axios

 

[[323125]]

 

 

圖源：unsplash

 

基于Promise的HTTP庫，用于在瀏覽器和Nodejs上執(zhí)行HTTP請(qǐng)求。

得到：

  1. axios({ 
  2.   url: 'http://dataserver/data.json', 
  3.   method: 'get' 
  4. }) 

發(fā)送：

  1. axios.post('http://dataserver/update',{ 
  2.     name: 'Murdock' 
  3.   }) 
  4.   .then(function (response) { 
  5.     console.log(response); 
  6.   }) 
  7.   .catch(function (error) { 
  8.     console.log(error); 
  9.   }); 

優(yōu)點(diǎn)：

  • 使用promise避免回調(diào)地獄
  • 在瀏覽器和Nodejs上均可使用
  • 支持上傳進(jìn)度
  • 可以設(shè)置響應(yīng)超時(shí)
  • 通過簡單地向其傳遞配置對(duì)象即可配置請(qǐng)求
  • Axios已實(shí)現(xiàn)可撤銷的promise提議
  • 自動(dòng)將數(shù)據(jù)轉(zhuǎn)換為JSON

缺點(diǎn)：

  • 非原生
  • 必須從外部源加載

SuperAgent

SuperAgent是ajax API，旨在提供靈活性，可讀性和較低的學(xué)習(xí)曲線。它也可以與Node.js一起使用。

得到：

  1. request('GET','http://dataserver/data.json').then( 
  2. success, failure); 

.query()方法接受對(duì)象，這些對(duì)象與GET方法一起使用時(shí)將形成查詢字符串。以下代碼將產(chǎn)生路徑/ dataserver / search?name = Manny&lastName = Peck&order = desc。

  1. request 
  2.    .get('/dataserver/search') 
  3.    .query({ name: 'Templeton' }) 
  4.    .query({ lastname: 'Peck' }) 
  5.    .query({ order: 'desc' }) 
  6.    .then(res => {console.dir(res)} 
  7. }); 

發(fā)送：

  1. request 
  2.    .post('http://dataserver/update') 
  3.    .send({ name: 'Murdock' }) 
  4.    .set('Accept', 'application/json') 
  5.    .then(res => { 
  6.       console.log('result' +JSON.stringify(res.body)); 
  7.    }); 

優(yōu)點(diǎn)：

  • 基于Promise
  • 在Node.js和瀏覽器中均可使用
  • 可以調(diào)用request.abort()方法中止請(qǐng)求
  • 社區(qū)的知名庫
  • 發(fā)出HTTP請(qǐng)求的無縫接口
  • 出現(xiàn)故障時(shí)支持重試請(qǐng)求

缺點(diǎn)：

  • 它不支持以XMLHttpRequest的形式監(jiān)視加載進(jìn)度
  • 非原生
  • 必須從外部源加載

 

[[323126]]

 

 

圖源：unsplash

 

Http-client

Http-client允許使用JavaScript的訪存API組成HTTP客戶端。

得到：

  1. //usingES6 modules 
  2. import { createFetch, base, accept, parse } from 'http-client'const fetch =createFetch( 
  3.  base('http://dataserver/data.json'),  
  4.   accept('application/json'),     
  5.   parse('json')                      
  6. )fetch('http://dataserver/data.json').then(response => { 
  7.   console.log(response.jsonData) 
  8. }) 

發(fā)送：

  1. //usingES6 modules 
  2. import { createFetch, method, params } from 'http-client'const fetch =createFetch( 
  3.   params({ name: 'Murdock' }), 
  4.   base('http://dataserver/update') 
  5. ) 

優(yōu)點(diǎn)：

  • 在Node.js和瀏覽器中均可使用
  • 由服務(wù)器端工作人員使用
  • 基于Promise
  • 提供頭部保護(hù)裝置，以提高CORS的安全性

缺點(diǎn)：

  • 必須從外部源加載
  • 非原生

Fetch

Fetch是原生瀏覽器API，用于發(fā)出替代XMLHttpRequest的請(qǐng)求。與XMLHttpRequest相比，F(xiàn)etch使網(wǎng)絡(luò)請(qǐng)求更容易。Fetch API使用Promises避免XMLHttpRequest回調(diào)地獄。

得到：

  1. //WithES6 fetch 
  2. fetch('http://dataserver/data.json') 
  3.   .then(data => { 
  4.     // ...do some stuff whith data 
  5.   }).catch(error => { 
  6.     // Handle error 
  7. }); 

發(fā)送：

  1. fetch('http://dataserver/update',{ 
  2.   method: 'post', 
  3.   headers: { 
  4.     'Accept': 'application/json,text/plain, */*', 
  5.     'Content-Type': 'application/json' 
  6.   }, 
  7.   body: JSON.stringify({name: 'Murdock'}) 
  8. }).then(res=>res.json()) 
  9.   .then(res => console.log(res));//ORwith ES2017 for example(async () => { 
  10.   
  11.   const response = awaitfetch('http://dataserver/update', { 
  12.     method: 'POST', 
  13.     headers: { 
  14.       'Accept': 'application/json', 
  15.       'Content-Type': 'application/json' 
  16.     }, 
  17.     body:JSON.stringify({name='Murdock'}) 
  18.   });const result = awaitresponse.json();console.log(result); 
  19. })(); 

優(yōu)點(diǎn)：

  • 是原生瀏覽器API
  • Fetch基本上是經(jīng)過完善的XMLHttpRequest
  • 友好且易于學(xué)習(xí)
  • 與大多數(shù)最近使用的瀏覽器兼容
  • 是原生XMLHttpRequest對(duì)象的自然替代
  • 學(xué)習(xí)曲線低
  • 不需要從外部源加載它
  • 使用promises避免回調(diào)地獄
  • 不需要更多依賴項(xiàng)

缺點(diǎn)：

  • 處理JSON數(shù)據(jù)的過程分為兩步。第一個(gè)是發(fā)出請(qǐng)求，然后第二個(gè)是在響應(yīng)時(shí)調(diào)用.json()方法。對(duì)于Axios，默認(rèn)情況下會(huì)收到JSON響應(yīng)。
  • 從Fetch()返回的Promise僅在網(wǎng)絡(luò)故障或任何阻止請(qǐng)求完成的情況發(fā)生時(shí)拒絕。即使響應(yīng)為HTTP 404或500，也不會(huì)拒絕HTTP錯(cuò)誤狀態(tài)。
  • 缺乏其他庫的一些有用功能，例如：取消請(qǐng)求。
  • 默認(rèn)情況下，F(xiàn)etch不會(huì)從服務(wù)器發(fā)送或接收Cookie，如果站點(diǎn)依賴于維持用戶會(huì)話，則會(huì)導(dǎo)致未經(jīng)身份驗(yàn)證的請(qǐng)求。但是可以通過添加以下內(nèi)容來啟用：
    1. {credentials: “same-origin.”} 

 

[[323127]]

 

 

圖源：unsplash

 

Fetch是一個(gè)新標(biāo)準(zhǔn)，新版本的Chrome和Firefox無需使用任何其他庫就可支持它。

此外，Axios，SuperAgent或其他庫都有適合的文檔，易于使用，并且學(xué)習(xí)曲線不太高。在某些情況下，它們可以提供Fetch不具有的功能。

Fetch在JavaScript里是原生的，足以滿足項(xiàng)目需求。如果沒有特殊需求，我認(rèn)為Fetch就是最合適的選擇。

 

責(zé)任編輯：趙寧寧 來源： 讀芯術(shù)
JavaScriptHTTP請(qǐng)求開發(fā)
相關(guān)推薦

2010-09-02 10:15:46

SQL刪除

2024-03-18 10:15:00

HTTPNode.jsAPI

2010-02-23 14:24:50

WCF狀態(tài)保存

2020-04-20 14:30:54

UbuntuLinux內(nèi)核

2020-04-24 16:09:57

UbuntuLinux內(nèi)核

2023-01-03 07:49:45

Java隨機(jī)數(shù)線程

2021-12-25 23:17:52

Windows 11Windows微軟

2012-06-08 03:36:30

C#Java

2020-06-29 07:23:54

for循環(huán)數(shù)組JavaScrip

2019-09-26 08:07:06

RHEL8命令Linux

2012-12-13 10:32:34

路由器線路輸出

2009-08-20 17:30:02

C#連接字符串

2010-07-16 13:41:08

SQL Serverl

2019-04-09 08:20:54

Windows 7Windows 10

2009-07-06 18:23:32

JSP文件下載

2023-06-28 11:36:41

2019-12-09 10:30:42

Windows 10帳戶Windows

2010-02-04 15:41:10

C++內(nèi)存管理

2010-02-26 13:34:50

WCF編碼機(jī)制

2024-10-16 08:51:57

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)