Реагирует на сбой приложения, если API-URL недействителен - PullRequest
Новая
       26

Реагирует на сбой приложения, если API-URL недействителен

0 голосов
/ 13 февраля 2019

Я пытаюсь написать свое самое первое приложение React.В форме с двумя полями ввода пользователь вводит название страны и города в полях ввода и отправляет форму.Затем переменные города и страны передаются следующему компоненту, который должен отправить API-запрос в openweatehrmap API и показать результаты. 

import React, { Component } from 'react';
import axios from 'axios';
import Form from './Form/Form';

class Weather extends Component {
  state = {
    country: '',
    city: '',
    currentTemp: '',
    error: undefined,
  }


  getWeather = async (e) => {
    e.preventDefault();
    const URL = 'http://api.openweathermap.org/data/2.5/weather?q='
    const API_KEY = "8b46d478a9...34a69";
    const country = e.target.elements.country.value;
    const city = e.target.elements.city.value;
    try {
      if (country && city) {
        const response = await 
axios.get(`${URL}${city},${country}&appid=${API_KEY}&units=metric`);
        const data = await response;
        console.log(data);
        this.setState({
          country: data.data.sys.country,
          city: data.data.name,
          currentTemp: data.data.main.temp,
          error: '',
        });
      } else {
        this.setState({
          country: undefined,
          city: undefined,
          currentTemp: undefined,
          error: 'Please enter a country and a city name'
        })
      }
    } catch (err) {
      this.setState({ error: err })
    }
  }


  render() {
    let showResult;
    if (this.state.error !== undefined && this.state.country && this.state.city) {
      showResult =
        <ul>
          <li>Location: {this.state.country} {this.state.city}</li>
          <li>Current Temperature: {this.state.currentTemp}° Celsius</li>
        </ul>
    }
    else {
      showResult = <div className="error">
        {this.state.error}
      </div>
    }

    return (
      <div>
        <Form onGetWeather={this.getWeather} />
        {showResult}
      </div>
    );
  }
}

export default Weather;

Если вы оставите одно или оба поля ввода пустыми и отправите форму,пользовательский интерфейс показывает ошибку.Если вы заполните оба поля ввода, а страна и город связаны (например, Великобритания и Лондон), пользовательский интерфейс отображает температуру и некоторую другую информацию.

Однако , Если вы заполнитев обоих полях ввода только с произвольным текстом, или если страна и город не связаны друг с другом, приложение завершает работу сразу после отправки формы.

Я думаю, это потому, что сгенерированный API-URL больше не действителен.Консоль показывает следующую ошибку:

enter image description here

Я провел целый день, но не смог найти способ исправить это.Как я могу избежать сбоя приложения.Как я могу проверить сгенерированный API-URL?Или любой другой намек или решение?

1 Ответ

0 голосов
/ 13 февраля 2019

Спасибо, ребята.

Думаю, мне удалось это исправить после прочтения ваших комментариев.Мне пришлось изменить часть уловки на это: 

catch (err) {
      if (err.response) {
        console.log(err.response.data);
        this.setState({ error: err.response.data.message });
      }
    };

Что вы думаете?

Есть ли в моем коде что-нибудь еще, что можно улучшить?(Я уверен, что их много)

...