Request data from a remote server

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 URLSearchParams object is created to pass the f=json value into the options. This can also be a plain object with the necessary query parameters.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
        // 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 dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
          // 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}."`;
          }

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.