承诺履行中的未定义错误

Question

我正在调用 openweathermap api 来检索 higher-order 组件中的天气，然后渲染“主”组件。但是，ajax调用成功后，出现如下错误：

TypeError: _getWeather2.default(...) is undefined

代码：

MainContainer.js：

import React from "react";
import getWeather from "../action/getWeather";
import Main from "./Main";

const MainContainer = () => {
// the error is somewhere related to this component
    var weather = getWeather( "london", "uk" )
        .then(( data ) => {
            console.log( "data in maincontainer is...", data );
            return <Main />;
        });
}

export default MainContainer;

getWeather.js：

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );
    fetch( queryPath )
        .then(( response ) => response.json( ))
        .then(( data ) => {
            console.log( "data is...", data );
            return data;
        })
        .catch(( err ) => {
            console.log( err );
        })
};

export default getWeather;

我做错了什么？

Answer 1

您的getWeather() 函数不返回任何内容。您需要返回您那里的承诺链产生的承诺。

您的函数目前也在处理错误，因此我在您的 .catch 处理程序中添加了 throw err：

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );

    return fetch( queryPath )
        .then(( response ) => response.json( ))
        .then(( data ) => {
            console.log( "data is...", data );
            return data;
        })
        .catch(( err ) => {
            console.log( err );
            throw err;
        })
};

如果您决定不需要该console.log 来记录data 值，则可以删除第二个.then。 .catch() 也是如此：

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );

    return fetch( queryPath )
        .then(( response ) => response.json( ));
};

Answer 2

getWeather 需要返回一个承诺。

const getWeather = ( city, country ) => {
    let queryPath = `http://api.openweathermap.org/data/2.5/forecast?q=${ city },${ country }&APPID=${ inserytKey }&mode=json`
    console.log( "queryPath is...", queryPath );
    return new Promise((resolve, reject) => {
        fetch( queryPath )
            .then(( response ) => response.json( ))
            .then(( data ) => {
                console.log( "data is...", data );
                resolve(data);
            })
            .catch(( err ) => {
                reject(err);
                console.log( err );
            })
    })
};

export default getWeather;