将 axios 和 axios-mock-adapter 用于 onSubmit 事件

Question

I'm trying to use axios and axios-mock-adapter in one place to aggregate more mocks and then export the axios instance to use it wherever I want:

axios.js

import axios from 'axios';

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

export default api

Login.js

import api from '../../../api/axios';
import MockAdapter from 'axios-mock-adapter';
let mock = new MockAdapter(api);
const LOGIN_URL = '/users';

const onSubmit = async data => {

 console.log(data);

 const user = data.loginEmail;
 const pwd = data.password

 const response = await mock.onPost(LOGIN_URL,
  JSON.stringify({ user, pwd }),
  {
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
  }
 );

console.log(response);
}

But I get this response:

{reply: ƒ, replyOnce: ƒ, passThrough: ƒ, abortRequest:ƒ,abortRequestOnce: ƒ, …}abortRequest: ƒ ()abortRequestOnce: ƒ()networkError: ƒ ()networkErrorOnce: ƒ ()passThrough: ƒ passThrough()reply: ƒ reply(code, response, headers)replyOnce: ƒ replyOnce(code, response, headers)timeout: ƒ ()timeoutOnce: ƒ ([[Prototype]]: Object

Can anyone help me? What did I miss?

It sends status 200 but it doesn't send any request to the server and it's like not connecting to the server

Answer 1

It looks like you're trying to mock a GET request to the '/users' endpoint with the axios-mock-adapter, but in your onSubmit function you are making a POST request to the same endpoint. That's why you're getting a 404 error. You can either change the mock.onGet to mock.onPost or change the onSubmit function to make a GET request. Also, you should check the baseURL that you are using in the axios.create() method in axios.js and make sure it's the correct one. Also, check if you have setup your server properly and it's running on the correct port. If you continue to have issues you might want to check the browser's devtools.network tab and check the request being made and the corresponding response.

Answer 2

axios.js

import axios from 'axios';

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

export default api

The solution was about to change the Login.js

// ** API
import api from '@api';
const LOGIN_URL = '/auth'

And onSubmit Event

  // !! On Submit Event
  const onSubmit = async data => {
    const user = data.username;
    const pass = data.password;

    try {
      const response = await api.post(LOGIN_URL,
        JSON.stringify({ user, pass }),
        {
            headers: { 'Content-Type': 'application/json' },
            withCredentials: true
        }
      );
      .
      .
      .
   }