异步任务新手开发登录UI：无法获取服务器响应状态码求助

Hey there! Let's work through this issue you're having with your login UI. It's totally normal to hit these kinds of snags when getting started with async tasks, so let's break down possible causes and fixes step by step.

Common Causes & Fixes #

1. You're mixing up HTTP status codes and custom business codes #

First, let's clarify two key things:

• HTTP status codes: These are standard 3-digit codes (like 401 for unauthorized, 200 for success) sent in the response headers.
• Custom business codes: Many servers wrap error details in the response body (e.g., a code field like 40001 for invalid credentials).

If you're trying to access a custom code directly from the raw response object (instead of the parsed response body), you'll run into issues. Here's an example of what might go wrong vs. the right approach:

Wrong (trying to access business code from raw response):

fetch('/api/login', { method: 'POST', body: yourFormData })
  .then(response => {
    // ❌ If the error code lives in the response body, this won't work
    if (response.code === 40001) {
      alert('Invalid credentials');
    }
  });

Right (parse the response body first):

fetch('/api/login', { method: 'POST', body: yourFormData })
  .then(response => {
    // First check HTTP status to catch network-level errors
    if (!response.ok) {
      // Parse the response body to get custom error details
      return response.json().then(errData => { throw errData; });
    }
    return response.json();
  })
  .then(successData => {
    // Handle successful login flow
  })
  .catch(err => {
    // Now access the custom business code from parsed data
    if (err.code === 40001) {
      alert('Invalid credentials');
    } else {
      alert('Something went wrong');
    }
  });

2. Async timing issues (not awaiting responses properly) #

If you're using async/await, make sure you're actually awaiting the fetch call and response parsing. Skipping await means you're trying to access properties on a Promise instead of the actual response object:

Wrong (no await on fetch):

async function handleLogin() {
  const response = fetch('/api/login', { method: 'POST', body: yourFormData });
  // ❌ response is a Promise here, not the actual response object
  if (response.status === 401) {
    alert('Invalid credentials');
  }
}

Right (await all async steps):

async function handleLogin() {
  try {
    const response = await fetch('/api/login', { method: 'POST', body: yourFormData });
    // Check HTTP status first
    if (!response.ok) {
      const errData = await response.json();
      if (errData.code === 40001) {
        alert('Invalid credentials');
      }
      return;
    }
    const successData = await response.json();
    // Handle successful login
  } catch (err) {
    console.error('Login error:', err);
  }
}

3. Request middleware/interceptors are modifying the response #

If you're using a library like Axios, or have a custom request wrapper, check if interceptors or middleware are altering the response structure. For example, some wrappers automatically return only the data field of the response, so you can't access status directly from the returned value:

// Example of a wrapper that might hide status code
function customFetch(url, options) {
  return fetch(url, options)
    .then(response => response.json()); // Only returns the body, not full response
}

// So when you use it:
customFetch('/api/login', { method: 'POST', body: yourFormData })
  .then(data => {
    // ❌ data doesn't have a `status` property here
    // You need to check data.code instead, or modify the wrapper to return the full response
  });

4. Verify the actual server response via DevTools #

Even if the server says all responses have status codes, let's confirm what's really being sent:

1. Open your browser's DevTools (F12) → go to the Network tab
2. Submit your login form with invalid credentials
3. Find the login request in the list, click on it
4. Check the Headers tab for the HTTP status code, and the Response tab for the full response body

This will tell you exactly where the status/code is located (headers vs. body) and ensure the server is sending what you expect.

内容的提问来源于stack exchange，提问作者Galux Trabakoulas