logologo
शुरू करें
मार्गदर्शिका
विकास
प्लगइन
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
शुरू करें
मार्गदर्शिका
विकास
प्लगइन
API
logologo

क्विक स्टार्ट

Plugin डेवलपमेंट अवलोकन
अपना पहला Plugin लिखें
प्रोजेक्ट डायरेक्टरी स्ट्रक्चर

सर्वर-साइड डेवलपमेंट

अवलोकन
Plugin
कलेक्शन डेटा टेबल
डेटाबेस ऑपरेशन
DataSourceManager डेटा सोर्स प्रबंधन
ResourceManager रिसोर्स प्रबंधन
ACL परमिशन कंट्रोल
Middleware
Cache
Event
Context रिक्वेस्ट कॉन्टेक्स्ट
माइग्रेशन अपग्रेड स्क्रिप्ट
Logger
Telemetry
I18n इंटरनेशनलाइजेशन
Command लाइन
CronJobManager शेड्यूल्ड टास्क प्रबंधन
Test

क्लाइंट-साइड डेवलपमेंट

अवलोकन
Plugin
Context
Router
ACL परमिशन कंट्रोल
DataSourceManager डेटा सोर्स प्रबंधन
Resource
Request
Styles & Themes
Logger
I18n इंटरनेशनलाइजेशन
Test

अन्य

Plugin अपग्रेड गाइड
भाषा सूची
डिपेंडेंसी प्रबंधन
बिल्ड
Previous PageResource
Next PageStyles & Themes
TIP

यह दस्तावेज़ AI द्वारा अनुवादित किया गया है। किसी भी अशुद्धि के लिए, कृपया अंग्रेजी संस्करण देखें

#अनुरोध

NocoBase, Axios पर आधारित एक APIClient प्रदान करता है, जिसका उपयोग आप किसी भी ऐसी जगह से 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 सर्वर कस्टम अनुरोध हेडर

NocoBase सर्वर द्वारा समर्थित कस्टम अनुरोध हेडर नीचे दिए गए हैं, जिनका उपयोग मल्टी-ऐप, अंतर्राष्ट्रीयकरण, मल्टी-रोल या मल्टी-ऑथेंटिकेशन परिदृश्यों के लिए किया जा सकता है।

हेडरविवरण
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>;
};

#ahooks के useRequest के साथ उपयोग करना

वास्तविक विकास में, आप अनुरोध के जीवनचक्र और स्थिति को अधिक आसानी से संभालने के लिए ahooks द्वारा प्रदान किए गए useRequest हुक का उपयोग कर सकते हैं।

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>
  );
};

यह तरीका अनुरोध लॉजिक को अधिक डिक्लेरेटिव बनाता है, लोडिंग स्थिति, त्रुटि हैंडलिंग और रीफ्रेश लॉजिक को स्वचालित रूप से प्रबंधित करता है, जो कंपोनेंट्स में उपयोग के लिए बहुत उपयुक्त है।