如何将axios api与回调函数/ promise / async-await一起使用?

时间:2019-05-21 16:19:08

标签: javascript reactjs axios

我正在将天气api与axios一起使用以获取天气数据。我想知道如何使用回调函数,promise和async-等待吗?

我试图在componentDidMount()方法中获取天气数据,然后设置组件的状态。

class Weather extends React.Component{
    state = {
        weather: [],
        temp: [],
        clouds: [],
        city:[],
        humidity:[],
        pressure:[]
    }

 componentDidMount(){
     axios.get('https://api.openweathermap.org/data/2.5/findq=mumbai&units=metric&appid=f92c1f4990b0574d4a4e4d3dd556f388')
        .then(res =>{
            this.setState({
                weather: res.data.list[0],
                temp: res.data.list[0].main.temp,
                clouds: res.data.list[0].weather[0].description,
                city: res.data.list[0].name

            })
        }).catch(error=>{
            console.log(error);
        })
    }

    render(){
        return(
            <div>
                <h3>City: {this.state.city}</h3>
                <p>Temperature: {this.state.temp} c</p>
                <p>clouds: {this.state.clouds}</p>

            </div>
        )
    }
}

export default Weather;

我想知道如何以及何时使用回调,promise,异步-等待

0 个答案:

没有答案