Axios: प्रतिक्रिया इंटरसेप्टर (AxiosResponse समस्या) का उपयोग करते समय टाइपस्क्रिप्ट के साथ Axios का उपयोग कैसे करें

को निर्मित 30 अप्रैल 2018 · 50टिप्पणियाँ · स्रोत: axios/axios

सारांश

एक प्रोजेक्ट में मैं टाइपस्क्रिप्ट (टीएस) में माइग्रेट कर रहा हूं, मेरे पास एक प्रतिक्रिया इंटरसेप्टर है r => r.data । मैं TS को कैसे सूचित करूँ कि मैं AxiosResponse प्रकार की अपेक्षा नहीं कर रहा हूँ? मैंने as Array<... का उपयोग करके ओवरराइड करने का प्रयास किया है लेकिन यह काम नहीं करता है क्योंकि AxiosResponse को Array के रूप में नहीं डाला जा सकता है (उदाहरण के लिए लंबाई नहीं है)।

धन्यवाद!

संदर्भ

अक्ष संस्करण: 0.16.2
पर्यावरण: विजुअल स्टूडियो कोड

स्रोत

rssfrncs

👍58 ❤20 🚀4

सबसे उपयोगी टिप्पणी

मैं अपने axios.d.ts में AxiosResponse को ओवरराइड करता हूं:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

Army-U 18 दिस॰ 2018

👍44 🎉19 🚀12 ❤12 😄5

सभी 50 टिप्पणियाँ

axios.request<T>(...args) शैली परिभाषा का प्रयोग करें।
सरणी में अंतिम प्रतिक्रिया-इंटरसेप्टर परोक्ष रूप से (currentResponse: any) => T जैसे इंटरफ़ेस का अनुपालन करता है

तो अगर आपके पास data कुछ ऐसा है:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

तब आप कह सकते हैं:

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

zcei 2 मई 2018

🎉43 👍40 ❤5 👎4

@zcei ऊह वास्तव में यह वैश्विक इंटरसेप्टर के लिए काम नहीं करेगा जैसे axios.interceptors.response.use

rssfrncs 2 मई 2018

👍15

मुझे लगता है कि यह करता है - इंटरसेप्टर वर्तमान में बहुत "आराम से" टाइप किए गए हैं (उर्फ any ), इसलिए आप केवल प्रतिक्रिया इंटरसेप्टर संलग्न कर सकते हैं और इसे (r: any): any => r.data (जो मूल रूप से ऐसा है जैसे आप गैर-सख्त मोड में किसी भी टाइपिंग को छोड़ दें)।

केवल उस बिंदु पर जहां आप axios.request पर कॉल करते हैं, आप इसे सामान्य रूप से कॉन्फ़िगर कर सकते हैं, जो तब data संपत्ति के प्रकार के रूप में पारित हो जाता है।

(वास्तव में मैंने उपरोक्त कोड स्निपेट में गलती की है, data वास्तव में AxiosResponse<ServerData> है जिसमें .data नामक एक फ़ील्ड है जिसमें ServerData प्रकार है - इसे अपडेट किया गया)

zcei 2 मई 2018

👍1

@zcei हाय क्षमा करें, लेकिन यह वास्तव में मेरे उदाहरण के साथ काम नहीं करता है, मैंने इस मुद्दे को उजागर करने के लिए एक कोडसैंडबॉक्स बनाया है।

यहां इसकी जांच कीजिए

rssfrncs 7 जून 2018

👎2

एक ही समस्या होने पर, इंटरसेप्टर को अनिवार्य रूप से उबाला जा सकता है:

this.instance.interceptors.response.use(response => response.data);

इसके बावजूद, वापसी प्रकार

this.instance.post<string>(...);

AxiosPromise<string> है, जो डेटा को लपेटे जाने की अपेक्षा करता है।

Etheryte 13 जून 2018

👍1

यह जानबूझकर है। आपको इंटरसेप्टर में डेटा को बदलना है, लेकिन प्रतिक्रिया कुंजी को फहराना नहीं है।

https://github.com/axios/axios/blob/0b3db5d87a60a1ad8b0dce9669dbc10483ec33da/lib/core/dispatchRequest.js#L63 -L67

मैंने सोचा था कि आपके पास एक सर्वर प्रतिक्रिया होगी जैसे

{
  "data": {
    "foo": 42
  }
}

