使用axios和axios-mock-adapter处理onSubmit事件时请求未发送问题求助

核心错误 #

你混淆了axios-mock-adapter的配置逻辑和请求发送逻辑：

• mock.onPost()是用来定义Mock拦截规则的方法，不是发起请求的API。直接调用它只会返回一个Mock配置对象（包含reply、passThrough等方法），不会实际触发请求。
• 实际请求必须通过你创建的axios实例（api）来发送，mock适配器会自动拦截匹配的请求并返回预设响应。

修正步骤与代码示例 #

1. 保持axios实例配置不变（axios.js无需修改） #

import axios from 'axios';

let api = axios.create({
    baseURL: 'http://localhost:3500',
});

export default api

2. 修正Login.js的Mock配置与请求逻辑 #

import api from '../../../api/axios';
import MockAdapter from 'axios-mock-adapter';

// 初始化Mock适配器，绑定到你的axios实例
const mock = new MockAdapter(api);
const LOGIN_URL = '/users';

// 第一步：配置Mock拦截规则——匹配POST请求到LOGIN_URL时返回预设响应
mock.onPost(LOGIN_URL).reply((config) => {
  // 解析请求体（axios自动序列化JSON，这里反序列化获取参数）
  const { user, pwd } = JSON.parse(config.data);
  console.log('Mock拦截到登录请求：', { user, pwd });

  // 根据参数返回不同响应结果
  if (user && pwd) {
    return [200, {
      code: 200,
      message: '登录成功',
      data: { token: 'mock-token-xxxx' }
    }];
  } else {
    return [400, {
      code: 400,
      message: '账号或密码不能为空'
    }];
  }
});

const onSubmit = async data => {
  console.log('提交的表单数据：', data);
  const user = data.loginEmail;
  const pwd = data.password;

  try {
    // 第二步：用axios实例api发起请求，mock会自动拦截
    const response = await api.post(LOGIN_URL, { user, pwd }, {
      withCredentials: true
    });
    console.log('请求响应：', response.data);
  } catch (error) {
    console.error('请求失败：', error.response?.data || error.message);
  }
}

关键注意事项 #

• 不要手动JSON.stringify请求数据：axios会自动将对象序列化为JSON，并设置Content-Type: application/json请求头，无需手动配置。
• 若需要让特定请求绕过Mock（真正发送到服务器），可以使用passThrough()方法，比如：

  // 让GET /api/real-data绕过Mock，直接请求服务器
  mock.onGet('/api/real-data').passThrough();
  

• Mock规则建议集中配置：如果要全局复用Mock规则，建议在axios实例初始化的文件（axios.js）中统一配置Mock，避免在多个组件中重复初始化拦截器。

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