我正在尝试查询一个数据服务，并使用json响应通过React创建一个表。我使用了以下异步函数来创建json响应的列表（这部分按预期工作）：

export const service_query = async function(url){
  const resp = await fetch(url);
    const result = await resp.json();
  const features = result.features;
  const features_list = []
  for (let i = 0; i < features.length; i++){
    features_list.push(features[0].attributes)
  }
  return features_list;
}

我不太熟悉异步函数，在访问数据时遇到了麻烦。我在这里检查了类似的问题，但没有得到明确的答案。我的研究表明，我需要调用带有等待的异步函数，但这只能在另一个异步函数中完成，当不带等待调用时，它再次返回一个承诺。我陷入了这个循环...

import './App.css';
import { service_query } from './Utils';
import Table from './Table';

function App() {
  const url = "[url goes here]";
  const data_values = service_query(url)
  const headers = Object.keys(data_values[0])
  const content = Object.values(data_values)
  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>  
        <div className="container">
          <Table theadData={headers} tbodyData={content}/>
        </div>
      </header>
    </div> 
  );
}

export default App;

我尝试了以下方法，但这再次意味着我无法访问数据并获得承诺：

const getData = async() => {
    const data_values = await service_query(url)
    return data_values
  };

我也尝试了以下方法，但无法访问函数外部的data_values，并且将整个值赋值给变量会再次返回一个promise：

service_query(url).then((data) => {
    const data_values = data
  });