Проблема с реализацией Axios.get в Reactjs

Я новичок в реагировании и хочу сделать запрос Axios.get() на основе параметра функции. Это то, что я пробовал.

 const mentorName = (value) => {
    try {
      Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      ).then(res => {
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

Но это не сработало, так как в консоли не было напечатано res. Что в этом не так?

Код, который работал нормально:

const mentorName = (value) => {
    try {
      const res = Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
      }
    } catch (error) {
      console.log(error)
    }
  }

Приведенный ниже код работал нормально, но возвращает информацию, завернутую в обещание. Как получить к нему доступ сейчас, потому что res.data не является допустимым свойством.


person Paras Bansal    schedule 29.04.2021    source источник
comment
Вы проверили, какой на самом деле код состояния ответа? Поскольку console.log не произойдет, если этот код не будет конкретно 200. Судя по коду, который вы показали, проблема также может быть в API.   -  person Aarni Joensuu    schedule 29.04.2021
comment
Я отредактировал свой вопрос, пожалуйста, посмотрите его снова. Код состояния 200.   -  person Paras Bansal    schedule 29.04.2021
comment
Вы пробовали awaiting axios.get()?   -  person Aarni Joensuu    schedule 29.04.2021
comment
Да. Но это показывает ошибку, что объекты недействительны в качестве дочернего элемента React. Я искал в сети, и решение состояло в том, чтобы использовать useEffect с асинхронностью. Но как эффективно использовать его для вызова функции?   -  person Paras Bansal    schedule 29.04.2021
comment
В первом примере, если код состояния равен 200, а data.status — успешно, вы не увидите никаких выходных данных. Это ты так написал. Как насчет отображения вывода в случае else для вашего оператора if? Ваш второй рабочий пример — это отвлечение. Вы проверяете, что somePromise.status не равно 200. Это не так. Он не определен, поэтому неудивительно, что оператор if работает.   -  person spender    schedule 29.04.2021


Ответы (2)


Можете ли вы попробовать это с async/await.

import axios from 'axios';

const mentorName = async value => {
  try {
    const res = await axios.get(`${BASE_URL}/api/v1/consultations/${value}`);
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};

В console.log внутри блока try вы можете проверить наличие файла api response.

person Shubham Jajoo    schedule 29.04.2021

const mentorName = (value) => {
    try {
      Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      ).then(res => {
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
        }
      })
    } catch (error) {
      console.log(error)
    }
  }

приведенный выше код не печатается из-за условия if, вполне вероятно, что большую часть времени статус будет 200, и все, кроме 200, будет детализировано, чтобы поймать блок

причина, по которой он печатает обещание в приведенном ниже коде, заключается в том, что это обещание, ожидающее выполнения, и сравнение/условие, которое вы выставили, очень хорошо, потому что res - это обещание, а res.status не определено

const mentorName = (value) => {
    try {
      const res = Axios.get(
        `${BASE_URL}/api/v1/consultations/${value}`
      )
        if (res.status !== 200 || res.data.status !== "success") {
          console.log(res)
          return
      }
    } catch (error) {
      console.log(error)
    }
  }

настройте код, чтобы включить блок else, и вы всегда сможете увидеть что-то напечатанное в консоли

const mentorName = (value) => {
        try {
          Axios.get(
            `${BASE_URL}/api/v1/consultations/${value}`
          ).then(res => {
            if (res.status !== 200 || res.data.status !== "success") {
              console.log(res)
              return
            } else {
              console.log(res);
            }
          })
        } catch (error) {
          console.log(error)
        }
      }

Я не рекомендую использовать async/await по одной единственной и неотложной причине: поток пользовательского интерфейса приостанавливается до тех пор, пока не будет разрешен асинхронный вызов. просто чтобы это выглядело как синхронный вызов. придерживаться пути обещания.

person anees rehman    schedule 29.04.2021
comment
Все хорошо, кроме последнего бита: поток пользовательского интерфейса приостановлен до тех пор, пока не будет разрешен асинхронный вызов. Я не понимаю, что вы пытаетесь здесь сказать. В JS в браузере использование async/await не будет удерживать поток пользовательского интерфейса, и в этом случае нет большой разницы между использованием Promise.then и async/await. - person spender; 29.04.2021
comment
тонкая разница между async/await и обещанием заключается в том, что обещания не будут ждать, пока асинхронное выполнение не завершится и не будет возвращено с ответом, с другой стороны, асинхронное ожидание делает. когда стек выполнения сталкивается с асинхронностью (с точки зрения непрофессионала), он приостанавливает выполнение и ждет, пока микрозадачи завершат свое выполнение (async/await — это просто синтаксический сахар по сравнению с обещаниями для достижения синхронного выполнения). - person anees rehman; 29.04.2021