Действие с двумя связанными запросами. Ошибка "Не удается прочитать свойство неопределенного значения" - PullRequest
Новая
       141

Действие с двумя связанными запросами. Ошибка "Не удается прочитать свойство неопределенного значения"

1 голос
/ 18 июня 2020

Большинство моих вызовов api - это функции, которые вызываются из такого действия

Action: 

export const fetchSomethingAction = () => {
  return (dispatch) => {
    dispatch({ type: types.FETCH_SOMETHING_REQUEST })
    return api.fetchSomething()
      .then((response) => {
        dispatch({ type: types.FETCH_SOMETHING_SUCCESS, data: response.data })
      })
      .catch(error => {
        dispatch({ type: types.FETCH_SOMETHING_FAILURE, error })            
      })
  }
}

И запрос ax ios выглядит примерно так: 

export const fetchSomething = () => {
  return axios({
    method: 'GET',
    url: `${api}/endpoint`
  });
}

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

Итак, как связать запрос с достичь этого?

Я делал, например, 

export const fetchSomething = () => {
      axios({
        method: 'GET',
        url: `${api}/endpoint1`
      })
      .then(res => {
         return fetchSomething2(res.param)
      })
      .catch(err => return err)
    }

const fetchSomething2 = (param) => {
      return axios({
        method: 'GET',
        url: `${api}/endpoint1?param=${param}`
      });
    }

Но я получаю Cannot read property 'then' of undefined в действии.

Мне нужно два действия, по одному для каждой функции? Это правильный способ сделать это? Спасибо

1 Ответ

1 голос
/ 20 июня 2020

Ваша fetchSomething функция имеет стрелочную функцию, которая определена в фигурных скобках, но не имеет оператора возврата и, таким образом, неявно возвращает undefined. Измените его, чтобы либо не использовать фигурные скобки, либо иметь оператор возврата.

Без фигурных скобок: 

export const fetchSomething = () =>
      axios({
        method: 'GET',
        url: `${api}/endpoint1`
      })
      .then(res => {
         return fetchSomething2(res.param)
      })
      .catch(err => return err)

С возвратом: 

export const fetchSomething = () => {
      return axios({
        method: 'GET',
        url: `${api}/endpoint1`
      })
      .then(res => {
         return fetchSomething2(res.param)
      })
      .catch(err => return err)
    }

Вот небольшой пример, который вы можно использовать, чтобы понять разницу: 

> a = () => 1; a()
1

> a = () => { 1 }; a()
undefined

> a = () => { return 1 }; a()
1
...