Могу ли я передавать динамические значения литералам шаблонов ES6?

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-адрес показывает:

локальный: 9000/api/не определено/не определено/школы/

Я пытаюсь передать данные, которые я получу от первого вызова API, в качестве параметра для второго API. Моя точка зрения заключается в том, почему литерал шаблона выдает undefined? Разве нам не разрешено передавать динамические данные через литералы шаблонов?


reactjs javascript axios jsx
person Technologeek    schedule 27.11.2017    source источник
comment
Вы можете, но в этом случае это не работает, потому что вы пытаетесь установить переменные, которые являются частью асинхронного процесса. Вам следует прочитать этот вопрос и ответы о том, как чтобы вернуть ответ на асинхронный вызов.   -  person Andy    schedule 27.11.2017
comment
PS: в этом случае вам может понравиться улучшенный опыт кодирования, если вы использовали async/wait. Вы должны включить его в процесс сборки, однако.   -  person Andy    schedule 27.11.2017
comment
@Энди, я вроде как понял это! Спасибо за ваш вклад!   -  person Technologeek    schedule 27.11.2017

Ответы (2)


arrow_upward
3
arrow_downward 

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-адрес для передачи.

person Joshua Underwood    schedule 27.11.2017

arrow_upward
3
arrow_downward

Поскольку получение /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()
      }
    });
}
person dhilt    schedule 27.11.2017
comment
Это более краткий ответ, чем мой. Я уступлю вам! - person Joshua Underwood; 27.11.2017
comment
@JoshuaUnderwood Согласен. Однако мне нравится декомпозиция. Разбивать код на более мелкие функции становится легче для чтения и отладки. Я все равно выбрал ваше решение! - person Technologeek; 27.11.2017