This sample shows how to retrieve data from a remote server using esriRequest with some basic options and displays the results in a Calcite Design System Text Area component.
First, define the options for your request. In this example, a URLSearch object is created to pass the f=json value into the options.
This can also be a plain object with the necessary query parameters.
// Create URLSearchParams and pass it into the esriRequest options query parameter.
// This can be a plain object or URLSearchParams object.
const urlSearchParams = new URLSearchParams({
f: "json"
});
// Create a ReqeuestOptions object with the URLSearchParams as the query parameter.
// Other parameters can be specified if needed.
const options = {
query: urlSearchParams
};
The response object will include the properties outlined in the RequestResponse type definition. The response can be handled by accessing the attributes and values, as shown below. If the request returns an Error, the error object will include the details specified in EsriErrorDetails.
// Use try/catch for error handling.
try {
// Use async/await to wait for the response to return
// from the service.
const response = await esriRequest(url, options);
// When the response returns from the service, stringify the response to display
// the information in the Text Area component.
const responseJSON = JSON.stringify(response, null, 2);
textArea.value = `HTTP Status Code: ${response.httpStatus}\nResponse:\n${responseJSON}`;
} catch (error) {
// If an error is returned in the response, display the error alongside the http status code.
textArea.value = `${error.details.httpStatus} error: "${error.message}."`;
}