Запросы

NocoBase предоставляет APIClient, построенный на базе Axios. С его помощью вы можете отправлять HTTP-запросы из любого места, где доступен объект Context.

Обычно Context доступен в следующих местах:

app.context
engine.context
plugin.context
model.context

ctx.api.request()

Метод ctx.api.request() — это наиболее часто используемый способ отправки запросов. Его параметры и возвращаемые значения полностью соответствуют axios.request().

request<T = any, R = AxiosResponse<T>, D = any>(
  config: AxiosRequestConfig<D>,
): Promise<R>;

Базовое использование

await ctx.api.request({
  url: 'users:list',
  method: 'get',
});

Вы можете напрямую использовать стандартные конфигурации запросов Axios:

await ctx.api.request({
  url: 'users:create',
  method: 'post',
  data: {
    name: 'Tao Tao',
  },
});

ctx.api.axios

ctx.api.axios — это экземпляр AxiosInstance, с помощью которого вы можете изменять глобальные настройки по умолчанию или добавлять перехватчики запросов.

Изменение настроек по умолчанию

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Более подробную информацию о доступных настройках вы найдете в документации Axios по настройкам по умолчанию.

Перехватчики запросов и ответов

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

Пример перехватчика запросов

// Использование qs для сериализации параметров
axios.interceptors.request.use((config) => {
  config.paramsSerializer = (params) =>
    qs.stringify(params, {
      strictNullHandling: true,
      arrayFormat: 'brackets',
    });
  return config;
});

// Пользовательские заголовки запросов
axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = `Bearer token123`;
  config.headers['X-Hostname'] = 'localhost';
  config.headers['X-Timezone'] = '+08:00';
  config.headers['X-Locale'] = 'zh-CN';
  config.headers['X-Role'] = 'admin';
  config.headers['X-Authenticator'] = 'basic';
  config.headers['X-App'] = 'sub1';
  return config;
});

Пример перехватчика ответов

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // При ошибке запроса отобразить унифицированное уведомление
    ctx.notification.error({
      message: 'Ошибка ответа на запрос',
    });
    return Promise.reject(error);
  },
);

Пользовательские заголовки запросов NocoBase Server

Ниже приведены пользовательские заголовки запросов, поддерживаемые NocoBase Server. Их можно использовать в сценариях с несколькими приложениями, для интернационализации, при работе с несколькими ролями или методами аутентификации.

Заголовок	Описание
`X-App`	Указывает текущее приложение в сценариях с несколькими приложениями
`X-Locale`	Текущий язык (например, `zh-CN`, `en-US`)
`X-Hostname`	Имя хоста клиента
`X-Timezone`	Часовой пояс клиента (например, `+08:00`)
`X-Role`	Текущая роль
`X-Authenticator`	Метод аутентификации текущего пользователя

💡 Совет
Эти заголовки запросов обычно автоматически внедряются перехватчиками и не требуют ручной установки. Вручную их нужно добавлять только в особых случаях (например, в тестовых средах или сценариях с несколькими экземплярами).

Использование в компонентах

В компонентах React вы можете получить объект контекста с помощью useFlowContext(), а затем использовать ctx.api для отправки запросов.

import { useFlowContext } from '@nocobase/client';

const MyComponent = () => {
  const ctx = useFlowContext();

  const fetchData = async () => {
    const response = await ctx.api.request({
      url: '/api/posts',
      method: 'get',
    });
    console.log(response.data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return <div>Загрузка...</div>;
};

Использование с useRequest из ahooks

В реальной разработке вы можете использовать хук useRequest из библиотеки ahooks, чтобы более удобно управлять жизненным циклом и состоянием запросов.

import { useFlowContext } from '@nocobase/client';
import { useRequest } from 'ahooks';

const MyComponent = () => {
  const ctx = useFlowContext();

  const { data, loading, error, refresh } = useRequest(() =>
    ctx.api.request({
      url: 'posts:list',
      method: 'get',
    }),
  );

  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка запроса: {error.message}</div>;

  return (
    <div>
      <button onClick={refresh}>Обновить</button>
      <pre>{JSON.stringify(data?.data, null, 2)}</pre>
    </div>
  );
};

Такой подход делает логику запросов более декларативной, автоматически управляя состояниями загрузки, обработкой ошибок и логикой обновления, что очень удобно для использования в компонентах.

#Запросы

#ctx.api.request()

#ctx.api.axios

#Перехватчики запросов и ответов

#Пример перехватчика запросов

#Пример перехватчика ответов

#Пользовательские заголовки запросов NocoBase Server

#Использование в компонентах

#Использование с useRequest из ahooks