如何使用 fetch() 通过 rails 后端将自定义错误传递到 JavaScript 前端

Question

我有一个用于 D&D 的小型 NPC 生成器（非玩家角色）。我已经设置了一个 rails API 后端和 Javascript 前端，并且能够传递自定义消息以在用户删除时提醒他们。我现在正试图在他们创建新 NPC 时防止出现不良数据。我已经验证了我的后端，以便创建一个新的 NPC，他们需要输入一个“名称”。那部分有效，我收到了警报。但是，我传递的自定义 JSON 消息没有出现。由于名称不存在，它会发出“未定义”警报或未捕获的引用错误。

我已经尝试使用 catch 和 if response.ok 来让它工作，但我无法全神贯注地让自定义错误显示在警报中。

请参阅下面用于我的控制器的 CREATE 代码和来自我的适配器的 post 请求的 fetch() 代码。如果需要，还有 link 到我的完整 git 仓库。 https://github.com/Santiago548/NPC_Generator

下面是我从控制器创建的，带有渲染 JSON 错误，当用户未输入名称时，我试图将其传递给用户。

 def create
        npc = Npc.new(npc_params)

        if npc.save
            render json: NpcSerializer.new(npc)
        else
            render json: {errors: 'NPC could not be created'}
        end
    end

下面是我的 javascript 中的 fetch() 函数，它确实创建了

        fetch(this.baseUrl, configNpcRand)
        .then(res => res.json())
        .then(json => {
            let npc = new Npc(json.data.attributes)
            npc.attachToDomNpcList() 
        })

        randomNpcForm.reset()
        npcForm.reset()
    }

Answer 1

作为第一项措施，您的表单必须包含验证以告知用户详细信息不完整，而无需 POST 返回。 See here

在后面，关键是要有正确的错误处理。我会尝试以下操作：

  def create
    npc = Npc.new(npc_params)
    if npc.save!
      begin
        render json: NpcSerializer.new(npc)
      rescue ActiveRecord::RecordInvalid => invalid
        render json: { error: invalid }, status: :unprocessable_entity
      end
    end

此处，您尝试 save!，这将在记录无效时引发错误。（假设您对模型进行了验证）

在前面，调用也需要适当的错误处理

async function postNPC(baseUrl, configNpcRand) {
  try {
    const response = await fetch(baseUrl, configNpcRand);
    if(response.ok){
      npcData = await response.json()
      return npcData // Don't handle NPC creation here
    }
// This  handles the case where the fetch is successful,
// but the server doesn't return status OK, as will happen when
// everything is fine but the NPC params are incomplete.
    return { error: 'Please fill in all the NPC details' };
  } 
  catch(e) {
  // This error would handle other errors
  // for example, when there is no response from the server
    return { error: e };
  }  
}

async/await 语法提高了可读性

如何使用 fetch() 通过 rails 后端将自定义错误传递到 JavaScript 前端

how to pass a custom error through rails backend to JavaScript front end with fetch()

javascript

ruby-on-rails

try-catch

fetch