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

【问题标题】：Get all objects in an endpoint using axios if there is a pagination involved.如果涉及分页，请使用 axios 获取端点中的所有对象。
【发布时间】：2018-09-19 14:03:19
【问题描述】：

好的，所以我有一个带有数据列表的文件输入。这是渲染函数内部的 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]，我如何在我的选项中显示所有这些？

【问题讨论】：

标签： javascript reactjs axios

【解决方案1】：

由于获取不同页面内容的 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，得到全部数据。

【讨论】：