反应js额外的参数API URL?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (121)

我的一个React应用程序出现了一个小问题:我正在尝试使用API​​获取Weather警报。我的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()

我发现这个额外的参数导致了这个问题。任何想法如何我可以删除此参数?

提问于
用户回答回答于

额外的时间戳因为你的cache: false代码而被添加。它是一种常见的缓存方式,在加载资源时会破坏资源,因为追加时间戳参数会强制浏览器获取最新资源。

另外,我不知道在反应中使用jQuery的原因,但至少对于HTTP调用,你可能需要查看与现代浏览器兼容的本地浏览器api(无需安装软件包)的Fetch 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,
  });
}

首先,是包含的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,
      });
    });
}
用户回答回答于

_={timestamp}当你设置时,jquery添加cache: false

$.ajax({
      url: 'https://api.weather.gov/alerts/active/zone/AKZ201',
      dataType: 'json',
      cache: true,
      success: function(data){
       console.log(JSON.stringify(data))
      },
      error: function(xhr, status, err){
        console.log(err);
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

扫码关注云+社区

领取腾讯云代金券