基于Promise的天气预报应用

基于 Promise 的天气预报应用

本案例展示如何利用 Promise 对象构建异步天气预报应用。通过调用天气 API 获取实时数据，并使用 Promise 处理异步请求和响应，最终将天气信息呈现给用户。

// 模拟异步获取天气数据的函数
function getWeatherData(city) {
  return new Promise((resolve, reject) => {
    // 模拟网络请求延迟
    setTimeout(() => {
      // 模拟成功获取天气数据
      const weatherData = {
        city: city,
        temperature: 25,
        condition: '晴朗'
      };
      resolve(weatherData);

      // // 模拟获取天气数据失败
      // reject(new Error('无法获取天气数据'));
    }, 1000);
  });
}

// 获取用户输入的城市
const city = '北京';

// 调用 getWeatherData 函数获取天气数据
getWeatherData(city)
  .then(weatherData => {
    // 成功获取数据后更新 UI
    console.log(`城市：${weatherData.city}`);
    console.log(`温度：${weatherData.temperature}°C`);
    console.log(`天气：${weatherData.condition}`);
  })
  .catch(error => {
    // 获取数据失败后处理错误
    console.error('获取天气数据失败：', error);
  });

代码说明:

1. getWeatherData 函数模拟异步获取天气数据，返回一个 Promise 对象。
2. 使用 .then 方法处理 Promise 成功状态，获取天气数据并更新 UI。
3. 使用 .catch 方法处理 Promise 失败状态，捕获错误信息。

通过使用 Promise，我们可以以更简洁、易读的方式处理异步操作，提高代码的可维护性和可读性。