使用es6进行未定义的功能并做出反应

Question

我从其他文件调用函数时得到一个未定义，我正在使用webpack，babel，es6并做出反应，根据标准我认为我正在做正确的事情，但这就是我在安慰

TypeError：_openWeatherMap.getTemp（...）未定义[Sabermás] bundle.js：25033：9 GET XHR响应来自请求[HTTP / 1.1 200 OK 232ms] //无论是否定义了请求

这是我的档案

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;
  axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};


//weather.js


import React, { Component } from 'react';
import WeatherForm from 'weather-form';
import WeatherMessage from 'weather-message';
import { getTemp } from 'open-weather-map';

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: 'Miami',
      temp: 88
    };
  }
  handleSearch(location) {
    var that = this;

    getTemp(location).then((temp) => {
      that.setState({ location, temp });
    }, (err) => {
      alert(err);
    });
  }
  render() {
    let {location, temp} = this.state;
    return (<div>
      <h3>Weather component</h3>
      <WeatherForm onSearch={this.handleSearch.bind(this)}/>
      <WeatherMessage location={location} temp={temp}/>
    </div>);
  }
}

export default Weather;


//webpack.config.js
module.exports = {
  entry: './app/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      main: 'app/components/main.js',
      nav: 'app/components/nav.js',
      weather: 'app/components/weather.js',
      about: 'app/components/about.js',
      examples: 'app/components/examples.js',
      'weather-form': 'app/components/weather-form.js',
      'weather-message': 'app/components/weather-message.js',
      'open-weather-map': 'app/api/open-weather-map.js'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-0']
      },
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/
    }]
  }
};

我希望你可以帮助我，因为我浪费了我的机会，提前感谢你的亲切帮助。

Answer 1

您需要在getTemp方法中返回axios.get(...) 。

函数的隐式返回值是undefined 。 所以你试图访问.then() undefined ，因此错误。

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;

  return axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};