反應原生的未處理承諾拒絕錯誤？

Question

我正在使用axios從API端點獲取數據。 我收到錯誤 - >可能未處理的promise promise類型錯誤：undefined不是函數（評估res.json（））

我正在使用react-redux和redux-thunk with react native app。

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

需要在響應上調用json()是Fetch API的一部分。 Axios實現了XMLHttpRequest ，這意味着您不需要這樣做。

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

---

Axios是一個Javascript庫，用於從瀏覽器發出來自node.js或XMLHttpRequests的http請求，它支持JS ES6原生的Promise API。 它與.fetch（）的另一個特性是它執行JSON數據的自動轉換。

如果使用.fetch（），則在處理JSON數據時有兩個步驟。 第一個是發出實際請求，然后第二個是在響應上調用.json（）方法。

- 獲取 Jason Arnold在Medium上發出http請求時的Fetch vs. Axios.js

Answer 2

好的，現在你知道不要寫這樣的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);
    });
}; 

怎么辦？ 嘗試使用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端點獲取數據。