और response.data.data नेस्टिंग से छुटकारा पाना चाहता था। यदि आप इंटरसेप्टर में response.data लौटाते हैं, तो आप बाद में इसे response.data.data.foo के बजाय response.data.data.foo response.data.foo के माध्यम से एक्सेस कर सकते हैं।

लेकिन response.foo तक पहुंचने से काम नहीं चलेगा, क्योंकि यह "रूट" प्रतिक्रिया स्तर है जो प्रतिक्रिया कोड और समान जैसे अन्य सामानों का ट्रैक रखता है।

zcei 13 जून 2018

क्षमा करें, लेकिन मैं आपके आधार से सहमत नहीं हूं, कम से कम कार्यक्षमता-वार तो नहीं।
डेटा संपत्ति को खोलने के लिए इंटरसेप्टर का उपयोग किए बिना, मुझे करना होगा

this.instance.post<string>(...).then(response => response.data);
this.instance.get<number>(...).then(response => response.data);

_every_ समापन बिंदु में जिसे मैं परिभाषित करता हूं। उस सभी कोड दोहराव में क्या बात है?

जब भी कोई अनुरोध सफल होता है, जिसमें then का अर्थ है, मुझे वास्तव में प्रतिक्रिया कोड आदि की परवाह नहीं है। मुझे केवल प्रतिक्रिया कोड की परवाह है यदि कुछ _didn't_ काम करता है, और यही त्रुटि हैंडलर हैं , दोनों इंटरसेप्टर पर और साथ ही विशिष्ट समापन बिंदुओं पर।

this.instance.interceptors.response.use(response => {
  // Everything went well, pass only relevant data through
  return response.data;
}, error => {
  // Something went wrong, figure out how to handle it here or in a `.catch` somewhere down the pipe
});

Etheryte 13 जून 2018

जब भी कोई अनुरोध सफल होता है, जिसका तत्कालीन अर्थ होता है, मुझे वास्तव में प्रतिक्रिया कोड की परवाह नहीं है

ठीक है, हो सकता है कि आप किसी अन्य जानकारी की परवाह न करें, लेकिन HTTP क्लाइंट का उपयोग करने वाले प्रत्येक व्यक्ति के लिए यह बाध्य करना कि आप केवल शरीर की परवाह करते हैं, वास्तव में कोई समाधान नहीं है।
सफल कॉल पर भी स्टेटस कोड और हेडर के लिए पर्याप्त कानूनी उपयोग के मामले हैं। जैसे 204 बनाम 200 पर भेद करना, दर सीमा हेडर की जांच करना, अतिरिक्त संसाधनों (पेजिनेशन) के लिए Link हेडर निकालना आदि। पीपी।

यदि आपको परवाह नहीं है, तो Axios लपेटें और सब कुछ फेंक दें:

this.instance.request = <T>(...args) => {
  return axios.request<T>(...args).then(({ data }) => data)
}

this.instance.request<string>({ method: 'post', ... }).then(data => { ... });
this.instance.request<number>({ method: 'get', ... }).then(data => { ... });

zcei 13 जून 2018

👎7 👍6 ❤1

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

इंटरसेप्टर _सीम_ इसे करने के लिए सही जगह पसंद करते हैं, दोनों अपने नाम और रीडमी में उनके विवरण से (हर प्रतिक्रिया के साथ कुछ करें)। 204 बनाम 200 आदि को संभालना और फिर डेटा पास करना एक इंटरसेप्टर में भी समझ में आता है क्योंकि तब आप इसे एक केंद्रीय स्थान पर कर सकते हैं।

मेरी राय में, सहज समाधान यह होगा कि आप जो भी इंटरसेप्टर से चाहते हैं उसे वापस कर दें, न कि पुस्तकालय बल को एक ही तरह से।

यदि आप कुछ क्षेत्रों को डेटा में बदलना चाहते हैं:

this.instance.interceptors.response.use(response => {
  response.data.foo = JSON.parse(response.data.bar);
  return response;
});

यदि आप Axios के डेटा को खोलना चाहते हैं:

this.instance.interceptors.response.use(response => response.data);

यह डेवलपर को क्या करना है, इसका विकल्प छोड़ देगा, जो मेरी राय में बहुत दृढ़ता से राय वाले इंटरसेप्टर से बेहतर है। बेशक, आप असहमत होने के लिए स्वतंत्र हैं।

