Повідомлення про переклад ШІ

Ця документація була автоматично перекладена штучним інтелектом.

Запити

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 Default Config.

Перехоплювачі запитів та відповідей

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

Приклад перехоплювача запитів

// Використання qs для серіалізації параметрів params
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>
  );
};

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

Повідомлення про переклад ШІ

Ця документація була автоматично перекладена штучним інтелектом.

Запити

Типові місця, де можна отримати Context, включають:

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

ctx.api.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

Зміна налаштувань за замовчуванням

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

Докладніше про доступні конфігурації дивіться в Axios Default Config.

Перехоплювачі запитів та відповідей

Приклад перехоплювача запитів

// Використання qs для серіалізації параметрів params
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

Заголовок	Опис
`X-App`	Вказує поточний застосунок у сценаріях з кількома застосунками
`X-Locale`	Поточна мова (наприклад: `zh-CN`, `en-US`)
`X-Hostname`	Ім'я хоста клієнта
`X-Timezone`	Часовий пояс клієнта (наприклад: `+08:00`)
`X-Role`	Поточна роль
`X-Authenticator`	Метод автентифікації поточного користувача

💡 Підказка
Ці заголовки запитів зазвичай автоматично вставляються перехоплювачами, тому їх не потрібно встановлювати вручну. Лише в особливих випадках (наприклад, у тестових середовищах або сценаріях з кількома екземплярами) їх потрібно додавати вручну.

Використання в компонентах

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

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

#Запити

#ctx.api.request()

#ctx.api.axios

#Перехоплювачі запитів та відповідей

#Приклад перехоплювача запитів

#Приклад перехоплювача відповідей

#Власні заголовки запитів NocoBase Server

#Використання в компонентах

#Використання з useRequest від ahooks

Запити

ctx.api.request()

ctx.api.axios

Перехоплювачі запитів та відповідей

Приклад перехоплювача запитів

Приклад перехоплювача відповідей

Власні заголовки запитів NocoBase Server

Використання в компонентах

Використання з `useRequest` від ahooks

Запити

ctx.api.request()

ctx.api.axios

Перехоплювачі запитів та відповідей

Приклад перехоплювача запитів

Приклад перехоплювача відповідей

Власні заголовки запитів NocoBase Server

Використання в компонентах

Використання з `useRequest` від ahooks