axios在后台请求的数据怎么遍历到页面上

在前端页面中使用 Axios 向后台发送数据请求，一般需要遵循以下步骤：

1.导入 Axios 库，并初始化配置。

2.在需要请求数据的页面中，使用 Axios 发送 HTTP 请求，并接收返回的数据。

3.将返回的数据解析成 JavaScript 对象格式，然后通过遍历将数据渲染到需要展示的位置上。

下面分别对这些步骤进行简要介绍。

1.导入 Axios 库，并初始化配置。

在前端的 JS 文件中，首先需要按照以下方式封装 Axios，然后引入并配置。

import axios from 'axios';
 
const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 1000
});

export default instance;

在这段代码中，我们创建了一个 Axios 实例 instance ，并设置了访问后台数据请求地址的 baseURL ，以及请求超时时间。

2.在需要请求数据的页面中，使用 Axios 发送 HTTP 请求，并接收返回的数据。

在需要请求数据的页面中，使用 Axios 实例的 get() 或 post() 方法，发送数据请求，并接收 HTTP 响应结果。

instance.get('/api/user/1')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

这段代码中，我们调用了 instance.get() 方法，使用 GET 方式向后台请求数据。其中，参数 '/api/user/1' 是需要请求的地址。成功时，在控制台中打印返回的数据；失败时，在控制台中输出错误。

3.将返回的数据解析成 JavaScript 对象格式，然后通过遍历将数据渲染到需要展示的位置上。

在控制台中，我们可以看到后台返回的 JSON 格式数据。需要将数据解析成 JavaScript 对象格式，然后遍历展示到页面上。

let users = response.data;
let html = '';
for (let user of users) {
  html += `
    <div class="user">
      <p class="name">${user.name}</p>
      <p class="age">${user.age}</p>
    </div>`;
}
document.querySelector('#user-list').innerHTML = html;

在这段代码中，我们将后台返回的数据解析成 users 对象数组，并使用 for 循环遍历每个用户。然后，使用 html 模板字符串，将每个用户的 name 和 age 渲染到页面上的 .user 元素中。最后，使用 document.querySelector() 找到需要展示用户信息的容器 #user-list ，并将 html 内容更新到该容器内。

以上就是使用 Axios 获取后台数据，并把数据渲染到页面上的步骤。