Using JS API 4.14, I have a custom Accessor class serving as the view model to a UI widget. I want to query a server to get a list of service groups available, and render that list in the UI. I have a property in my class that I want to set to the return value of the request:
@property()layerGroups: string = null;
I'm trying to use the code below to make the request and set the value, but this does not work. No console error, but the value of layerGroups remains null. I assume because request is an async operation, so it doesn't have access to the return value at the right time.
> widget.viewModel.layerGroups
> null
const getLayerGroups = request("https://my.server/arcgis/rest/", {query: {f: "json"}, responseType: "json"}).then(response => this.set(this.layerGroups, response.data.folders));
Normally, I'd just nest the rest of my code in the callback and I'd have easy access to the returned value. But the Accessor class/widget code is more compartmentalized, and I'm not sure how and where to implement things.
How can I make this work? Do I need to put my async operations in a different lifecycle section of my class (I've only tried them in the constructor)? Is this a scoping issue? Appreciate any advice you have. Thanks!
EDIT: request here is the esri/request:
import request = require("esri/request");
Solved! Go to Solution.
In case anyone needs this, here's how I got it to work:
You need to nest the request call in an async function and use await to make sure the value is available. This code returns an array, so I had to change the property type accordingly also.
bump...
Still looking for advice on this is anyone has employed a similar work-flow.
bump.
Anyone have anything on this?
In case anyone needs this, here's how I got it to work:
You need to nest the request call in an async function and use await to make sure the value is available. This code returns an array, so I had to change the property type accordingly also.