时间戳

首页 > 解决方案 > 如果涉及分页，请使用 axios 获取端点中的所有对象。

javascript - 如果涉及分页，请使用 axios 获取端点中的所有对象。

问题描述

好的，所以我有一个带有数据列表的文件输入。这是渲染函数内部的 JSX。

<Form.Input
list = 'materials' 
type = 'text'
placeholder='Material' 
name='material_id'
id='material_id'
value={material_id} 
onChange={this.onChange}
/>
  <datalist id='materials'>
  {
    returndata.map((item, i) => <option key={i} value={item.uuid}>{item.title}</option>)
  }
  </datalist>

我有这个 ComponentDidMount

   componentDidMount() {
    const token = localStorage.getItem('jwt');

    const apiBaseUrl = "http://127.0.0.1:8000/api/materials";

    const config = {
     headers: {
       'Authorization': "bearer " + token,
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     }
    }

    axios.get(apiBaseUrl, config)
     .then((response) => {
         console.log(response.data);
       this.setState({
         options: response.data
       })
      })
     .catch((error) => {
       console.log(error);
      });
   }

现在，我在 axios 中使用的那个端点只显示第一页，为了能够获取下一个对象，我必须使用http://127.0.0.1:8000/api/materials/?page=2等等很快。

第 1 页：

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Apple",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Banana",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Strawberry",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

第2页：

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Orange",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Grapes",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Kiwi",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

例如，我的选项只显示[Apple，Banana，Strawberry]，因为它们在第1页，但第2页包含[Orange，Grapes，Kiwi]，我怎样才能在我的选项中显示所有这些？

标签： javascriptreactjsaxios

解决方案

由于您获取不同页面内容的 API 不同，因此您必须调用所有 API 才能获取全部数据。如果您需要显示 3 个页面，则必须调用 3 个 API，axios您可以像这样执行并行 API 调用：

const api1 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=1'
      }));
const api2 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=2'
      }));
const api3 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=3'
      }));
const [api1_resp, api2_resp_api3_resp]= await Promise.all([api1, api1, api3]);

合并api1_resp, api2_resp_api3_resp并获取整个数据。

推荐阅读