我正在使用游戲 API 創建一個主要是客戶端的 web 應用程式來顯示統計資料和庫存。這個應用程式需要一個接一個地執行一些獲取請求，我正在嘗試考慮一個簡單的函式，它可以處理幾個不同的請求，并且總是只回傳回應，同時等待上一個請求完成。
我當前的函式不等待請求完成，所以 $temp 仍然未定義。
function BClick(){
rqURL = 'https://endpoint';
temp = getRequest(rqURL);
console.log(temp);
}
function getRequest(URL) {
akey = '000';
var xr = new XMLHttpRequest();
xr.open("GET", URL);
xr.setRequestHeader("X-API-Key",akey);
xr.onreadystatechange = () => {
if (xr.readyState === 4) {
xh = JSON.parse(xr.responseText);
return xh;
}
};
xr.send();
}
我怎樣才能使所有這些異步并等待回應完成？我試過研究 'async function(){}' 但這需要我將 get-request 放在第一個函式中。這將消除可重用性，因為我需要以不同的方式處理回應。
目前我正在考慮一個在特定變數獲取資料時執行的函式，因此它只會注意每個回應變數。肯定有一種“更好”的方式，我不知道。
uj5u.com熱心網友回復：
您可以使用簡單的回呼或承諾。
帶著承諾
function getRequest(URL, akey) {
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('GET', URL);
request.setRequestHeader('X-Api-Key', akey);
request.onload = () => {
if (request.status === 200) {
resolve(request.response);
} else {
reject(Error(request.statusText));
}
};
request.onerror = () => {
reject(Error('Network Error'));
};
request.send();
});
}
// Use with 'then' chain
getRequest('url', '000').then(function(responseData) {
// parse data here if necessary
console.log(responseData);
}).catch(function(error) {
// handle error
console.log(error);
});
但是，瀏覽器獲取 API已經獲得了此功能，因此您可以改用它。
帶回呼
function getRequest(URL, akey, successCallback, failCallback) {
const request = new XMLHttpRequest();
request.open('GET', URL);
request.setRequestHeader('X-Api-Key', akey);
request.onload = () => {
if (request.status === 200) {
successCallback(request.response);
} else {
failCallback(Error(request.statusText));
}
};
request.onerror = () => {
failCallback(Error('Network Error'));
};
request.send();
}
// usage
getRequest(
'url',
'000',
function (responseData) {
// use data
console.log(responseData);
},
function (error) {
// handle error
console.log(error);
},
);
這些特定于您的情況，但您可以傳遞更多引數并根據需要改進它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363905.html
標籤：javascript 功能 得到
下一篇：C中的全域二維陣列