前端向后端传递评分数据的其他方式及Fetch/Axios使用疑问

一、HTML表单提交之外的传输方式 #

• 原生AJAX（XMLHttpRequest）：早期异步请求方案，无需刷新页面，但代码写法繁琐，现在很少直接使用。
• Fetch API：浏览器原生提供的现代异步请求接口，基于Promise，语法简洁。
• Axios：第三方HTTP客户端库，适配浏览器和Node.js，封装了诸多便捷功能。
• WebSocket：适用于实时双向通信场景（比如提交后即时同步评分数据），但普通评分需求一般用不到。

二、使用Fetch发送POST请求的效果 #

• 实现无刷新提交，用户提交评分后无需跳转页面，可直接在当前页面展示提交结果，体验更流畅。
• 无需额外引入依赖，仅用浏览器原生API即可，减少项目体积。
• 基础用法示例：

const submitRating = async (ratingValue) => {
  try {
    const res = await fetch('/api/rating/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ rating: ratingValue }),
      credentials: 'include' // 若需要携带Cookie验证身份，需添加此配置
    });
    const data = await res.json();
    if (res.ok) {
      console.log('提交成功:', data.msg);
      // 这里可以添加DOM操作，比如显示成功提示
    } else {
      console.error('提交失败:', data.err);
    }
  } catch (err) {
    console.error('网络出错:', err);
  }
};

• 注意：旧版浏览器（如IE）不支持Fetch，需引入polyfill兼容；默认不会携带Cookie，有身份验证需求时需手动配置credentials。

三、使用Axios发送POST请求的效果 #

• 同样支持无刷新提交，提升用户体验。
• 自动处理JSON序列化与解析，无需手动转换数据，代码更简洁。
• 内置请求/响应拦截器，可统一处理请求头、错误信息（比如给所有请求添加Token，或统一捕获401状态做跳转）。
• 基础用法示例：

import axios from 'axios';

// 可提前配置全局默认项，比如基础URL、请求头
axios.defaults.baseURL = '/api';
axios.defaults.withCredentials = true;

const submitRating = async (ratingValue) => {
  try {
    const res = await axios.post('/rating/submit', { rating: ratingValue });
    console.log('提交成功:', res.data.msg);
    // 执行页面更新逻辑
  } catch (err) {
    if (err.response) {
      // 后端返回错误状态码
      console.error('提交失败:', err.response.data.err);
    } else {
      // 网络层面出错
      console.error('网络异常:', err);
    }
  }
};

• 兼容性更好，覆盖多数旧浏览器；支持请求取消，可避免用户重复点击导致的多次提交问题。

内容的提问来源于stack exchange，提问作者mostafa meerzad