JavaScript具有很好的模塊和方法來發(fā)送可用于從服務(wù)器端資源發(fā)送或接收數(shù)據(jù)的HTTP請(qǐng)求。在本文中，我們將介紹一些在JavaScript中發(fā)出HTTP請(qǐng)求的流行方法。

Ajax
Ajax是發(fā)出異步HTTP請(qǐng)求的傳統(tǒng)方式。可以使用HTTP POST方法發(fā)送數(shù)據(jù)，并使用HTTP GET方法接收數(shù)據(jù)。我們來看看發(fā)送GET請(qǐng)求。我將使用JSONPlaceholder，這是一個(gè)免費(fèi)的在線REST API，適用于以JSON格式返回隨機(jī)數(shù)據(jù)的開發(fā)人員。
要在Ajax中進(jìn)行HTTP調(diào)用，您需要初始化一個(gè)新XMLHttpRequest()方法，指定URL端點(diǎn)和HTTP方法（在本例中為GET）。最后，我們使用該open()方法將HTTP方法和URL端點(diǎn)綁定在一起，并調(diào)用該send()方法來觸發(fā)請(qǐng)求。
我們使用XMLHTTPRequest.onreadystatechange包含要在readystatechanged事件觸發(fā)時(shí)調(diào)用的事件處理程序的屬性將HTTP響應(yīng)記錄到控制臺(tái)。

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send();Http.onreadystatechange=(e)=>{console.log(Http.responseText) }

如果您查看瀏覽器控制臺(tái)，它將返回JSON格式的數(shù)據(jù)數(shù)組。但是我們?cè)趺粗勒?qǐng)求是否完成了?換句話說，我們?nèi)绾问褂肁jax處理響應(yīng)?

該onreadystatechange有兩個(gè)方法，readyState和status允許我們可以檢查請(qǐng)求的狀態(tài)。

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send();Http.onreadystatechange=function() {if (this.readyState==4 && this.status==200) {console.log(Http.responseText)} }

如果readyState等于4，則表示請(qǐng)求已完成。

除了使用JavaScript直接進(jìn)行Ajax調(diào)用之外，還有其他更強(qiáng)大的HTTP調(diào)用方法，例如$.AjaxJQuery方法。

?

JQuery方法

jQuery有很多方法可以輕松處理HTTP請(qǐng)求。要使用這些方法，您需要在項(xiàng)目中包含jQuery庫。

?

$.ajax

jQuery Ajax是進(jìn)行HTTP調(diào)用的最簡(jiǎn)單方法之一。

$(document).ready(function() {const Url='https://jsonplaceholder.typicode.com/posts';$('.btn').click(function) {$.ajax({url: Url,type: "GET",success: function(result) {console.log(result)},error:function(error) {console.log(`Error ${error}`)}})}) })

$.ajax方法需要許多參數(shù)，其中一些是必需的另一些是可選的。它包含兩個(gè)回調(diào)選項(xiàng)success并error處理收到的響應(yīng)。

.get方法

.get方法用于執(zhí)行GET請(qǐng)求。它需要兩個(gè)參數(shù):請(qǐng)求地址和回調(diào)函數(shù)。

const Url='https://jsonplaceholder.typicode.com/posts';$('.btn').click(function(){$.get(Url, function(data, status) {console.log(`${data}`)}); })

.post 該.post方法是將數(shù)據(jù)發(fā)布到服務(wù)器的另一種方法。它需要三個(gè)參數(shù):請(qǐng)求的url地址您要發(fā)送的數(shù)據(jù)和回調(diào)函數(shù)。

const Url='https://jsonplaceholder.typicode.com/posts/'; const data = {name: "Said",id: 23 }$('.btn').click(function(){$.post(Url,data,function(data, status) {console.log(`${data} and status is ${status}`)}); })

.getJSON 該.getJSON方法僅檢索JSON格式的數(shù)據(jù)。它需要兩個(gè)參數(shù):url和回調(diào)函數(shù)。

