ES6のテンプレートリテラルに動的な値を渡すことはできますか？

Question

getSelectedCityId() { 
    let citiName 
    citiId; 
    axiosInstance 
     .get("/api/cities") 
     .then(response => { 
      if (response.status === 200 && response.data) { 
       citiName = this.state.city; 
       citiId = this.state.city.city_id; 
      } 
     }) 
     .catch(error => {}); 

    let url = `/api/${citiName}/${citiId}/schools/`; 
    axiosInstance 
     .get(url) 
     .then(response => { 

     }) 
     .catch(error => { 
      console.log(error); 
     }); 
} 

私はそのAPI呼び出しを押すと、URLが表示さ：

はlocalhost：9000/API/未定義/未定義 /学校/

私が合格しようとしています私は2番目のAPIのパラメータとして1番目のAPI呼び出しから取得するデータです。私のポイントは、なぜテンプレートリテラルが定義されていない投げているのですか？テンプレートリテラルを使用して動的データを渡すことはできませんか？

Answer 1

getSelectedCityId() { 
    let citiName 
    citiId; 
    axiosInstance 
     .get("/api/cities") 
     .then(response => { 
      if (response.status === 200 && response.data) { 
       citiName = this.state.city; 
       citiId = this.state.city.city_id; 
       this.getSelectedCityIdStepTwo(`/api/${citiName}/${citiId}/schools/`); 
      } 
     }) 
     .catch(error => {}); 
} 

getSelectedCityIdStepTwo(url) { 
    axiosInstance 
     .get(url) 
     .then(response => { 

     }) 
     .catch(error => { 
      console.log(error); 
     }); 
} 

これにより、第2 AXIOS呼び出しが行われていないことを確認し、合格するための有効なURLがあります。

Answer 2

/api/citiesデータを取得するのが非同期操作なので、結果を待つ必要があります。ただ、概念実証のために：最初の1が完了するまで

getSelectedCityId() 
{ 
    let citiName 
    citiId; 
    axiosInstance 
    .get("/api/cities") 
    .then(response => { 
     if (response.status === 200 && response.data) { 
     citiName = this.state.city; 
     citiId = this.state.city.city_id; 
     return `/api/${citiName}/${citiId}/schools/`; 
     } 
     return null; 
    }) 
    .then(url => { 
     if(url) { // the data from previous then 
     axiosInstance.get(url) //.then().catch() 
     } 
    }); 
}