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