JavaScript中怎么發出HTTP請求

這篇文章給大家介紹JavaScript中怎么發出HTTP請求，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

基于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的形式監視加載進度

• 非原生

• 必須從外部源加載

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.”}

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

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

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

關于JavaScript中怎么發出HTTP請求就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。