解决后端有数据返回或后端数据无返回前端页面为空白的情况

Vamp_Piece2024-06-30 8:22

解决后端有数据返回或后端数据无返回前端页面为空白的情况

一、解决后端有数据返回前端页面为空白的情况

场景描述： 前端使用axios请求了后端接口，但是后端接口并没有数据返回，导致前端页面空白

这种情况前端为正常情况，无需多做分析，是后端接口导致的前端页面无数据渲染

场景描述： 前端首次进入页面，使用axios请求了后端接口，直接在页面中使用onMount加载数据，当再次刷新页面后但是后端接口有数据返回，或者是请求的接口没有数据返回，前端页面无法渲染出数据，导致页面空白

这种情况是因为请求的后端接口不是异步的，需将请求后端接口改成异步的接口

1.在此之前需确保绑定的数据是否为响应式的

2.使用async、await将接口请求变成异步请求

3.使用Promise/all

代码如下：

javascript 复制代码

// async、await写法：
 async function request() {
      await find(id).then(data => {
      	// 确保 state.form.list为响应式数据
        state.form.list = data;
      });
      // 若有其他接口请求均改成async、await形式
    }
 // 渲染页面
 onMount(request)

javascript 复制代码

// Promise/all写法：
  function request() {
      Promise.all(find(id)).then(()=>{});
    }