如何使用 redux thunk 链接 2 API 调用？

Question

我正在制作一个天气应用程序，它通过对 API 调用 freegeoip.com 来检测您当前位置的坐标，然后使用这些坐标对 API 调用 openweathermap.org 获取您当前位置的天气。

我如何使用 redux thunk 执行此操作？

这是我当前的动作创建者代码：

import axios from 'axios';

export const FETCH_CURRENT_CITY = 'FETCH_CURRENT_CITY';

const API_KEY = '95108d63b7f0cf597d80c6d17c8010e0';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/weather?appid=${API_KEY}`;

export function fetchCurrentCityCoords() {
  const request = axios.get('http://freegeoip.net/json/');

  console.log('Request coords:', request);

  return (dispatch) => {
    request.then(({response}) => {
      dispatch(fetchCurrentCityWeather(response));
    });
  };
}

export function fetchCurrentCityWeather(coords) {
  const lat = coords.data.latitude;
  const lon = coords.data.longitude;

  const url = `${ROOT_URL}&lat=${lat}&lon=${lon}`;
  const request = axios.get(url);

  console.log('Request weather:', request);

  return (dispatch) => {
    request.then(({response}) => {
      dispatch({
        type: FETCH_CURRENT_CITY,
        payload: response
      })
    });
  };
}

控制台日志：

Request coords: Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

Uncaught (in promise) TypeError: Cannot read property 'latitude' of undefined
    at fetchCurrentCityWeather (bundle.js:26131)
    at bundle.js:26125

Answer 1

您确定 API response 持有 data 属性吗？
尝试调试 fetchCurrentCityWeather 函数的第一行并检查 coords 持有什么，或者只是尝试 console.log(coords); 查看它的对象结构。

也许是这样：

 const lat = coords.data.latitude;
 const lon = coords.data.longitude;

应该是这样的：

 const lat = coords.latitude;
 const lon = coords.longitude;

编辑
根据您的评论，
出于调试目的，请尝试将您的 fetchCurrentCityWeather 函数编辑为此代码并查看打印到控制台的内容：

export function fetchCurrentCityWeather(coords) {
    console.log(coords);

  //const lat = coords.data.latitude;
  //const lon = coords.data.longitude;

  //const url = `${ROOT_URL}&lat=${lat}&lon=${lon}`;
  //const request = axios.get(url);

  //console.log('Request weather:', request);

  //return (dispatch) => {
    //request.then(({response}) => {
     // dispatch({
        //type: FETCH_CURRENT_CITY,
       // payload: response
      //})
    //});
 // };
}

编辑#2
根据您的评论，您将得到 undefined 因此您不能在其上使用 .map。这是您对错误的回答。
至于你为什么得到undefined，我想是因为这段代码：

 return (dispatch) => {
    request.then(({response}) => {
      dispatch(fetchCurrentCityWeather(response));
    });
  };

您正在使用此 {response} 对 response 参数执行 "Destructuring"。
试试这个：

 return (dispatch) => {
    request.then((response) => {
      dispatch(fetchCurrentCityWeather(response));
    });
  };

Answer 2

Uncaught (in promise) TypeError: Cannot read property 'latitude' of undefined at fetchCurrentCityWeather (bundle.js:26131) at bundle.js:26125

问题似乎出在您的 const lat = coords.data.latitude 它未定义。

所以你必须检查

return (dispatch) => {
request.then(({response}) => {
  dispatch(fetchCurrentCityWeather(response));
});

使用正确的 response 对象调用 fetchCurrentCityWeather 您希望具有的属性 data.latitude & data.longitude 您似乎引用不正确。

建议。

console.log(coords); 在 fetchCurrentCityWeather 函数中查看它是否具有这些属性。

如何使用 redux thunk 链接 2 API 调用？

How to chain 2 API calls with redux thunk?

reactjs

redux

redux-thunk

建议。