javascript - React with Axios，对于我从一个 GET 得到的响应，我想使用另一个 GET，我想从某些字段中总结值

Question

React 和 Axios 的新手，试图弄清楚如何让它工作。

因此，从我参加的 React 类(class)中，我了解到我应该将服务器调用放在 componentDidMount 中，所以我的代码如下所示:

state = {
    values : {}
}

componentDidMount () {
    axios.get(query_url, {headers:headers}).then(response => {
              //console.log(response.data.data[0]); 
              for (let i=0; i<response.data.data.length; i++) {
                  console.log(response.data.data[i]);
                  let data_url = some_url + response.data.data[i];
                  axios.get(data_url, {headers:headers}).then(response => {
                      for (let j=0; j<response.data.data[0]['metrics'].slice(0, 30).length; j++) {
                          let detail = response.data.data[0]['metrics'][j];
                          if (detail['country'] === 'US') {
                              usaVal += detail['value'];
                          } else {
                              worldVal += detail['value'];
                          }
                          this.setState({values: {usa: usaVal, world: worldVal}});
                      }
                  }
              }
        })

让我们假设所有 some_url , headers , query_url都设置正确(我注释掉的行)。

我的目标是获得最后的 usaVal和 worldVal ，但随着数据的获取，状态会更新。我如何才能确保获得最终号码？

编辑:按照@Shubham Khatri 的建议，我的代码现在看起来像

async componentDidMount () {
    const url = "some url";
    const queryUrl = url + "some other crap";
    const headers = {"auth": "some auth"};

    //first level: get query params
    const response = axios.get(queryUrl, {headers: headers});
    if (response) {
      response.then(response => {
        const data = await Promise.all(response.map((data, index) => axios.get(`${url}${data}`, {headers: headers})));
        console.log(data);
      })
    }

现在我得到 Syntax error: await is a reserved word

来自 Error using async/await in React Native我需要 async搭配 await ，我有。我没有正确使用它吗？

Answer 1

您可以将 async-await 与 Promise.all 一起使用

async componentDidMount () {
    const response = await axios.get(query_url, {headers:headers})
    //console.log(response.data.data[0]); 
    if(response) {
        const data = await Promise.all(response.data.data
            .map((data, index) => axios.get(`${some_url}${data}`, {headers:headers})
        ))

        // handle responses
        let usaVal = 0, worldVal = 0;
        data.forEach(response => {
            for (let j=0; j<response.data.data[0]['metrics'].slice(0, 30).length; j++) {
                let detail = response.data.data[0]['metrics'][j];
                if (detail['country'] === 'US') {
                    usaVal += detail['value'];
                } else {
                    worldVal += detail['value'];
                }      
            }
        })
        this.setState({values: {usa: usaVal, world: worldVal}});
     }
}