Etheryte 13 जून 2018

आप "उस सभी कोड दोहराव में बिंदु" के बारे में तर्क दे रहे थे, इसलिए मैंने सिर्फ यह समझाने की कोशिश की कि जानकारी क्यों आवश्यक है।

मुझे वास्तव में कोई रास्ता नहीं मिल रहा है कि आप इंटरसेप्टर और प्रतिक्रिया में टाइप सुरक्षा कैसे रखना चाहते हैं, अगर कोई इंटरसेप्टर एक सामान्य संरचना के बिना पूरी प्रतिक्रिया को स्क्रैम्बल कर सकता है। :/
अनुरोध के लिए प्रतिक्रिया प्रकार को any बनने की आवश्यकता होगी, मुझे लगता है और यह सुनिश्चित करने के लिए डेवलपर्स के हाथों में प्रयास किया जाता है कि वे सही काम करते हैं।

यह मेरे लिए कम से कम एक संपत्ति तक पहुँचने की तुलना में, आराम से टाइपिंग के कारण अधिक त्रुटि प्रवण लगता है।

यदि आप एक पीआर के साथ आ सकते हैं जो इंटरसेप्टर को "80% उपयोग-मामलों” के लिए टाइप सुरक्षा रखते हुए रूट प्रतिक्रिया को ओवरराइट करने की अनुमति देता है, तो मुझे खुशी होगी!

zcei 13 जून 2018

बात यह है कि उपरोक्त दोनों उदाहरण मैंने पहले से ही जिस तरह से वर्णित किए हैं, कार्यक्षमता के अनुसार काम करते हैं, यह केवल गलत प्रकार हैं। यदि इंटरसेप्टर में (संशोधित) प्रतिक्रिया के अलावा कुछ और लौटाना गलत है, तो मुझे लगता है कि वहां अपेक्षित प्रकारों को अपडेट करना अच्छा होगा।

Etheryte 13 जून 2018

सबसे पहले यह जानना दिलचस्प है कि आप वही काम कर रहे हैं @Etheryte !

हमारे ऐप में r => r.data श्रृंखला में अंतिम प्रतिक्रिया इंटरसेप्टर है और हम दूसरों का उपयोग करते हैं जो रीफ्रेश टोकन आदि को संभालने के लिए स्टेटस कोड पर भरोसा करते हैं, लेकिन वैश्विक स्तर पर हमें विशिष्ट के लिए इसे संभालने की कोई आवश्यकता नहीं है कॉल।

मैं समझता हूं कि टीएस के साथ इस उपयोग के मामले को समायोजित करना संभव नहीं हो सकता है। हालाँकि, @zcei यह निर्विवाद है कि यह Axios का उपयोग करने का एक वैध तरीका है क्योंकि यह Axios API (इंटरसेप्टर) के आधिकारिक भाग का उपयोग कर रहा है :)।

rssfrncs 13 जून 2018

दोह! मैं हर समय गलत कोड देख रहा था ‍♂️ और transformResponse सेक्शन में था, इंटरसेप्टर नहीं - मुझे बहुत खेद है!

रिटर्न प्रकार बदलने वाले इंटरसेप्टर के लिए आप टाइपिंग को खाते में कैसे अपडेट करेंगे?

zcei 13 जून 2018

शायद कुछ ऐसा?

interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}

आप इसे इस तरह कहेंगे:

axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })

बस इसे स्थानीय रूप से आज़माएं और ऐसा लगता है जो आप खोज रहे हैं।
हो सकता है कि मैं शाम को एक साथ पीआर प्राप्त कर सकूं ताकि सभी विधियों के लिए इसे अपडेट किया जा सके।

zcei 13 जून 2018

👍14 ❤2

@zcei यह अच्छा लग रहा है! निश्चित रूप से AxiosResponse के लिए डिफ़ॉल्ट 99% समय समझ में आता है

rssfrncs 13 जून 2018

सुन कर खुशी हुई! मेरे भ्रम के लिए फिर से क्षमा करें

zcei 13 जून 2018

@zcei कोई समस्या नहीं है! रुचि से बाहर Axios के लिए रिलीज़ चक्र क्या है?

rssfrncs 13 जून 2018