const Url='https://jsonplaceholder.typicode.com/posts';$('.btn').click(function(){$.getJSON(Url, function(result) {console.log(result)}); })

jQuery具有所有這些方法來請(qǐng)求或?qū)?shù)據(jù)發(fā)布到遠(yuǎn)程服務(wù)器。但實(shí)際上你可以將所有這些方法合二為一:$.ajax方法，如下例所示:

const Url='https://jsonplaceholder.typicode.com/posts'; $('.btn').click(function() {const data={name:"Said", id:23};$.ajax({url: Url,type: "GET", //or POST// data:data, //if the type is POST// dataType: JSON or HTML, XML, TXT, jsonpsuccess: function(result) {console.log(result)},error: function(error) {console.log(`Error ${error}`)} }) })

Fetch

fetch是一個(gè)新的功能強(qiáng)大的Web API，可以讓您發(fā)出異步請(qǐng)求。事實(shí)上，這fetch是制作HTTP請(qǐng)求的最佳和最喜歡的方式之一。它返回一個(gè)"Promise",這是ES6的一大特色。如果你不熟悉ES6，你可以閱讀以下ES6的文章。Promise允許我們以更智能的方式處理異步請(qǐng)求。我們來看看fetch技術(shù)如何運(yùn)作。

const Url='https://jsonplaceholder.typicode.com/post';fetch(Url) .then(data=>{return data.json()}) .then(res=>{console.log(res)})

該fetch函數(shù)需要一個(gè)必需參數(shù):endpointURL。它還有其他可選參數(shù)，如下例所示:

const Url='https://jsonplaceholder.typicode.com/posts'; const Data={name: "Said",id: 23 }; // optional parameters const otherPram={headers: {"content-type": "application/json; charset=UTF-8"},body: Data,method: "POST" };fetch(Url, othePram) .then(data=>{return data.json()}) .then(res=>{console.log(res)}) .catch(error=>console.log(error))

如您所見，fetch制作HTTP請(qǐng)求有許多優(yōu)點(diǎn)。此外，在fetch中還有其他模塊和插件，允許我們向服務(wù)器端發(fā)送和從服務(wù)器端接收請(qǐng)求，例如Axios.

Axios

Axios是一個(gè)用于發(fā)出HTTP請(qǐng)求的開源庫，并提供許多強(qiáng)大的功能。我們來看看它是如何工作的。

用法:

首先，您需要包含Axios。有兩種方法可以在項(xiàng)目中包含Axios。

首先，你可以使用npm:

npm install axios --save

然后你需要導(dǎo)入它

import axios from 'axios'

使用axios發(fā)出請(qǐng)求:

使用Axios,您可以使用GET和POST從 服務(wù)器檢索和發(fā)布數(shù)據(jù)。

const Url='https://jsonplaceholder.typicode.com/posts'; const user={name: "Said",id: 21 } axios({method: 'post',url: Url,data: {user} }) .then(data=>console.log(data)) .catch(err=>console.log(err))

axios采用一個(gè)必需參數(shù)，也可以采用第二個(gè)可選參數(shù)。這將一些數(shù)據(jù)作為簡(jiǎn)單查詢。

POST:

function getUer() {const userUrl='https://jsonplaceholder.typicode.com/users';return axios.get(userUrl) } function getPost() {const postUrl='https://jsonplaceholder.typicode.com/posts';return axios.get(postUrl) } axios.all([getUser(), getPost()]) .then((users, posts)=>{console.log(users)console.log(posts) }) .catch(err=>console.log(err))

Axios返回"Promise".如果您熟悉promises，您可能直到promise可以執(zhí)行多個(gè)請(qǐng)求。您可以使用axios執(zhí)行相同的操作并同時(shí)運(yùn)行多個(gè)請(qǐng)求。

Axios支持許多其他方法和選項(xiàng)。你可以官網(wǎng)了解他們

總結(jié)

以上是生活随笔為你收集整理的Javasc中发出HTTP请求最常用的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。