javascript - 如何在 sapper 上获得正确的 http 状态代码？

Question

我创建了注册页面，并在没有任何输入的情况下提交。
虽然后端服务器提高了 400 响应，但我得到了 200
我怎样才能在我的 js 代码上获得正确的状态？






下图是对我的后端服务器的 api 调用并响应了 400 状态



api.js

const base = 'https://gyma9z0wme.execute-api.ap-northeast-2.amazonaws.com/dev';
// const base = 'http://127.0.0.1:8000';

function send({ method, path, data, token }) {
    const fetch = process.browser ? window.fetch : require('node-fetch').default;

    const opts = { method, headers: {} };

    if (data) {
        opts.headers['Content-Type'] = 'application/json';
        opts.body = JSON.stringify(data);
    }

    if (token) {
        opts.headers['Authorization'] = `Bearer ${token}`;
    }

    return fetch(`${base}/${path}`, opts)
        .then(r => r.text())
        .then(json => {
            try {
                return JSON.parse(json);
            } catch (err) {
                return json;
            }
        });
}

export function get(path, token) {
    return send({ method: 'GET', path, token });
}

export function del(path, token) {
    return send({ method: 'DELETE', path, token });
}

export function post(path, data, token) {
    return send({ method: 'POST', path, data, token });
}

export function put(path, data, token) {
    return send({ method: 'PUT', path, data, token });
}

实用程序.js

export function post(endpoint, data) {
    return fetch(endpoint, {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(r => r.json());
}

身份验证/注册.js

import * as api from "api.js";

export function post(req, res) {
  const user = req.body;

  api.post("users", user).then(response => {
    if (response.user) {
      req.session.user = response;
    }

    res.setHeader("Content-Type", "application/json");

    res.end(JSON.stringify(response));
  });
}

注册/索引.svelte

<script>
  import { goto, stores } from "@sapper/app";
  import ListErrors from "../_components/ListErrors.svelte";
  import { post } from "utils.js";
  const { session } = stores();
  let username = "";
  let email = "";
  let password = "";
  let errors = null;
  async function submit(event) {
    const response = await post(`auth/register`, { username, email, password });
    // TODO handle network errors
    if (response.status === 400){
      errors = response;
    }
    if (response.sn) {
      $session.sn = response.sn;
      goto("/");
    }
  }
</script>

<svelte:head>
  <title>회원가입 • Razberry</title>
</svelte:head>

<div class="auth-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">회원가입</h1>
        <p class="text-xs-center">
          <a href="/login">이미 회원인가요?</a>
        </p>

        <ListErrors {errors} />

        <form on:submit|preventDefault={submit}>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="text"
              placeholder="Your Name"
              bind:value={username} />
          </fieldset>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="text"
              placeholder="Email"
              bind:value={email} />
          </fieldset>
          <fieldset class="form-group">
            <input
              class="form-control form-control-lg"
              type="password"
              placeholder="Password"
              bind:value={password} />
          </fieldset>
          <button class="btn btn-lg btn-primary pull-xs-right">회원가입</button>
        </form>
      </div>
    </div>
  </div>
</div>

我正在使用现实世界的代码。

https://github.com/sveltejs/realworld

尝试在此处使用不正确的信息登录。你可以得到相同的结果

https://realworld.svelte.dev/login

Answer 1

可能是服务器通过 http 以 200/OK 响应请求，即使后端出现错误。后端的不良行为，但现实世界......

另一方面，您可以添加 .catch(()=>{})在 api.js 中发送到您的 fetch()ing 函数的语句以处理错误。

响应状态不是错误的一部分。如您所料，状态可以在 response.status 中找到。
因此服务器以 200/OK HTTP 状态响应。

看一下响应体。我知道一个后端以 200/ok 响应，并且在正文中是一个字符串“发生错误”:P