当前位置: 首页 > Web前端 > HTML5

在JavaScript中发出HTTP请求的最常见方式

时间:2023-04-04 23:42:23 HTML5

JavaScript有很好的模块和方法来发出HTTP请求,可用于从服务器端资源发送或接收数据。在本文中,我们将了解一些在JavaScript中发出HTTP请求的流行方式。AjaxAjax是发出异步HTTP请求的传统方式。可以使用HTTPPOST方法发送数据,使用HTTPGET方法接收数据。让我们看一下发送GET请求。我将使用JSONPlaceholder,这是一个免费的在线RESTAPI,供开发人员返回JSON格式的随机数据。要在Ajax中进行HTTP调用,您需要初始化一个新的XMLHttpRequest()方法,指定URL端点和HTTP方法(在本例中为GET)。最后,我们使用open()方法将HTTP方法和URL端点绑定在一起,并调用send()方法来触发请求。我们使用XMLHTTPRequest.onreadystatechange属性将HTTP响应记录到控制台,该属性包含在readystatechanged事件触发时调用的事件处理程序。如果您查看浏览器控制台,它会返回一个JSON格式的数据数组。但是我们怎么知道请求是否完成了呢?换句话说,我们如何使用Ajax处理响应?onreadystatechange有两个方法,readyState和status允许我们检查请求的状态。如果readyState等于4,则表示请求已经完成。除了直接使用JavaScript进行Ajax调用外,还有其他更强大的HTTP调用方法,例如$.AjaxjQuery方法。jQuery方法jQuery有许多方法可以轻松处理HTTP请求。要使用这些方法,您需要在项目中包含jQuery库。$.ajaxjQueryAjax是进行HTTP调用的最简单方法之一。$.ajax方法有许多参数,其中一些是必需的,一些是可选的。它包含两个回调选项success和error来处理收到的响应。$.get方法$.get方法用于执行GET请求。它有两个参数:请求地址和回调函数。$.post$.post方法是另一种将数据发布到服务器的方法。它需要三个参数:请求的url地址,你要发送的数据,一个回调函数。$.getJSON$.getJSON方法仅检索JSON格式的数据。它有两个参数:url和回调函数。jQuery具有所有这些方法来请求或发布数据到远程服务器。但实际上您可以将所有这些方法合而为一:$.ajax方法,如以下示例所示:Fetchfetch是一种功能强大的新WebAPI,可让您发出异步请求。事实上,fetch是发出HTTP请求的最佳和最受欢迎的方式之一。它返回一个“Promise”,这是ES6的一个很棒的特性。如果您不熟悉ES6,可以阅读有关ES6的文章。Promise允许我们以更智能的方式处理异步请求。让我们来看看fetch技术是如何工作的。fetch函数需要一个必需的参数:endpointURL。它还具有其他可选参数,如下例所示:如您所见,fetch在进行HTTP请求时具有许多优点。此外,fetch中还有其他模块和插件可以让我们向服务器发送和接收请求,例如Axios。AxiosAxios是一个用于发出HTTP请求的开源库,提供了许多强大的功能。让我们看看它是如何工作的。用法:首先,您需要包含Axios。有两种方法可以在您的项目中包含Axios。首先,您可以使用npm:npminstallaxios--save然后您需要导入它importaxiosfrom'axios'使用axios发出请求:使用Axios,您可以使用GET和POST从服务器检索和发布数据。axios接受一个必需的参数,也可以接受第二个可选参数。这将获取一些数据作为一个简单的查询。POST:Axios返回“Promise”。如果您熟悉promises,您可能知道promises可以执行多个请求。您可以使用axios执行相同的操作并同时运行多个请求。Axios支持许多其他方法和选项。您可以在官方网站上了解它们