首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React js额外参数接口URL

React js额外参数接口URL
EN

Stack Overflow用户
提问于 2018-06-01 04:34:34
回答 3查看 700关注 0票数 0

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

代码语言:javascript
复制
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没有向我返回正确的数据。

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

代码语言:javascript
复制
jquery.js:9600 GET https://api.weather.gov/alerts/active/zone/AKZ201?_=1527798208757 400 ()

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

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

谢谢!

EN

回答 3

Stack Overflow用户

发布于 2018-06-01 05:17:31

这更像是一个jQuery问题,而不是一个react问题。正如前面所回答的,添加额外的时间戳是因为您的cache: false代码。这是一种在加载资源时对其进行缓存的常用方法,因为附加时间戳参数会迫使浏览器获取最新的资源。

此外,我不知道您为什么要在react中使用jQuery,但至少对于HTTP调用,您可能希望研究一下Fetch API,它是一种与现代浏览器兼容的本机浏览器api (无需安装包)。

下面是使用fetch & ES2017时方法的一个更现代的示例

代码语言:javascript
复制
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指定为该函数/方法的前缀。

代码语言:javascript
复制
async function() {}

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

代码语言:javascript
复制
<button onClick={this.getAlerts}>Update Alerts</button>

接下来,我们想要get请求的结果,因为它是对某个数据库的异步调用,所以我们在函数调用前加上await,以获得底层promise的结果。

代码语言:javascript
复制
const response = await somePromise() //in our case, its fetch(url)

可以使用response.json()获得响应体,这是另一个异步方法调用。

代码语言:javascript
复制
const alerts = await response.json();

接下来,您会注意到我们使用对象的名称作为对象键。说{alerts}{alerts: alerts}是一样的,但是你写的代码更少,而且看起来更简单!

代码语言:javascript
复制
this.setState({
  alerts,
});

如果您没有ES2017 (我假设您使用的是create-react-app,它包含启用了这些功能),下面是上面相同方法的es6版本:

代码语言:javascript
复制
getAlerts = () => {
  fetch('https://api.weather.gov/alerts/active/zone/AKZ201')
    .then((response) => response.json())
    .then((alerts) => {
      this.setState({
        alerts,
      });
    });
}
票数 2
EN

Stack Overflow用户

发布于 2018-06-01 04:44:11

之所以将额外的_=<timestamp>参数附加到请求URL的末尾,是因为您在$.ajax调用中指定了cache: false选项。这是确保您接收的是所请求资源的非浏览器缓存版本的方法之一。

参见the official docs

票数 1
EN

Stack Overflow用户

发布于 2018-06-01 04:46:50

当您设置cache: false时,Jquery会附加_={timestamp}

代码语言:javascript
复制
$.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);
      }
    });
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参考:Official Jquery Docs

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50632379

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档