反应JS | AJAX 和 API

API 用于从服务器获取数据并使用AJAX和API我们异步调用数据并将其显示在我们的 HTML 中。您可以使用浏览器内置的 fetch函数或第三方库（如Axios ）发出 API 请求。您可以在任何地方发出 API 请求，但完全建议您在componentDidMount()生命周期方法中进行 API 调用。

使用 componentDidMount() 的原因：因此，只需将 API 请求放入 componentDidMount 即可非常简单。

• 使用componentDidMount可确保在初始渲染之后才加载数据，这非常重要。
• 使用componentDidMount确保仅从客户端获取数据。

先决条件：

1. JavaScript和JSX
2. 关于react state和setState的知识
3. 关于React 组件以及如何制作它们的知识
4. React 生命周期方法

下面是如何使用 API 的代码示例：

• 例子：

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: null,
        dataFetched: false,
        data: []
      };
    }
    
    componentDidMount() {
      fetch("https://api.toptensongs.com/data")
        .then(res => res.json())
        .then(
          (response) => {
            this.setState({
              dataFetched: true,
              data: response.data
            });
          },
          (error) => {
            this.setState({
              dataFetched: true,
              error
            });
          }
        )
    }
    
    render() {
      const { error, dataFetched, data } = this.state;
      if (error) {
        return 
  Error: {error.message}
  ;
      } else if (!isLoaded) {
        return 
  Loading...
  ;
      } else {
        return (
          
  
            {data.map(value => (
              
  
                {value.name} - {item.artist}
              
            ))}
          
        );
      }
    }
  }
  

因此，这是一个简单的示例，我们在其中解释了如何使用 API，因此请务必注意错误处理非常重要，因为如果未获取数据，则应该显示错误。

但这是另一个例子，如果我们想加载一些动作的数据，比如点击获取某个地方的天气，那么我们不能使用componentDidMount()因为它只被调用一次，所以我们可以使用componentWillUpdate()但它被删除了，我们也可以使用函数代替componentWillUpdate()并在函数中发出 API 请求。

• 示例：因此，在此示例中，我们将使用OpenWeatherMap API 制作一个非常简单的天气应用程序。

  class Weather extends React.Component {
    
      constructor(props) {
          super(props);
    
          this.state = {
              location: "",
              place: "",
              temp: "",
              weather: ""
          };
      }
    
      render() {
    
          return (
              
  
                  Enter Location
                  
  
                  
  
                      
                  
                  
  
                      
                        Check Weather 
                      
                  
                  
  
                      
  Location: {this.state.place}
                      
  Temperature: {this.state.temp} C
                      
  Condition: {this.state.weather}
                  
              
          );
      }
    
      changeValue = (event) => {
    
          this.setState({
              location: event.target.value
          });
      }
    
      getWeather = () => {
    
          fetch(`
  https://api.openweathermap.org/data/2.5/weather?q=${this.state.location}&units=metric&APPID=APIKEY`)
              .then(response => response.json())
              .then(data => {
                  this.setState({
                      place: data.name,
                      temp: data.main.temp,
                      weather: data.weather[0].main
                  });
              });
    
      }
  }
    
  export default class Main extends React.Component {
    
      constructor(props) {
    
          super(props);
    
          this.state = {
    
          };
      }
    
      render() {
    
          return (
              
  
                  
  
                    What's the Weather?
                  
                  
  
                  
              
          );
      }
  }
  

• 输出：所以，我们在这里所做的只是将 API 请求移动到getWeather()函数中，因此只有在我们点击查看天气时才会调用它。