कोई नहीं है - मेरे पास अभी भी v1 अल्फा (#1333) के लिए कुछ लंबित चीजें हैं और इस बीच @nickuraltsev / @emilyemorehouse जब भी आवश्यक हो रिलीज कर रहे हैं।
v0.18 के बाद से कुछ कर्षण हुआ है (मेरे पसंदीदा सहित: उदाहरणों के लिए स्कोपिंग विकल्प) इसलिए मुझे लगता है कि वे एक रिलीज में कटौती कर सकते हैं। अधिक जानकारी के लिए मैं आपको Gitter पर आमंत्रित करना चाहता हूं, ताकि हम मुद्दों पर ध्यान दें

zcei 13 जून 2018

मैं 0.19 रिलीज पाने की उम्मीद कर रहा था, लेकिन आखिरी बार मैंने जांच की, मास्टर सीआई में असफल रहा था। 1.0 को लैंड करने के बाद मैं निश्चित रूप से एक अधिक ठोस/नियमित रिलीज शेड्यूल चाहता हूं।

emilyemorehouse 13 जून 2018

👍1

एक ही समस्या से मिलो। क्या कोई समाधान हैं?

qidaneix 30 जून 2018

@qidaneix आप रिलीज़ होने तक npm install axios/axios#master स्थापित करने का प्रयास कर सकते हैं। #1605 इसे ठीक करना चाहिए था। कुछ प्रतिक्रिया प्राप्त करना अच्छा होगा, क्या यह वास्तव में वास्तविक जीवन के उपयोग के मामलों में मदद करता है और न केवल परीक्षण 🙂

zcei 30 जून 2018

👍1

@zcei मैं कल इसे आज़माउंगा

rssfrncs 1 जुल॰ 2018

@zcei क्या मैं पूछ सकता हूँ कि यह कब रिलीज़ होगी?

qidaneix 2 जुल॰ 2018

+1 1.0.0 कब रिलीज़ होगी?

jamessawyer 2 जुल॰ 2018

यह निश्चित रूप से 1.0 से पहले की रिलीज़ होगी। @खालेदगरबाया क्या आपको मैट द्वारा भी एनपीएम में जोड़ा गया था? अन्यथा हमें इसे जारी करने वाले शेष अनुरक्षकों के साथ अच्छा व्यवहार करने की आवश्यकता है

zcei 2 जुल॰ 2018

👍1

सभी को प्रणाम। मैं वर्तमान में NPM रिलीज़ का प्रबंधन कर रहा हूँ। मैं एक और पूर्व-1.0.0 रिलीज जारी करना पसंद करूंगा, लेकिन ट्रैविस परीक्षण विफल हो रहे हैं और मुझे अभी तक उन्हें ठीक करने का मौका नहीं मिला है। एक बार जब वे ठीक हो जाते हैं, तो मुझे इसे तुरंत बाहर निकालने में बहुत खुशी होती है

emilyemorehouse 2 जुल॰ 2018

@zcei मुझे npm रेपो में नहीं जोड़ा गया था, मैं केवल परिवर्तनों को मर्ज कर सकता हूँ

Khaledgarbaya 2 जुल॰ 2018

क्या इस मुद्दे पर कोई अपडेट है, क्या निकट भविष्य में महीने-दो की तरह कोई रिलीज़ होगी?

m-petkovic 31 जुल॰ 2018

hartmut-co-uk 31 जुल॰ 2018

❤️ अगर इसे अभी जारी किया जा सकता है

nonameolsson 8 अग॰ 2018

हम जागरूक हैं, लेकिन वर्तमान में अवरुद्ध हैं। 🙁 आप यहाँ पर अधिक जानकारी प्राप्त कर सकते हैं: https://github.com/axios/axios/issues/1657#issuecomment -410766031

zcei 8 अग॰ 2018

0.19.0-बीटा.1 के भाग के रूप में जारी किया गया।

इसे npm install [email protected] या npm install axios@next . का उपयोग करके स्थापित किया जा सकता है

emilyemorehouse 9 अग॰ 2018

👍1

शायद कुछ ऐसा?
interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}
आप इसे इस तरह कहेंगे:
axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })
बस इसे स्थानीय रूप से आज़माएं और ऐसा लगता है जो आप खोज रहे हैं।
हो सकता है कि मैं शाम को एक साथ पीआर प्राप्त कर सकूं ताकि सभी विधियों के लिए इसे अपडेट किया जा सके।

