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请求就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站名称:JavaScript中怎么发出HTTP请求
本文链接:http://scyanting.com/article/ggedsj.html