React + Axios:Rest API while loop all posts(来自 Response headers 的信息)
React + Axios: Rest API while loop all posts (with info from Response headers)
到目前为止,我有一个 Axios 获取 WP REST API 认证路由的请求。这可以很好地呈现每个请求最多 100 个帖子,还获取响应 header,这表明实际上总共有 894 个帖子和 9 个页面:
constructor(props) {
super(props);
this.state = {
loading: false,
posts: [],
error: "",
items: [],
result: [],
};
}
createMarkup = (data) => ({
__html: data,
});
componentDidMount() {
const wordPressSiteURL = clientConfig.siteUrl;
const authToken = localStorage.getItem("token");
const result = [];
this.setState({ loading: true }, () => {
axios
.get(`${wordPressSiteURL}/wp-json/kbs/v1/tickets?per_page=100`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${authToken}`,
},
})
.then((result) => {
let totalPosts = result.headers["x-wp-total"];
let totalPages = result.headers["x-wp-totalpages"];
console.log(
`there are ${totalPosts} posts divided in ${totalPages} pages`
);
this.setState({
loading: false,
items: result.data,
});
});
}); // this state
}
如何使用响应 header 知识动态循环,以便将所有帖子放在同一页面上? 请注意,加载时间不是问题在此应用程序的上下文中。
看来我必须用 while 循环重新实现相同的 get 请求,并包含一个 $totalPages
变量作为页面查询参数 '?page=$totalPages'
,但如果可以提供一些建议就更好了为我指出正确的方向,如何在此处构建此代码,因为即使走到这一步对我来说也是一个很大的挑战。
你的方法看起来不错!根据您所说的,听起来您完全走上了正轨 - 您需要使用循环在页面限制以下时继续请求更多数据。您可以使用这样的东西(显然这是未经测试的,但希望能让您走上正确的轨道):
async componentDidMount() {
const wordPressSiteURL = clientConfig.siteUrl;
const authToken = localStorage.getItem("token");
let posts = [];
let hasMorePages = true;
for (let pageNumber = 0; hasMorePages; pageNumber++) {
const params = new URLSearchParams();
params.append('per_page', 100);
if (pageNumber > 0) {
params.append('page', pageNumber);
}
const url = `${wordPressSiteURL}/wp-json/kbs/v1/tickets?${params}`;
const result = await axios.get(url, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${authToken}`,
},
});
posts = [...posts, result.data];
const postsOnThisPage = result.data.length;
const totalPages = result.headers["x-wp-totalpages"];
console.log(`Loaded page ${pageNumber}/${totalPages} which contained ${postsOnThisPage} posts.`)
hasMorePages = postsOnThisPage > 0 && pageNumber < totalPages;
}
this.setState({
loading: false,
posts,
});
}
注意:您也可以在构造函数中将 loading
的值设置为 true
,因为组件在挂载时要做的第一件事就是开始加载。这将为您节省一次额外的状态更改(为您节省一次额外的渲染)。
constructor(props) {
super(props);
this.state = {
loading: true,
posts: [],
error: "",
items: [],
result: [],
};
}
到目前为止,我有一个 Axios 获取 WP REST API 认证路由的请求。这可以很好地呈现每个请求最多 100 个帖子,还获取响应 header,这表明实际上总共有 894 个帖子和 9 个页面:
constructor(props) {
super(props);
this.state = {
loading: false,
posts: [],
error: "",
items: [],
result: [],
};
}
createMarkup = (data) => ({
__html: data,
});
componentDidMount() {
const wordPressSiteURL = clientConfig.siteUrl;
const authToken = localStorage.getItem("token");
const result = [];
this.setState({ loading: true }, () => {
axios
.get(`${wordPressSiteURL}/wp-json/kbs/v1/tickets?per_page=100`, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${authToken}`,
},
})
.then((result) => {
let totalPosts = result.headers["x-wp-total"];
let totalPages = result.headers["x-wp-totalpages"];
console.log(
`there are ${totalPosts} posts divided in ${totalPages} pages`
);
this.setState({
loading: false,
items: result.data,
});
});
}); // this state
}
如何使用响应 header 知识动态循环,以便将所有帖子放在同一页面上? 请注意,加载时间不是问题在此应用程序的上下文中。
看来我必须用 while 循环重新实现相同的 get 请求,并包含一个 $totalPages
变量作为页面查询参数 '?page=$totalPages'
,但如果可以提供一些建议就更好了为我指出正确的方向,如何在此处构建此代码,因为即使走到这一步对我来说也是一个很大的挑战。
你的方法看起来不错!根据您所说的,听起来您完全走上了正轨 - 您需要使用循环在页面限制以下时继续请求更多数据。您可以使用这样的东西(显然这是未经测试的,但希望能让您走上正确的轨道):
async componentDidMount() {
const wordPressSiteURL = clientConfig.siteUrl;
const authToken = localStorage.getItem("token");
let posts = [];
let hasMorePages = true;
for (let pageNumber = 0; hasMorePages; pageNumber++) {
const params = new URLSearchParams();
params.append('per_page', 100);
if (pageNumber > 0) {
params.append('page', pageNumber);
}
const url = `${wordPressSiteURL}/wp-json/kbs/v1/tickets?${params}`;
const result = await axios.get(url, {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${authToken}`,
},
});
posts = [...posts, result.data];
const postsOnThisPage = result.data.length;
const totalPages = result.headers["x-wp-totalpages"];
console.log(`Loaded page ${pageNumber}/${totalPages} which contained ${postsOnThisPage} posts.`)
hasMorePages = postsOnThisPage > 0 && pageNumber < totalPages;
}
this.setState({
loading: false,
posts,
});
}
注意:您也可以在构造函数中将 loading
的值设置为 true
,因为组件在挂载时要做的第一件事就是开始加载。这将为您节省一次额外的状态更改(为您节省一次额外的渲染)。
constructor(props) {
super(props);
this.state = {
loading: true,
posts: [],
error: "",
items: [],
result: [],
};
}