如何在 react.js 网络应用程序中从这个 url 获取数据?
How to get the data from this url in a react.js web app?
URL: http://refertest.pythonanywhere.com/job/openings
描述:API 将获取包含所有详细信息的职位空缺列表。
方法:获取
Headers:
{
“tid”:3441
}
响应负载:
{
“状态码”:0,
"statusMessage": "工作数据获取成功"
“数据”: [
// json objects 列表,包含作业数据
]
}
卷曲:
curl --location --request GET 'http://refertest.pythonanywhere.com/job/openings'
--header 'tid: 3441'
一种方法是使用 fetch api. See working example in CodeSandbox. (Please note that I switched your url to https in my example.) More examples in the react docs。另见 axios。
示例:
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(undefined);
const [data, setData] = useState(undefined);
useEffect(() => {
fetch("https://refertest.pythonanywhere.com/job/openings")
.then((res) => res.json())
.then((json) => {
console.log(json);
setData(json.data);
setLoading(false);
})
.catch((err) => {
console.log(err);
setError(err.message);
setLoading(false);
});
}, []);
return (
<div className="App">
{loading && <div>Loading...</div>}
{!loading && error && <div>{error}</div>}
{!loading && data && (
<div>
{data.map((entry) => (
<div>
{entry.company} - {entry.designation}
</div>
))}
</div>
)}
</div>
);
}
URL: http://refertest.pythonanywhere.com/job/openings
描述:API 将获取包含所有详细信息的职位空缺列表。
方法:获取
Headers:
{
“tid”:3441
}
响应负载:
{
“状态码”:0,
"statusMessage": "工作数据获取成功"
“数据”: [
// json objects 列表,包含作业数据
]
}
卷曲:
curl --location --request GET 'http://refertest.pythonanywhere.com/job/openings'
--header 'tid: 3441'
一种方法是使用 fetch api. See working example in CodeSandbox. (Please note that I switched your url to https in my example.) More examples in the react docs。另见 axios。
示例:
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(undefined);
const [data, setData] = useState(undefined);
useEffect(() => {
fetch("https://refertest.pythonanywhere.com/job/openings")
.then((res) => res.json())
.then((json) => {
console.log(json);
setData(json.data);
setLoading(false);
})
.catch((err) => {
console.log(err);
setError(err.message);
setLoading(false);
});
}, []);
return (
<div className="App">
{loading && <div>Loading...</div>}
{!loading && error && <div>{error}</div>}
{!loading && data && (
<div>
{data.map((entry) => (
<div>
{entry.company} - {entry.designation}
</div>
))}
</div>
)}
</div>
);
}