Необработанное обещание ошибки отклонения в реакции родного?

Question

Я использую axios для извлечения данных из конечной точки API. Я получаю сообщение об ошибке -> Возможное необработанное отклонение обещания. Ошибка типа: undefined не является функцией (оценка res.json ())

Я использую реактивный-редукс и редук-thunk с собственным приложением реагировать.

venueAction.js:

import { FETCH_VENUES } from './types';
import axios from 'axios';

export const fetchVenues = () => dispatch => {
    axios.get(`my_api_link`)
    .then( res => res.json())
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues
        })
    )
    .catch( error => {
        console.log(error);
    });
};

Проверьте скриншот ниже:

Answer 1

Хорошо, теперь вы знаете, что не пишите свой код аксиоса, как это:

export const fetchVenues = () => dispatch => {
    axios.get(`my_api_link`)
    .then( res => res.json())
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues
        })
    )
    .catch( error => {
        console.log(error);
    });
}; 

И что теперь? Попробуйте использовать синтаксис ES8 async / await следующим образом:

export const fetchVenues = () => async dispatch => {
      try {
        const url = 'http://api.funwithredux.com/';
        let { data } = await axios.get(url);
        dispatch({ type: FETCH_VENUES, payload: data });
        console.log(data);
      } catch (e) {
        console.log(e);
      }
    };

И, как вы можете видеть, вы можете использовать оператор try / catch для перехвата любых ошибок, если хотите, и я определенно добавлю журналы консоли, чтобы гарантировать, что вы также получаете данные с конечной точки API.

Answer 2

Необходимость вызова json() в ответе является частью Fetch API . Вместо этого Axios реализует XMLHttpRequest , то есть вам не нужно это делать.

axios.get(`my_api_link`)
  .then(venues => {
    ...
  });

---

Axios - это библиотека Javascript, используемая для выполнения http-запросов из node.js или XMLHttpRequests из браузера, и она поддерживает API Promise, свойственный JS ES6. Еще одна особенность, которую он имеет над .fetch (), заключается в том, что он выполняет автоматическое преобразование данных JSON.

Если вы используете .fetch (), при обработке данных JSON происходит двухэтапный процесс. Первый - сделать фактический запрос, а второй - вызвать метод .json () для ответа.

& mdash; Получите доступ к Axios.js для выполнения http-запросов от Джейсона Арнольда на Medium