उपयोगकर्ता (टी, पहला सामान्य परम) का उपयोग नहीं किया जाता है, अगर मैं कस्टम रिटर्न प्रकारों का उपयोग करना चाहता हूं, तो मुझे अजीब लग रहा है

axios.request<void, string>({
    ...
})

शून्य का उपयोग करना अधिक स्पष्ट हो सकता है।

izayl 29 अक्तू॰ 2018

👍1

@emilyemorehouse कृतघ्न नहीं लग रहा है लेकिन 0.19-बीटा अब तीन महीने के लिए खुला है, क्या जीए रिलीज के लिए कोई ईटीए है? हमारे प्रोजेक्ट में एक समस्या है जिसके लिए इनमें से किसी एक समाधान की आवश्यकता है। मैंने इसे Gitter चैनल में पूछा था, लेकिन ऐसा नहीं लगता कि अनुरक्षक वहाँ पर प्रतिक्रिया देते हैं ...

billsaysthis 16 नव॰ 2018

शायद एक बेहतर शब्द यह होगा कि वे कौन से मुद्दे हैं जिन्हें रिलीज़ से पहले हल करने की आवश्यकता है और क्या इसे ट्रैक करने के लिए कोई जगह है? चूंकि इसमें बहुत रुचि दिखाई देती है, कार्य को फैलाना और आवश्यक कार्य की स्पष्ट समझ होने से चीजों को गति देने में मदद मिल सकती है।

Etheryte 17 नव॰ 2018

0.19 के लिए पहले से ही एक परियोजना मील का पत्थर है, लेकिन सूचीबद्ध टिकटों में कई महीनों से कोई बदलाव नहीं देखा गया है।

billsaysthis 19 नव॰ 2018

const func1: कोई = () => {वापसी axios.request(...)}

kaimiyang 15 दिस॰ 2018

👎7 😄1

मैं अपने axios.d.ts में AxiosResponse को ओवरराइड करता हूं:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

Army-U 18 दिस॰ 2018

👍44 🎉19 🚀12 ❤12 😄5

इस मुद्दे को उछाल रहे हैं। यह काम करता है... ठीक है जब मैंने अभी-अभी AxiosInstance परिभाषा को स्थानीय टाइपिंग में कॉपी किया है, लेकिन लागू समाधान मेरी राय में बहुत क्रियात्मक है, जब तक कि मैं कुछ गलत नहीं कर रहा हूं (टाइपस्क्रिप्ट विशेषज्ञ नहीं)। चूंकि मैं axios.create के साथ बनाए गए एक अलग अक्षीय उदाहरण का उपयोग कर रहा हूं और इस इंटरसेप्टर का उपयोग कर रहा हूं:

AxiosClient.interceptors.response.use(
  response => response && response.data,
  error => error && error.response && error.response.data
);

जहां response.data में हमेशा यह फॉर्म होता है:

export interface APIResponse<T = any> {
  data: T;
  message: string;
  status: boolean;
}

ऐसा लगता है कि मुझे इस तरह AxiosClient.post का उपयोग करना है:

AxiosClient.post<EndpointAPIResponse, APIResponse<EndpointAPIResponse>>('/endpoint', { someData });

.then में उचित प्रकार रखने के लिए। क्या मैं यहाँ कुछ गलत कर रहा हूँ या क्या यह वास्तव में वह वर्बोज़ होना चाहिए? यदि नहीं, तो यह बेहतर होगा यदि मैं इंस्टेंस बनाते समय अपेक्षित प्रतिक्रिया स्कीमा पास कर सकूं, लेकिन मैं इसे काम नहीं कर सकता:

export interface AxiosInstance<R> {
  <T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  <T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  defaults: AxiosRequestConfig;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<R>;
  };
  getUri(config?: AxiosRequestConfig): string;
  request<T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  head<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
}

export interface AxiosStatic extends AxiosInstance<AxiosResponse> {
  create<T = AxiosResponse>(config?: AxiosRequestConfig): AxiosInstance<T>;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  isCancel(value: any): boolean;
  all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
  spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
}

यह सामान्य प्रकार के बिना axios.create() के साथ ठीक काम करता है या केवल axios , लेकिन अगर मैं इस तरह अपना इंटरफ़ेस पास करता हूं:

const AxiosClient = axios.create<APIResponse>({
  // ...
});

