I went back and looked what I had done for 4.24, and it relied on Dojo promises. Esri just talks about the .then/.catch method of working with promises, but in a script I had developed I as passing the promise (deferred) among multiple functions and only after successfully completing the last one did I resolve (or reject) the promise. Then, the program waited for all function calls to finish for all records, which as accomplished using the Dojo 'All' function. Looks like this is not available anymore as 4.29 now seems devoid of all Dojo, and after looking at possibly adding it to the libraries, I thought the better of it and decided I should figure out how to do this with native Javascript promises.
This may not be the correct way, but it works. You just have to parse through all of the resulting features for each call to get (in this case) the value for 'Hispanic':
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Request data from a remote server | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<script type="module" src="https://js.arcgis.com/calcite-components/2.5.1/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.5.1/calcite.css" />
</head>
<body>
<calcite-shell>
<calcite-panel heading="Using esri/request">
<calcite-block
heading="Enter a URL:"
description='Enter a server URL to the input box below, then click the "Make Request" button to send a request.'
open
>
<calcite-input-text
id="input-url"
placeholder="https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer"
value="https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer"
required
></calcite-input-text>
<calcite-button id="request-button" style="padding-top: 5px">Make Request</calcite-button>
<calcite-label style="padding-top: 10px" scale="l"
>Server response from the request:
<calcite-text-area
id="results-text-area"
placeholder="Request response will show here.."
read-only
rows="25"
></calcite-text-area>
</calcite-label>
</calcite-block>
</calcite-panel>
</calcite-shell>
<calcite-alert id="alert" kind="danger" icon label="Danger alert" auto-close>
<div slot="title">Enter a valid URL.</div>
</calcite-alert>
<script>
require(["esri/request"], (esriRequest) => {
const requestButton = document.getElementById("request-button");
const urlInput = document.getElementById("input-url");
const textArea = document.getElementById("results-text-area");
const alert = document.getElementById("alert");
let url;
let sStates = ['Arizona', 'California', 'Nevada']
let promiseStates = [];
let sResults = '';
requestButton.addEventListener("click", () => {
//var variable = null;
for (let j = 0; j < sStates.length; j++) {
let thestate = sStates[j];
const aDef = new Promise((resolve, reject) => {
get_results(thestate, resolve, reject);
});
promiseStates.push(aDef);
}
Promise.all(promiseStates).then((values) => {
console.log("in Promise.all");
console.log(values);
textArea.value += sResults;
});
});
async function get_results(state, pRes, pRej) {
console.log(state);
let getinfo =
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?f=json&Where=STATE_NAME='";
params = state;
params += "'&outFields=NAME,HISPANIC";
getinfo = getinfo + encodeURI(params);
var options = {
query: {
f: "json",
},
responseType: "json",
};
console.log(getinfo);
console.log()
await esriRequest(getinfo, options).then((response) => {
console.log("in esriRequest");
console.log(response.data);
sResults += response.data.fields["Name"];
return pRes(response);
})
.catch(function (error) {
console.error("esriRequest Error: " + error);
textArea.value = error;
return pRej(error);
});
}
});
</script>
</body>
</html>
(oh, and it uses your original function for calling the REST service).
