Question

大家好！我的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（）

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

谢谢！

Answer 1

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

另外，我不知道你在反应中使用jQuery的原因，但至少对于HTTP调用，你可能想要查看Fetch API，一个与现代兼容的本地浏览器api（没有要安装的软件包）浏览器。

以下是使用fetch＆amp; amp;时的方法的更现代的示例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>

接下来我们想要获取get请求的结果，并且因为它是对某个数据库的异步调用，所以我们在await之前添加函数调用，以获得基础promise的结果。

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,
      });
    });
}

Answer 2

额外_=<timestamp>参数附加到请求网址末尾的原因是您在cache: false电话中指定的$.ajax选项。这是确保您收到所请求资源的非浏览器缓存版本的方法之一。

请参阅the official docs。

Answer 3

当您设置_={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>

参考：Official Jquery Docs

React js额外的参数API URL

3 个答案: