React js额外参数接口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 ()
我发现这个额外的参数导致了这个问题。有什么办法可以删除这个参数吗？
谢谢!
回答 3
Stack Overflow用户
发布于 2018-06-01 05:17:31
这更像是一个jQuery问题，而不是一个react问题。正如前面所回答的，添加额外的时间戳是因为您的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>接下来，我们想要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,
});
});
}Stack Overflow用户
发布于 2018-06-01 04:44:11
之所以将额外的_=<timestamp>参数附加到请求URL的末尾，是因为您在$.ajax调用中指定了cache: false选项。这是确保您接收的是所请求资源的非浏览器缓存版本的方法之一。
Stack Overflow用户
发布于 2018-06-01 04:46:50
当您设置cache: false时，Jquery会附加_={timestamp}。
$.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>
https://stackoverflow.com/questions/50632379
复制相似问题
腾讯云开发者
