First published in the language document @blueju

preface

Sending requests is a very important and common part of the front end, and ali’s low code engine certainly doesn’t lack it.

In ali Low code engine, the request is configured in the data source, which is as shown below:

configuration

The configuration interface is shown as follows:



Where the data source ID recommends the small hump nomenclature because the final result of the request is storedThis.state. Data source ID, as shown above, when our table expects to show the result of the requestThis.state. Data source IDBind to the table data configuration.

The rest of the configuration items are either simple to configure (such as request address, request parameters, whether automatic request, request method), or they are rarely used and are not necessary (such as adding data processing functions, request header information, timeout period). This article is not a guide to ali low code engine, so we will not elaborate on it.

call

Although there is a request configuration item called whether to automatically request, our real scenario is usually to call the request method, such as sending a request when clicking query, clearing the query form and sending a query request when clicking reset

How to call this one is hard to understand from the user interface and rarely described in the documentation, but if you’re experienced, you can find a solution by peeling a little.

Now the requirement is to send query request when clicking query, so let’s print this in the query after clicking query button, as shown in the figure:



The dataSourceMap attribute tableDataSource has a subattribute tableDataSource, which is the same as the data source ID in the configuration. There is also a load method below it, guess it is a call method, then we put the call code in the query method triggered by the query button.

search() {
  console.log(this)
  const response = this.dataSourceMap.tableDataSource.load()
  response.then(res= > {
    console.log(res)
    this.setState({
      tableDataSource: res
    })
  })
}
Copy the code

In the figure below, we manually invoked the request as expected and successfully returned the response result.