और फिर इसे इस तरह उपयोग करें: AxiosClient.post<string>('/endpoint').then(value => value.data) , value.data में टाइप है... टी। प्लस उपरोक्त संस्करण केवल तभी काम करता है जब मैं वास्तव में इन टाइपिंग को नोड_मॉड्यूल्स में बदल देता हूं, अन्यथा यह पूरी तरह से मिश्रित हो जाता है और मैं कुछ कुल आपदा के साथ समाप्त। क्या कोई इसमें मेरी मदद कर सकता है?

संपादित करें: ठीक है, मुझे लगता है कि यह काम नहीं करेगा क्योंकि इस तरह से जेनरिक का उपयोग करना संभव नहीं है (इसलिए R<T> जब आर एक सामान्य प्रकार है तो सही सिंटैक्स नहीं है, लेकिन मुझे लगता है कि वेबस्टॉर्म किसी कारण से हाइलाइट नहीं हुआ यह मेरे लिए); https://github.com/Microsoft/TypeScript/issues/1213 यह, मुझे लगता है, इसे हल कर देगा लेकिन कोई विचार नहीं है कि यह कभी लागू हो जाता है।

paolostyle 15 मार्च 2019

const request = <T>(options: AxiosRequestConfig) => {
    return axios.request<IResponse<T>>(options).then<T>(response => {
        const data = response.data;
        if (data.c !== '0') {
            return Promise.reject(new Error(data.m || 'error'));
        }
        return data.d;
    });
}

उपयोग:

request<IApiGetBrandGoodsInfoByIds>({
        method: 'GET',
        url: '/api/a/b',
    });

KentonYu 25 अप्रैल 2019

👍1

@zcei क्या यह अभी तक हल हो गया है? काम करने के लिए निम्नलिखित प्राप्त करने में सक्षम नहीं हूँ:

// so I created an axios instance:
const instance = axios.create(someOptions);

// then used interceptors
instance.interceptors.response.use((res) => res.data.data);   // server response will always have 'data'

// then when using the following to make a request
instance.get<string>(someURI);  // suppose server response was {data: 'some message'}

// ^^ the above returns type AxiosPromise<string>. How do I get it to return type Promise<string> instead?

ManojBahuguna 12 जून 2019

एक ही समस्या है, मैं संस्करण 0.19बीटा स्थापित करता हूं, टीएस भी सही प्रकार को पार्स नहीं कर सकता है

baixiaoji 19 जुल॰ 2019

मैं अपने axios.d.ts में AxiosResponse को ओवरराइड करता हूं:
import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

ओह नियुपी

qld-cf 25 जुल॰ 2019

मैं कुछ ऐसा करने के लिए इंटरसेप्टर का उपयोग करता हूं: response => response.data । तो मुझे पूरी तरह से AxiosResponse रैपर को हटाने की जरूरत है।

