Battle！用JavaScript发出HTTP请求的不同方法

本文转载自公众号“读芯术”(ID：AI_Discovery)

使用JavaScript时，总会有各种需要发出调用请求的情况，进行ajax调用什么技术更适合呢?

最初，尽管有一些方法可以在不刷新页面的情况下从服务器提取数据，但它们通常依赖于笨拙的技术。直到微软为Outlook电子邮件客户端的替代浏览器开发了XMLHttpRequest。它在2006年成为了Web标准。

2015年，Fetch API随ES6引入。通用的Request和Response接口提供了一致性，而Promises允许更容易的链接和没有回调的异步/等待。Fetch简洁，优雅且易于理解，但是还有其他不错的选择，本文将简要的含义、语法以及利弊。

以下代码展示了使用不同替代方法的基本HTTP GET和POST示例。现在开始吧~

XMLHttpRequest

XMLHttpRequest对象可用于从Web服务器请求数据。它是这次比较中最早的方法，尽管其他选择都优于它，但由于其向后兼容性和成熟度，它仍然有效且有用。

得到：

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

发送：

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

优点：

  • 不需要从外部源加载
  • 向后兼容性
  • 成熟/稳定
  • 在所有浏览器中均可使用
  • 是原生浏览器API

缺点：

  • 支持回调地狱
  • 笨拙冗长的语法
  • Fetch能自然地替代它

Qwest

Qwest是一个基于Promise的简单ajax库，它支持XmlHttpRequest2的独立数据，例如ArrayBuffer，Blob和FormData。

得到：

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

发送：

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

优点：

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

缺点：

  • 并非所有浏览器上都可使用XmlHttpRequest2
  • 非原生
  • 必须从外部源加载

JQuery.ajax

该库在不久前被广泛用于发出HTTP异步请求。jQuery的所有Ajax方法都返回XMLHTTPRequest对象的超集

得到：

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

发送：

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

优点：

  • 良好的支持和文档
  • 可配置的对象
  • 在许多项目中使用
  • 学习曲线低
  • 它返回XMLHttpRequest对象，因此可以中止请求

缺点：

  • 非原生
  • 必须从外部源加载
  • 没有与Promises结合
  • 对于原生ES6 Fetch不是必需的。

Axios

[[323125]]

图源：unsplash

基于Promise的HTTP库，用于在浏览器和Nodejs上执行HTTP请求。

得到：

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

发送：

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

优点：

  • 使用promise避免回调地狱
  • 在浏览器和Nodejs上均可使用
  • 支持上传进度
  • 可以设置响应超时
  • 通过简单地向其传递配置对象即可配置请求
  • Axios已实现可撤销的promise提议
  • 自动将数据转换为JSON

缺点：

  • 非原生
  • 必须从外部源加载

SuperAgent

SuperAgent是ajax API，旨在提供灵活性，可读性和较低的学习曲线。它也可以与Node.js一起使用。

得到：

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

.query()方法接受对象，这些对象与GET方法一起使用时将形成查询字符串。以下代码将产生路径/ dataserver / search?name = Manny&lastName = Peck&order = desc。

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

发送：

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

优点：

  • 基于Promise
  • 在Node.js和浏览器中均可使用
  • 可以调用request.abort()方法中止请求
  • 社区的知名库
  • 发出HTTP请求的无缝接口
  • 出现故障时支持重试请求

缺点：

  • 它不支持以XMLHttpRequest的形式监视加载进度
  • 非原生
  • 必须从外部源加载

[[323126]]

图源：unsplash

Http-client

Http-client允许使用JavaScript的访存API组成HTTP客户端。

得到：

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

发送：

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

优点：

  • 在Node.js和浏览器中均可使用
  • 由服务器端工作人员使用
  • 基于Promise
  • 提供头部保护装置，以提高CORS的安全性

缺点：

  • 必须从外部源加载
  • 非原生

Fetch

Fetch是原生浏览器API，用于发出替代XMLHttpRequest的请求。与XMLHttpRequest相比，Fetch使网络请求更容易。Fetch API使用Promises避免XMLHttpRequest回调地狱。

得到：

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

发送：

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

优点：

  • 是原生浏览器API
  • Fetch基本上是经过完善的XMLHttpRequest
  • 友好且易于学习
  • 与大多数最近使用的浏览器兼容
  • 是原生XMLHttpRequest对象的自然替代
  • 学习曲线低
  • 不需要从外部源加载它
  • 使用promises避免回调地狱
  • 不需要更多依赖项

缺点：

  • 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json()方法。对于Axios，默认情况下会收到JSON响应。
  • 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。
  • 缺乏其他库的一些有用功能，例如：取消请求。
  • 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：
    •   
  
  
  
         
   
   
   
    1. {credentials: “same-origin.”} 
      2.

[[323127]]

图源：unsplash

Fetch是一个新标准，新版本的Chrome和Firefox无需使用任何其他库就可支持它。

此外，Axios，SuperAgent或其他库都有适合的文档，易于使用，并且学习曲线不太高。在某些情况下，它们可以提供Fetch不具有的功能。

Fetch在JavaScript里是原生的，足以满足项目需求。如果没有特殊需求，我认为Fetch就是最合适的选择。

网页名称：Battle！用JavaScript发出HTTP请求的不同方法
链接地址：http://www.shufengxianlan.com/qtweb/news32/420732.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制网站知识

同城分类信息

SF双层罐　　 　成都小谭网创广告　　 　成都做手机网站　　 　成都网站推广　　 　成都网站优化　　 　光华机房服务器托管　　 　雷运建站　　 　成都免费网站建设公司　　 　乐山做网站　　 　成都VI设计　　 　眉山电信机房　　 　温江服务器托管　　 　成都400电话　　 　绵阳梓潼做网站　　 　力比特机械　　 　西信服务器托管　　 　温江网站制作　　 　传美奇电器　　 　西部信息服务器托管　　 　绵阳托管服务器