第一次尝试axios和reactjs。这是我的组件CountryListSideBar:
import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios';
class CountryListSidebar extends Component {
constructor(props) {
super(props);
this.state = {
options: []
};
}
componentDidMount() {
let self = this;
const config = {
timeout: 10000
};
axios.get('https://localhost:5000/country/getAll', config)
.then(response => {
console.log("response returned: " + response.data);
self.setState({ options: response }) ;
}).catch(error => {
console.log("returned error: " + error)
});
}
render() {
return (
<ul className="list-group left-side-bar">
{this.state.options.map(function(object) {
return (
<li className="nav-item list-group-item list-group-item-success" value={object.id}>
<a nav-link href="#">{object.name}</a>
</li>
);
})}
</ul>
);
}
}
export default CountryListSidebar;
我正在使用静态json,它正在运行。然后我决定尝试Axios。当我在浏览器上输入请求地址(localhost:5000 / country / getAll)时,我会在2或3秒内得到json响应。
它捕获console.log中的错误:“错误:网络错误”。这就是我在chrome的网络标签中得到的内容:
getAll (failed) xhr xhr.js:178 0 B 79 ms