Vue中如何从Promise对象中提取POST请求返回的JSON响应数据

response.json() 是异步方法，本身返回的是Promise对象，你没有等待它解析完成就直接打印，自然只能拿到Promise实例而不是实际的JSON数据。

1. 修正前端代码 #

主要修改两处：

• headers 中请求头名调整为标准的 Content-Type，避免部分后端框架解析请求异常
• 对 response.json() 加 await 等待解析得到实际数据

async createModule() {
  let response = await fetch('create_module', {
      method: 'POST',
      headers: {
          "Content-Type": "application/json", // 修正字段名
          "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value,
      },
      body: JSON.stringify({
          code: document.getElementById('code').value,
          module_name: document.getElementById('module_name').value,
          max_students: document.getElementById('max_students').value,
          start_date: document.getElementById('start_date').value,
      })
  });
  if (response.ok) {
      // 加await等待JSON解析完成
      const data = await response.json();
      // 现在可以直接访问返回的字段
      console.log(data);
      console.log(data.module_name, data.code);
      // 执行视图更新逻辑
      this.modules.push(data);
  } else {
      alert("failed to create module");
  }
}

2. 操作说明 #

• 解析得到的data对象和你后端JsonResponse返回的结构完全一致，直接取对应字段使用即可
• 你原有后端代码不需要做任何修改，返回的JSON结构符合要求

内容的提问来源于stack exchange，提问作者Alexander Earl