我需要在JavaScript中做一个HTTP GET请求。最好的方法是什么?
我需要在Mac OS X的dashcode小部件中做到这一点。
我需要在JavaScript中做一个HTTP GET请求。最好的方法是什么?
我需要在Mac OS X的dashcode小部件中做到这一点。
当前回答
为了刷新来自joann的最佳答案,这是我的代码:
let httpRequestAsync = (method, url) => {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status == 200) {
resolve(xhr.responseText);
}
else {
reject(new Error(xhr.responseText));
}
};
xhr.send();
});
}
其他回答
集功能,食谱容易和简单
我准备了一组函数,它们在某种程度上是相似的,但如果你知道如何利用它,就会展示新的功能以及Javascript已经达到的简单性。
让一些基本常数
let data;
const URLAPI = "https://gorest.co.in/public/v1/users";
function setData(dt) {
data = dt;
}
最简单的
// MOST SIMPLE ONE
function makeRequest1() {
fetch(URLAPI)
.then(response => response.json()).then( json => setData(json))
.catch(error => console.error(error))
.finally(() => {
console.log("Data received 1 --> ", data);
data = null;
});
}
使用承诺和异步工具的变化
// ASYNC FUNCTIONS
function makeRequest2() {
fetch(URLAPI)
.then(async response => await response.json()).then(async json => await setData(json))
.catch(error => console.error(error))
.finally(() => {
console.log("Data received 2 --> ", data);
data = null;
});
}
function makeRequest3() {
fetch(URLAPI)
.then(async response => await response.json()).then(json => setData(json))
.catch(error => console.error(error))
.finally(() => {
console.log("Data received 3 --> ", data);
data = null;
});
}
// Better Promise usages
function makeRequest4() {
const response = Promise.resolve(fetch(URLAPI).then(response => response.json())).then(json => setData(json) ).finally(()=> {
console.log("Data received 4 --> ", data);
})
}
一个线性函数的演示!!
// ONE LINER STRIKE ASYNC WRAPPER FUNCTION
async function makeRequest5() {
console.log("Data received 5 -->", await Promise.resolve(fetch(URLAPI).then(response => response.json().then(json => json ))) );
}
值得一提的是——> @Daniel De León可能是最干净的函数*
(async () =>
console.log(
(await (await fetch( URLAPI )).json())
)
)();
上面的答案-> By @tggagne显示了HttpClient API的功能。
使用Fetch也可以实现同样的效果。根据此使用MDN获取展示了如何将INIT作为第二个参数传递,基本上打开了使用经典方法(get, post…)轻松配置API的可能性。
// Example POST method implementation:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
postData('https://example.com/answer', { answer: 42 })
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});
Node
在节点(服务器端)上无法获取
最简单的解决方案(2021年底)是使用Axios。
$ npm install axios
然后运行:
const axios = require('axios');
const request = async (url) => await (await axios.get( url ));
let response = request(URL).then(resp => console.log(resp.data));
我不熟悉Mac OS的Dashcode小部件,但如果他们让你使用JavaScript库和支持xmlhttprequest,我会使用jQuery,做这样的事情:
var page_content;
$.get( "somepage.php", function(data){
page_content = data;
});
对于那些使用AngularJs的人来说,它是$http.get:
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
原型让它变得非常简单
new Ajax.Request( '/myurl', {
method: 'get',
parameters: { 'param1': 'value1'},
onSuccess: function(response){
alert(response.responseText);
},
onFailure: function(){
alert('ERROR');
}
});
function get(path) {
var form = document.createElement("form");
form.setAttribute("method", "get");
form.setAttribute("action", path);
document.body.appendChild(form);
form.submit();
}
get('/my/url/')
同样的事情也可以为post request做。 看看这个链接JavaScript post请求像一个表单提交