本文轉載自公眾號“讀芯術”(ID：AI_Discovery)

使用JavaScript時，總會有各種需要發出調用請求的情況，進行ajax調用什么技術更適合呢?

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

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

以下代碼展示了使用不同替代方法的基本HTTP GET和POST示例?，F在開始吧~

[[323124]]

XMLHttpRequest

XMLHttpRequest對象可用于從Web服務器請求數據。它是這次比較中最早的方法，盡管其他選擇都優于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

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

發送：

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

優點：

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

缺點：

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

Qwest

Qwest是一個基于Promise的簡單ajax庫，它支持XmlHttpRequest2的獨立數據，例如ArrayBuffer，Blob和FormData。

得到：

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

發送：

qwest.post('http://dataserver/update',{ 
        firstname: 'Murdock',       
        age: 30 
     }) 
     .then(function(xhr, response) { 
        // Make some useful actions 
     }) 
     .catch(function(e, xhr, response) { 
        // Process the error 
     }); 

優點：

• 可以建立請求限制
• 基于Promise

缺點：

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

JQuery.ajax

該庫在不久前被廣泛用于發出HTTP異步請求。jQuery的所有Ajax方法都返回XMLHTTPRequest對象的超集

得到：

$.ajax({ 
    url: 'http://dataserver/data.json' 
  }).done(function(data) { 
    // ...do some stuff whith data 
  }).fail(function() { 
    // Handle error 
}); 

發送：

$.ajax({ 
  type: "POST", 
  url: 'http://dataserver/update', 
  data: data, 
  success: successCallBack, 
  error: errorCallBack, 
  dataType: dataType 
}); 

優點：

• 良好的支持和文檔
• 可配置的對象
• 在許多項目中使用
• 學習曲線低
• 它返回XMLHttpRequest對象，因此可以中止請求

缺點：

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

Axios

 

[[323125]]

 

 

圖源：unsplash

 

基于Promise的HTTP庫，用于在瀏覽器和Nodejs上執行HTTP請求。

得到：

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

發送：

axios.post('http://dataserver/update',{ 
    name: 'Murdock' 
  }) 
  .then(function (response) { 
    console.log(response); 
  }) 
  .catch(function (error) { 
    console.log(error); 
  }); 

優點：

• 使用promise避免回調地獄
• 在瀏覽器和Nodejs上均可使用
• 支持上傳進度
• 可以設置響應超時
• 通過簡單地向其傳遞配置對象即可配置請求
• Axios已實現可撤銷的promise提議
• 自動將數據轉換為JSON

缺點：

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

SuperAgent

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

得到：

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

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

request 
   .get('/dataserver/search') 
   .query({ name: 'Templeton' }) 
   .query({ lastname: 'Peck' }) 
   .query({ order: 'desc' }) 
   .then(res => {console.dir(res)} 
}); 

發送：

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

優點：

• 基于Promise
• 在Node.js和瀏覽器中均可使用
• 可以調用request.abort()方法中止請求
• 社區的知名庫
• 發出HTTP請求的無縫接口
• 出現故障時支持重試請求

缺點：

• 它不支持以XMLHttpRequest的形式監視加載進度
• 非原生
• 必須從外部源加載

 

[[323126]]

 

 

圖源：unsplash

 

Http-client

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

得到：

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

發送：

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

優點：

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

缺點：

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

Fetch

Fetch是原生瀏覽器API，用于發出替代XMLHttpRequest的請求。與XMLHttpRequest相比，Fetch使網絡請求更容易。Fetch API使用Promises避免XMLHttpRequest回調地獄。

得到：

//WithES6 fetch 
fetch('http://dataserver/data.json') 
  .then(data => { 
    // ...do some stuff whith data 
  }).catch(error => { 
    // Handle error 
}); 

發送：

fetch('http://dataserver/update',{ 
  method: 'post', 
  headers: { 
    'Accept': 'application/json,text/plain, */*', 
    'Content-Type': 'application/json' 
  }, 
  body: JSON.stringify({name: 'Murdock'}) 
}).then(res=>res.json()) 
  .then(res => console.log(res));//ORwith ES2017 for example(async () => { 
  
  const response = awaitfetch('http://dataserver/update', { 
    method: 'POST', 
    headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
    }, 
    body:JSON.stringify({name='Murdock'}) 
  });const result = awaitresponse.json();console.log(result); 
})(); 

優點：

• 是原生瀏覽器API
• Fetch基本上是經過完善的XMLHttpRequest
• 友好且易于學習
• 與大多數最近使用的瀏覽器兼容
• 是原生XMLHttpRequest對象的自然替代
• 學習曲線低
• 不需要從外部源加載它
• 使用promises避免回調地獄
• 不需要更多依賴項

缺點：

• 處理JSON數據的過程分為兩步。第一個是發出請求，然后第二個是在響應時調用.json()方法。對于Axios，默認情況下會收到JSON響應。
• 從Fetch()返回的Promise僅在網絡故障或任何阻止請求完成的情況發生時拒絕。即使響應為HTTP 404或500，也不會拒絕HTTP錯誤狀態。
• 缺乏其他庫的一些有用功能，例如：取消請求。
• 默認情況下，Fetch不會從服務器發送或接收Cookie，如果站點依賴于維持用戶會話，則會導致未經身份驗證的請求。但是可以通過添加以下內容來啟用：

{credentials: “same-origin.”} 

 

[[323127]]

 

 

圖源：unsplash

 

Fetch是一個新標準，新版本的Chrome和Firefox無需使用任何其他庫就可支持它。

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

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