Блог

Главная - Вопросы по программированию - Почему мой ответ Axios возвращает значение 404, даже если я устанавливаю макет ответа?

Почему мой ответ Axios возвращает значение 404, даже если я устанавливаю макет ответа?

#reactjs #axios #storybook

#reactjs #axios #сборник рассказов

Вопрос:

Я пытаюсь имитировать свои запросы REST для проекта react / ts при тестировании в Storybook с использованием Axios. Несмотря на то, что я устанавливаю ответ на объект массива, он по-прежнему, похоже, отвечает статусом «Ошибка запроса с кодом состояния 404».

Вот мой компонент, выполняющий вызов REST: TestPrompt.tsx

 const onClickHandler = () => {
    requestOrMock("http://localhost:9002/projectPlan/projectTasks?project=FAKEWID")
}

Вот метод, который мой компонент TestPrompt использует для отправки запроса: UtilityFunctions.ts

 import  axios from 'axios';

export const axiosMock = axios.create();

export const requestOrMock = async (uri: string) => {
    const response = axiosMock.get(uri);
    return response;
}

Вот мой тест, который имитирует ответ: Prompt.stories.tsx

 import * as React from "react";
import {storiesOf} from '@storybook/react';
import  TestPrompt  from "../components/common/Prompt";
import  MockAdapter from 'axios-mock-adapter';
import { axiosMock } from "../utils/utilityFunctions";

const mock = new MockAdapter(axiosMock);

const blankPromptRequestUri = "http://localhost:9002/projectPlan/projectTasks?project=FAKEWID";

const footballTeams = [
    {
        "descriptor": "New England Patriots",
        "id": "NewEnglandPatriots"
    },
    {
        "descriptor": "Seattle Seahawks",
        "id": "SeattleSeahawks"
    }
];

storiesOf('Components/MultiSelect', module)
  .add('Prompt1', () => {
    mock.onGet(blankPromptRequestUri).reply(200, footballTeams);
    return (
      <TestPrompt/>
    );
  })

Когда я нажимаю на этот компонент в storybook, он отправляет запрос на указанный URL-адрес, но получает ответ 404, а не указанный мной объект footballTeams. Есть идеи, что я сделал не так? Спасибо за вашу помощь.

Ответ №1:

Если я правильно понял вашу проблему, вам нужно вызвать OnGet() из mock для настройки макетной конечной точки, а затем отправить запрос на эту конечную точку.

 mock.onGet("/teams").reply(200, footballTeams);

storiesOf('Components/MultiSelect', module)
  .add('Prompt1', () => {
    axios.get("/teams")
    .then(res => console.log(res.data))
    return (
      <TestPrompt/>
    );
  })

Комментарии:

1. Я забыл упомянуть об этом в вопросе, но запрос к этой конечной точке отправляется, когда я нажимаю на компонент в Storybook, и именно тогда я вижу 404, а не ответ footballTeams. Вопрос обновлен.

2. Вы пытались удалить хост (localhost: 9002), просто сохранив маршруты?

Ответ №2:

Выполняемые запросы выполнялись относительно хоста, поэтому вместо «http://localhost:9002/projectPlan/projectTasks?project=FAKEWID » будучи отправленным, это было на самом деле «/projectPlan /projectTasks?project= FAKEWID». Вероятно, вам нужно будет только передать маршруты здесь.