मैं अंत में इसके साथ समाप्त होता हूं:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosInstance {
    request<T = any> (config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

यदि कोई व्यक्ति इसका उपयोग करना नहीं जानता है:

कहीं टाइप लिखें, जैसे src/types/axios/axios.d.ts ।
अपना tsconfig.json अपडेट करें, उदाहरण के लिए

{
  "compilerOptions": {
    "typeRoots": [
        "./node_modules/@types",
        "./src/types/",
    ]
  }
}

carsonwah 27 अग॰ 2019

👍13 ❤6 🚀5 👀2 🎉2 😄1

यह मेरे लिए काम करता है:

Api.boards.createBoard = jest.fn((name:string) => {
      const mockBoardResult = {
        created_on: mockBoardData.date,
        name,
        threads: [],
        updated_on: mockBoardData.date,
        _id: mockBoardData._id
      };
      return Promise.resolve({data:mockBoardResult}) as Promise<AxiosResponse<any>>
    });

gpbaculio 8 सित॰ 2019

ओवरराइड करने का दूसरा तरीका

import * as axios from 'axios'

declare module 'axios' {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>
  }
}

AsukaSong 9 सित॰ 2019

👍4

मुझे लगता है कि इंटरसेप्टर का उपयोग करते समय हमें शायद AxiosResponse में संपत्ति नहीं जोड़नी चाहिए, क्योंकि इंटरसेप्टर को बाहर निकाला जा सकता है।

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default addFooToResp

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

var id = axios.interceptors.response.use(addFooToResp)

axios.get('xx').then(res => {
  // have type defined
  // because we use `declare module 'axios'` ts can infer type
  console.log(res.foo)
})

// but if then eject?
axios.interceptors.response.eject(id)
axios.get('xx').then(res => {
  // also have type defined, it's maybe not reasonable
  console.log(res.foo)
})

हम टाइपस्क्रिप्ट का उपयोग क्यों करते हैं? क्योंकि हमें उम्मीद है कि हमारी परियोजना सुरक्षित होगी।
अगर किसी दिन हम किसी संपत्ति को आधार बर्तन से हटा देते हैं, तो हम उस कोड को चाहते हैं जो संकलन समय पर एक त्रुटि उत्पन्न करने के लिए संदर्भित करता है।

इसलिए, हम इंटरसेप्टर का उपयोग AxiosResponse में कुछ संपत्ति जोड़ना चाहते हैं और टाइप अनुमान है, यह विरोधाभासी है, क्योंकि यह सुनिश्चित करने का कोई तरीका नहीं है कि इंटरसेप्टर के बाहर निकलने पर टाइप अनुमान को अपडेट किया जा सकता है

मुझे लगता है कि axios को उपयोगकर्ता को बताना चाहिए:
इंटरसेप्टर को कुछ ऐसा संभालना चाहिए जिसका AxiosResponse पर कोई प्रभाव नहीं पड़ता है, यदि आप AxiosResponse संपत्ति का विस्तार करना चाहते हैं और टाइप अनुमान लगाना चाहते हैं, तो आपको 'प्लगइन' पसंद करना चाहिए

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default (axios) => {
  axios.interceptors.response.use(addFooToResp)
}

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

addFooToResp(axios)

यह 100% सुरक्षा नहीं है, लेकिन यह केवल axios.interceptors.response.use . का उपयोग करने से सुरक्षा है

और मैं axios desgin को एक प्लगइन सिस्टम की सलाह देता हूं, अब हम हमेशा ऐसा देखते हैं

import axios from 'axios'
import wrapper from 'axios-cache-plugin'

let http = wrapper(axios, {
  maxCacheSize: 15
})
export default http

एक प्लगइन को axios से जोड़ने के लिए wrapper की तरह उपयोग करें, प्रत्येक प्लगइन का एक सामान्य नियम नहीं है, यह पर्याप्त सुरुचिपूर्ण नहीं है। मुझे लगता है पसंद करना चाहिए

import axios from 'axios'
import axiosCache from 'axios-cache-plugin'

axios.use(axiosCache, {
  // some options
})
export axios

// axios-cache-plugin
export default (axios) => {}
// or
export default {
  install(axios){}
}
// like Vue.use for Vue.js

EthianWong 27 दिस॰ 2019

axios.request<T>(...args) शैली परिभाषा का प्रयोग करें।
सरणी में अंतिम प्रतिक्रिया-इंटरसेप्टर परोक्ष रूप से (currentResponse: any) => T जैसे इंटरफ़ेस का अनुपालन करता है
तो अगर आपके पास data कुछ ऐसा है:
interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}
तब आप कह सकते हैं:
axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

Pls क्या आप मुझे बता सकते हैं कि मैं tsx . के साथ Axios अनुरोध में शीर्षलेख और कॉन्फ़िगरेशन कैसे जोड़ सकता हूं

MoZiadAlhafez 20 जन॰ 2020

@MoZiadAlhafez

declare module 'axios' {
  interface AxiosRequestConfig {
    useCache: boolean
  }
}

लेकिन यह अनुशंसित नहीं है

EthianWong 20 जन॰ 2020

यह एक लंबी कहानी है, लेकिन लगता है कि इसे #1605 में सुलझा लिया गया है। देखें https://github.com/axios/axios/issues/1510#issuecomment -396894600।

अगर मैंने कुछ गलत समझा है, तो यहां के संदर्भ में एक नया मुद्दा खोलना बेहतर है। धन्यवाद।

chinesedfan 25 जन॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Axios: प्रतिक्रिया इंटरसेप्टर (AxiosResponse समस्या) का उपयोग करते समय टाइपस्क्रिप्ट के साथ Axios का उपयोग कैसे करें

सारांश

संदर्भ

सबसे उपयोगी टिप्पणी

सभी 50 टिप्पणियाँ

संबंधित मुद्दों