javascript - React js 额外参数 API URL

问题描述

大家好！我的一个 React 应用程序有一个小问题：我正在尝试使用 API 获取天气警报。我的 App.js 文件如下所示：

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';
import Alerts from './Components/Alerts';

class App extends Component {

  constructor(){
    super();
    this.state = {
      alerts:[]
    }
  }

  getAlerts(){
    $.ajax({
      url: 'https://api.weather.gov/alerts/active/zone/AKZ201',
      dataType: 'json',
      cache: false,
      success: function(data){
        this.setState({alerts: data});
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
      }
    });
  }


  componentDidMount(){
    this.getAlerts();
  }

  render() {
    return (
      <div>
        <Alerts alerts={this.state.alerts} />
      </div>
    );
  }
}

export default App;

问题是这个 ajax 函数在 API URL 的末尾添加了一个额外的参数，并且由于这个额外的参数，API URL 没有返回正确的数据。

这是我在控制台中得到的：

jquery.js:9600 GET https://api.weather.gov/alerts/active/zone/AKZ201?_=1527798208757 400 ()

额外的参数是?_=1527798208757 400 ()

我发现这个额外的参数导致了这个问题。有什么想法可以删除此参数吗？

谢谢！

标签： javascriptjqueryreactjs

这更像是一个 jQuery 问题，然后是一个反应问题。如前所述，由于您的cache: false代码，添加了额外的时间戳。这是一种在加载资源时缓存资源的常用方法，因为附加时间戳参数会强制浏览器获取最新资源。

另外，我不知道您在 react 中使用 jQuery 的原因，但至少对于 HTTP 调用，您可能想查看Fetch API，这是一个与现代浏览器兼容的本机浏览器 api（无需安装包）。

这是使用 fetch 和 ES2017 时您的方法的更现代示例

async getAlerts = () => {
  const response = await fetch('https://api.weather.gov/alerts/active/zone/AKZ201');
  const alerts = await response.json();

  this.setState({
    alerts,
  });
}

这里发生了一些很酷的 ES2017 事情。首先是包含async/await，它确实有助于编写易于阅读的异步代码。如果您希望方法/函数异步执行某些操作，请指定async该函数/方法的前缀。

async function() {}

我们在这里还使用箭头函数getAlerts = () => {}将 getAlerts 方法绑定到一个维护相同上下文的函数this。回报？如果您想在 jsx 语句中使用它，您不必.bind(this)担心或担心this实际引用的是什么。

<button onClick={this.getAlerts}>Update Alerts</button>

接下来我们想要获取请求的结果，并且由于它是对某个数据库的异步调用，因此我们在函数调用前加上await，以获取底层承诺的结果。

const response = await somePromise() //in our case, its fetch(url)

可以使用response.json()另一个异步方法调用来获取响应正文。

const alerts = await response.json();

接下来，您注意到我们使用对象的名称作为对象键。说{alerts}是一样的{alerts: alerts}，但是你写的代码少了，眼睛也轻松了一点！

this.setState({
  alerts,
});

如果您没有 ES2017，（我假设您使用 create-react-app，其中包括启用了这些功能），这里是上述相同方法的 es6 版本：

getAlerts = () => {
  fetch('https://api.weather.gov/alerts/active/zone/AKZ201')
    .then((response) => response.json())
    .then((alerts) => {
      this.setState({
        alerts,
      });
    });
}

javascript - React js 额外参数 API URL

问题描述

解决方案

推荐阅读