Мок-адаптер Axios возвращает 404 на все запросы

При попытке настроить axios для имитации запросов к неполному серверу API, который я использую для создания внешнего интерфейса, я получаю 404 ответа на все запросы, даже те, которые вообще не имитируются.

const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/"
});
const mock = new MockAdapter(api);

// setup the mock url
mock.onGet("/test", ({ url }) => {
  console.info(url);
  return import(`./mocks/${url}.json`);
});

async function testMock() {
  try {
    const shouldBeMocked = await api.get("/test");
    console.info(shouldBeMocked);
  } catch (err) {
    console.info("this should have been mocked");
    console.info(err);
  }
  try {
    const isRealURL = await api.get("/json/1");
    console.info(isRealURL);
  } catch (err) {
    console.info("this should have fetched from the api");
    console.info(err);
  }
  try {
    const isRealURLWithFetch = await fetch(
      "https://jsonplaceholder.typicode.com/json/1"
    );
    const data = await isRealURLWithFetch.text();
    console.info(data);
  } catch (err) {
    console.info("this won't be logged");
    console.info(err);
  }
}

Пример Codesandbox

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
854
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы неправильно использовали axios-mock-adapter, вот сигнатура метода mock.onGet() для "axios-mock-adapter": "^1.19.0".

type RequestMatcherFunc = (
  matcher?: string | RegExp,
  body?: string | AsymmetricRequestDataMatcher,
  headers?: AsymmetricHeadersMatcher
) => RequestHandler;

Как видите, второй параметр НЕ является функцией «ответить». Вы должны передать функцию методу reply.

mock.onGet("/test").reply(async ({ url }) => {
  console.info(url);
  return [200, await import(`./mocks/${url}.json`)];
});

Другие вопросы по теме