ES6의 템플릿 리터럴에 동적 값을 전달할 수 있습니까? 내가 그 API 호출을 칠 때

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); 
     }); 
} 

, URL은 보여줍니다

로컬 호스트 : 9000/API/정의되지 않은/정의되지 않은/학교/

내가 통과하려고 해요 데이터를 두 번째 API에 매개 변수로 첫 번째 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); 
     }); 
} 

이 두 번째 Axios의의 호출이되지 않도록하고 전달하는 유효한 URL이 있습니다.

Answer 2

/api/cities 데이터를 가져 오는 것이 비동기 작업이므로 결과를 기다려야합니다. 그냥 개념의 증명 : 첫 번째가 완료 될 때까지

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() 
     } 
    }); 
}