diff --git a/inert.config.js b/inert.config.js index 53eb960..b680c2e 100644 --- a/inert.config.js +++ b/inert.config.js @@ -16,6 +16,7 @@ const { const fs = require("fs"); +const itConfig = require("./it.lang.js"); const hiConfig = require("./hi.lang.js"); const arConfig = require("./ar.lang.js"); const enConfig = require("./en.lang.js"); @@ -24,7 +25,7 @@ const zhConfig = require("./zh.lang.js"); const ukConfig = require("./uk.lang.js"); const ptBRConfig = require("./ptBR.lang.js"); const kuConfig = require("./ku.lang.js"); -const esConfig = require('./es.lang.js'); +const esConfig = require("./es.lang.js"); const frConfig = require("./fr.lang.js"); const trConfig = require("./tr.lang.js"); const krConfig = require("./kr.lang.js"); @@ -34,9 +35,11 @@ const ruConfig = require("./ru.lang.js"); const jaConfig = require("./ja.lang.js"); const zhTWConfig = require("./zhTW.lang.js"); -const data = fs.existsSync('./temp/data.json') ? require('./temp/data.json') : { - sponsors: [] -}; +const data = fs.existsSync("./temp/data.json") + ? require("./temp/data.json") + : { + sponsors: [], + }; // List of languages const langs = [ @@ -123,8 +126,9 @@ const langs = [ dir: "ltr", name: "Русский", prefix: "/ru/", - config: ruConfig - },{ + config: ruConfig, + }, + { dir: "rtl", name: "Arabic", prefix: "/ar/", @@ -135,14 +139,21 @@ const langs = [ dir: "ltr", name: "日本語", prefix: "/ja/", - config: jaConfig + config: jaConfig, }, { dir: "ltr", name: "繁體中文", prefix: "/zhTW/", - config: zhTWConfig - } + config: zhTWConfig, + }, + { + dir: "ltr", + name: "Italiano", + prefix: "/", + postsDir: "/it/", + config: itConfig, + }, ]; /** @@ -160,7 +171,7 @@ module.exports = { title: "Axios Docs", // List of languages langs: langs, - ...data + ...data, }, build: { /** @@ -264,9 +275,10 @@ module.exports = { ...langs .map((lang) => [ singleHTMLBuild(lang.config), - writeFile(lang.prefix === '/' - ? ':output:/index.html' - : `:${lang.prefix.slice(1, -1)}Output:/index.html` + writeFile( + lang.prefix === "/" + ? ":output:/index.html" + : `:${lang.prefix.slice(1, -1)}Output:/index.html` ), ]) .flat(), @@ -340,19 +352,22 @@ module.exports = { ], }, }, - ...langs.map( - (lang) => ({ - folder: `posts/${lang.postsDir || lang.prefix.slice(1, -1)}`, - build: { - traverseLevel: "recursive", - filePipeline: [ - markdown(), - htmlBuild("post", lang.config), - write(lang.prefix === '/' ? 'postOutput' : `${lang.prefix.slice(1, -1)}Posts`, ".html"), - ], - }, - }) - ), + ...langs.map((lang) => ({ + folder: `posts/${lang.postsDir || lang.prefix.slice(1, -1)}`, + build: { + traverseLevel: "recursive", + filePipeline: [ + markdown(), + htmlBuild("post", lang.config), + write( + lang.prefix === "/" + ? "postOutput" + : `${lang.prefix.slice(1, -1)}Posts`, + ".html" + ), + ], + }, + })), ], }, }; diff --git a/it.lang.js b/it.lang.js new file mode 100644 index 0000000..99613bb --- /dev/null +++ b/it.lang.js @@ -0,0 +1,158 @@ +/** + * Configuration for the english (original) translation + */ + +module.exports = { + // Language display name. MUST BE THE SAME AS IN [inert.config.js].custom.langs + display: "Italiano", + prefix: "/", + dir: "ltr", + lang: "it", + // `p` stands for `paragraph`. This will contain translations of full text blocks + p: { + headline: "Client HTTP per node e browser, basato sulle Promise.", + subhead: `Axios è un Client HTTP per node.js e browser, basato sulle Promise. + Axios fornisce una libreria di semplice utilizzo contenuta in un pacchetto molto piccolo e un'interfaccia estendibile.`, + sponsors: `

Grazie per aver deciso di supportare il progetto.

+

Verrai automaticamente aggiunto a questa lista entro 24 ore se il tier che hai scelto lo comprende.

+
Scopri di più...
+ `, + }, + // `t` stands fot `translation`. This will contain translations of single words or phrases + t: { + "Come Iniziare": undefined, + "Vai al GitHub": undefined, + Lingue: undefined, + "Open Source": undefined, + Contribuisci: undefined, + "Sorgente su GitHub": undefined, + Problemi: undefined, + "Pull Requests": undefined, + "Codice di Condotta": undefined, + "Fai un Fork su GitHub": undefined, + "Fai un Fork del Sito Web": undefined, + "Segnala un problema": undefined, + Successivo: undefined, + Precedente: undefined, + "Website Copy Right Footer": undefined, + "Vai al Github": undefined, + "Axios Project Copy Right Footer": undefined, + "License Label Footer": undefined, + Sponsors: undefined, + "Diventa uno Sponsor": undefined, + "Sponsor Oro": undefined, + }, + sidebar: [ + { + type: "heading", + text: "Come Iniziare", + }, + { + type: "link", + href: "/docs/intro", + text: "Introduzione", + }, + { + type: "link", + href: "/docs/example", + text: "Esempio di Utilizzo", + }, + { + type: "link", + href: "/docs/post_example", + text: "Richieste POST", + }, + { + type: "heading", + text: "Axios API", + }, + { + type: "link", + href: "/docs/api_intro", + text: "Axios API", + }, + { + type: "link", + href: "/docs/instance", + text: "L'Istanza Axios", + }, + { + type: "link", + href: "/docs/req_config", + text: "Configurazione della Richiesta", + }, + { + type: "link", + href: "/docs/res_schema", + text: "Schema della Risposta", + }, + { + type: "link", + href: "/docs/config_defaults", + text: "Valori Predefiniti", + }, + { + type: "link", + href: "/docs/interceptors", + text: "Interceptors", + }, + { + type: "link", + href: "/docs/handling_errors", + text: "Gestione degli Errori", + }, + { + type: "link", + href: "/docs/cancellation", + text: "Annullamento delle Richieste", + }, + { + type: "link", + href: "/docs/urlencoded", + text: "🆕 Corpo con URL-Encoding", + }, + { + type: "link", + href: "/docs/multipart", + text: "🆕 Corpo Multipart", + }, + { + type: "heading", + text: "Altro", + }, + { + type: "link", + href: "/docs/notes", + text: "Note", + }, + { + type: "heading", + text: "Collaboratori", + }, + { + type: "link", + href: "/docs/sponsor", + text: "Sponsorizzare Axios", + }, + { + type: "link", + href: "https://github.com/axios/axios/blob/v1.x/CODE_OF_CONDUCT.md", + text: "Codice di Condotta", + }, + { + type: "link", + href: "https://github.com/axios/axios/blob/v1.x/COLLABORATOR_GUIDE.md", + text: "Guida per la Collaborazione", + }, + { + type: "link", + href: "https://github.com/axios/axios/blob/v1.x/CONTRIBUTING.md", + text: "Contribuire ad Axios", + }, + { + type: "link", + href: "/docs/translating", + text: "Tradurre la documentazione", + }, + ], +}; diff --git a/posts/it/api_intro.md b/posts/it/api_intro.md new file mode 100644 index 0000000..a5f0c0e --- /dev/null +++ b/posts/it/api_intro.md @@ -0,0 +1,70 @@ +--- +title: "Axios API" +description: "Documentazione API di Axios" +prev_title: "Richieste POST" +prev_link: "/docs/post_example" +next_title: "L'istanza Axios" +next_link: "/docs/instance" +--- + +Le richieste possono essere effettuate passando un oggetto di configurazione come parametro di `axios`. + +##### axios(config) + +```js +// Richiesta POST +axios({ + method: "post", + url: "/user/12345", + data: { + firstName: "Fred", + lastName: "Flintstone", + }, +}); +``` + +```js +// Richiesta GET per un'immagine remota con node.js +axios({ + method: "get", + url: "http://bit.ly/2mTM3nY", + responseType: "stream", +}).then(function (response) { + response.data.pipe(fs.createWriteStream("ada_lovelace.jpg")); +}); +``` + +##### axios(url[, config]) + +```js +// Inviare una richiesta GET (metodo predefinito) +axios("/user/12345"); +``` + +### Alias dei metodi di richiesta + +Per comodità, vengono utilizzati degli alias per tutti i metodi di richiesta supportati. + +##### axios.request(config) + +##### axios.get(url[, config]) + +##### axios.delete(url[, config]) + +##### axios.head(url[, config]) + +##### axios.options(url[, config]) + +##### axios.post(url[, data[, config]]) + +##### axios.put(url[, data[, config]]) + +##### axios.patch(url[, data[, config]]) + +##### axios.postForm(url[, data[, config]]) + +##### axios.putForm(url[, data[, config]]) + +##### axios.patchForm(url[, data[, config]]) + +> NOTA: Quando si usano gli alias, non serve specificare le proprietà `url`, `method`, e `data` all'interno di config. diff --git a/posts/it/cancellation.md b/posts/it/cancellation.md new file mode 100644 index 0000000..925d248 --- /dev/null +++ b/posts/it/cancellation.md @@ -0,0 +1,165 @@ +--- +title: "Annullare le Richieste" +prev_title: "Gestione degli Errori" +prev_link: "/docs/handling_errors" +next_title: "Corpo con URL-Encoding" +next_link: "/docs/urlencoded" +--- + +## Annullare le richieste + +Puoi gestire i timeout relativi alla **risposta**, impostando la proprietà `timeout`. + +In alcuni casi (ad esempio quando una **connessione** di rete si interrompe), è utile poter annullare tempestivamente la richiesta axios. In caso contrario la richiesta potrebbe rimanere in sospeso finché lo stack o il codice chiamante non va in timeout, cosa che in un’applicazione server-side può richiedere diversi minuti. + +Per terminare una chiamata axios, puoi usare i seguenti metodi: + +- `signal` +- `cancelToken` (deprecato) + +La combinazione di `timeout` e i metodi di annullamento (es. `signal`), dovrebbe coprire sia i timeout relativi alla **risposta** che i timeout relativi alla **connessione**. + +### `signal`: AbortController + +A partire dalla versione `v0.22.0`, Axios supporta [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) per annullare le richieste nello stesso modo in cui viene fatto con l'API fetch. + +```js +const controller = new AbortController(); + +axios + .get("/foo/bar", { + signal: controller.signal, + }) + .then(function (response) { + //... + }); +// annulla la richiesta +controller.abort(); +``` + +Esempio con un timeout, utilizzando l'API più recente di [`AbortSignal.timeout()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout) [nodejs 17.3+]: + +```js +axios + .get("/foo/bar", { + signal: AbortSignal.timeout(5000), // Interrompi la richiesta dopo 5 secondi + }) + .then(function (response) { + //... + }); +``` + +Esempio con una funzione ausiliaria di timeout: + +```js +function newAbortSignal(timeoutMs) { + const abortController = new AbortController(); + setTimeout(() => abortController.abort(), timeoutMs || 0); + + return abortController.signal; +} + +axios + .get("/foo/bar", { + signal: newAbortSignal(5000), // Interrompi la richiesta dopo 5 secondi + }) + .then(function (response) { + //... + }); +``` + +### CancelToken `deprecato` + +Puoi anche annullare una richiesta usando un _CancelToken_. + +> L'API per il token di annullamento di axios è basato sulla proposta, ormai ritirata: [cancelable promises proposal](https://github.com/tc39/proposal-cancelable-promises). + +> Questa API è deprecata a partire dalla versione `v0.22.0` e non dovrebbe essere utilizzata nei nuovi progetti. + +Puoi creare un token di annullamento usando la factory `CancelToken.source`, come mostrato qui sotto: + +```js +const CancelToken = axios.CancelToken; +const source = CancelToken.source(); + +axios + .get("/user/12345", { + cancelToken: source.token, + }) + .catch(function (thrown) { + if (axios.isCancel(thrown)) { + console.log("Richiesta annullata", thrown.message); + } else { + // Gestisci l'errore + } + }); + +axios.post( + "/user/12345", + { + name: "Mario Rossi", + }, + { + cancelToken: source.token, + } +); + +// Annulla la richiesta (il parametro message è opzionale) +source.cancel("Operazione annullata dall'utente."); +``` + +Puoi anche creare un token di annullamento passando una funzione di esecuzione al costruttore di `CancelToken`: + +```js +const CancelToken = axios.CancelToken; +let cancel; + +axios.get("/user/12345", { + cancelToken: new CancelToken(function executor(c) { + // Una funzione di esecuzione riceve una funzione di annullamento come parametro + cancel = c; + }), +}); + +// Annulla la richiesta +cancel(); +``` + +> Nota: puoi annullare più richieste con lo stesso token di annullamento / signal + +Durante il periodo di transizione (tra due versioni), puoi usare entrambe le API di annullamento, anche per la stessa richiesta: + +```js +const controller = new AbortController(); + +const CancelToken = axios.CancelToken; +const source = CancelToken.source(); + +axios + .get("/user/12345", { + cancelToken: source.token, + signal: controller.signal, + }) + .catch(function (thrown) { + if (axios.isCancel(thrown)) { + console.log("Richiesta annullata", thrown.message); + } else { + // Gestisci l'errore + } + }); + +axios.post( + "/user/12345", + { + name: "new name", + }, + { + cancelToken: source.token, + } +); + +// Annulla la richiesta (il parametro message è opzionale) +source.cancel("Operazione annullata dall'utente."); +// OPPURE +controller.abort(); // il parametro message non è supportato qui +``` diff --git a/posts/it/config_defaults.md b/posts/it/config_defaults.md new file mode 100644 index 0000000..7360e08 --- /dev/null +++ b/posts/it/config_defaults.md @@ -0,0 +1,52 @@ +--- +title: "Valori Predefiniti" +prev_title: "Schema di Riposta" +prev_link: "/docs/res_schema" +next_title: "Interceptors" +next_link: "/docs/interceptors" +--- + +## Valori Predefiniti + +È possibile specificare i valori predefiniti che verranno applicati ad ogni richiesta. + +### Valori predefiniti globali di axios + +```js +axios.defaults.baseURL = "https://api.example.com"; +axios.defaults.headers.common["Authorization"] = AUTH_TOKEN; +axios.defaults.headers.post["Content-Type"] = + "application/x-www-form-urlencoded"; +``` + +### Valori predefiniti dell'istanza axios + +```js +// Configura i valori predefiniti quando crei una nuova istanza axios +const instance = axios.create({ + baseURL: "https://api.example.com", +}); + +// Modifica i valori predefiniti dopo la creazione dell'istanza +instance.defaults.headers.common["Authorization"] = AUTH_TOKEN; +``` + +### Priorità dei valori predefiniti + +I valori predefiniti verranno uniti seguendo un ordine preciso. L'ordine inizia con i valori predefiniti della libreria, che puoi trovare qui [lib/defaults/index.js](https://github.com/axios/axios/blob/v1.x/lib/defaults/index.js), poi la proprietà `defaults` dell'istanza, e infine l'argomento `config`. Quest'ultimo avrà precedenza sul primo. +Ecco un esempio: + +```js +// Crea un'istanza utilizzando i valori predefiniti forniti dalla libreria +// Il valore di timeout predefinito della libreria è uguale a `0` +const instance = axios.create(); + +// Sovrascrivi il valore di timeout della libreria +// Ora tutte le richieste che fanno uso di questa istanza aspetteranno 2.5 secondi prima di andare in timeout +instance.defaults.timeout = 2500; + +// Sovrascrivi il valore di timeout per questa richiesta, sapendo che richiederà molto tempo +instance.get("/longRequest", { + timeout: 5000, +}); +``` diff --git a/posts/it/example.md b/posts/it/example.md new file mode 100644 index 0000000..a83a3ce --- /dev/null +++ b/posts/it/example.md @@ -0,0 +1,71 @@ +--- +title: "Esempio di Utilizzo" +description: "Un piccolo esempio di utilizzo di axios" +prev_title: "Introduzione" +prev_link: "/docs/intro" +next_title: "Richieste POST" +next_link: "/docs/post_example" +--- + +## Nota: Utilizzo in CommonJS + +Per ottenere la tipizzazione **Typescript** (per l'**IntelliSense** e l'autocompletamento) usando CommonJS con `require()`, utilizza il seguente approccio: + +```js +const axios = require("axios").default; + +// axios. verrà riconosciuto da IntelliSense per l’autocompletamento e la tipizzazione dei parametri +``` + +# Esempio + +Eseguire una richiesta `GET` + +```js +const axios = require("axios"); + +// Fare una richiesta per un utente con un ID specifico +axios + .get("/user?ID=12345") + .then(function (response) { + // Gestisci l'esito positivo + console.log(response); + }) + .catch(function (error) { + // Gestisci l'errore + console.log(error); + }) + .finally(function () { + // viene sempre eseguito + }); + +// In alternativa, la richiesta potrebbe essere fatta anche in questo modo +axios + .get("/user", { + params: { + ID: 12345, + }, + }) + .then(function (response) { + console.log(response); + }) + .catch(function (error) { + console.log(error); + }) + .finally(function () { + // viene sempre eseguito + }); + +// Vuoi usare la sintassi async/await? Aggiungi `async` alla dichiarazione della funzione/metodo.” +async function getUser() { + try { + const response = await axios.get("/user?ID=12345"); + console.log(response); + } catch (error) { + console.error(error); + } +} +``` + +> **NOTA:** `async/await` fa parte dello standard ECMAScript 2017 e pertanto non è supportato su Internet +> Explorer e altri browser vecchi, quindi usa con attenzione. diff --git a/posts/it/handling_errors.md b/posts/it/handling_errors.md new file mode 100644 index 0000000..f79a09b --- /dev/null +++ b/posts/it/handling_errors.md @@ -0,0 +1,55 @@ +--- +title: "Gestione degli Errori" +prev_title: "Interceptors" +prev_link: "/docs/interceptors" +next_title: "Annullare le Richieste" +next_link: "/docs/cancellation" +--- + +La struttura generale degli errori axios è la seguente: + +- **message** - Un breve riassunto del messaggio di errore e lo stato con cui è fallito. +- **name** - Definisce l'origine dell'errore. Per axios, sarà sempre un 'AxiosError'. +- **stack** - Fornisce lo stack trace dell'errore. +- **config** - Oggetto di configurazione axios definito dall'utente quando è stata effettuata la richiesta. +- **code** - Rappresenta un errore identificativo di axios. La tabella sottostante elenca le definizioni dei vari errori interni di axios. +- **status** - Il codice di stato HTTP della risposta. Vedi [qui](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) per il significato dei codici di stato HTTP più comuni. + +```js +axios.get("/user/12345").catch(function (error) { + if (error.response) { + // È stata fatta una richiesta e il server ha risposto un codice di stato HTTP + // che non rientra nel gruppo dei codici 2xx + console.log(error.response.data); + console.log(error.response.status); + console.log(error.response.headers); + } else if (error.request) { + // È stata fatta una richiesta ma non è stata ricevuta nessuna risposta + // `error.request` è un'istanza di XMLHttpRequest nel browser e un'istanza + // http.ClientRequest in node.js + console.log(error.request); + } else { + // Si è verificato un errore durante la configurazione della richiesta + console.log("Error", error.message); + } + console.log(error.config); +}); +``` + +Con l'opzione di configurazione `validateStatus`, è possibile definire i codici HTTP che dovrebbero generare un errore. + +```js +axios.get("/user/12345", { + validateStatus: function (status) { + return status < 500; // Valida solo le risposte con il codice di stato HTTP minore di 500 + }, +}); +``` + +Con `toJSON` è possibile ottenere un oggetto con più informazioni relative all'errore HTTP. + +```js +axios.get("/user/12345").catch(function (error) { + console.log(error.toJSON()); +}); +``` diff --git a/posts/it/instance.md b/posts/it/instance.md new file mode 100644 index 0000000..eb25000 --- /dev/null +++ b/posts/it/instance.md @@ -0,0 +1,70 @@ +--- +title: "L'Istanza Axios" +prev_title: "Axios API" +prev_link: "/docs/api_intro" +next_title: "Configurazione delle Richieste" +next_link: "/docs/req_config" +--- + +### Creare un'istanza + +Puoi creare una nuova istanza di axios con una configurazione personalizzata. + +##### axios.create([config]) + +```js +const instance = axios.create({ + baseURL: "https://some-domain.com/api/", + timeout: 1000, + headers: { "X-Custom-Header": "foobar" }, +}); +``` + +### Metodi di istanza + +Di seguito sono elencati tutti i metodi disponibili nell'istanza. La configurazione definita in `config` verrà unita a quella predefinita dell'istanza. + +##### axios#request(config) + +##### axios#get(url[, config]) + +##### axios#delete(url[, config]) + +##### axios#head(url[, config]) + +##### axios#options(url[, config]) + +##### axios#post(url[, data[, config]]) + +##### axios#put(url[, data[, config]]) + +##### axios#patch(url[, data[, config]]) + +##### axios#getUri([config]) + +### Chiamare l'istanza con un oggetto di configurazione + +In aggiunta all'utilizzo dei metodi `instance.get()` oppure `instance.post()`, è possibile invocare direttamente un'istanza di Axios passando un oggetto di configurazione come parametro. Questo è equivalente a chiamare `axios(config)`, ed è particolarmente utile quando vuoi ripetere una richiesta usando la stessa configurazione della richiesta originale. + +```js +const instance = axios.create({ baseURL: "/api" }); + +// Funziona esattamente come axios(config) +instance({ + url: "/users", + method: "get", +}); +``` + +Questo tipo di approccio permette logiche di retry pulite quando si gestiscono errori di autenticazione: + +```js +instance.interceptors.response.use(undefined, async (error) => { + if (error.response?.status === 401) { + await refreshToken(); + return instance(error.config); // Ritenta la richiesta originale con la stessa configurazione + } + + throw error; +}); +``` diff --git a/posts/it/interceptors.md b/posts/it/interceptors.md new file mode 100644 index 0000000..05746b4 --- /dev/null +++ b/posts/it/interceptors.md @@ -0,0 +1,62 @@ +--- +title: "Interceptors" +prev_title: "Valori Predefiniti" +prev_link: "/docs/config_defaults" +next_title: "Gestione degli Errori" +next_link: "/docs/handling_errors" +--- + +È possibile intercettare le richieste e le risposte **prima** che vengano gestite da `then` o `catch`. + +La funzione `use` aggiunge un handler alla lista degli handler che vengono eseguiti quando la Promise viene risolta con successo o rifiutata. L'handler è definito da due funzioni specifiche, in base ai due casi. + +È anche possibile passare come terzo parametro un oggetto opzionale options. +L’opzione synchronous indica se l’interceptor deve essere eseguito in modo sincrono: se synchronous è true l’handler viene eseguito sincrono, altrimenti viene considerato asincrono. +Se non viene fornita l’opzione synchronous, l’handler viene trattato come asincrono per impostazione predefinita. +`runWhen` controlla quando eseguire l'interceptor. Si può inserire una funzione che restituisce true o false in base a se l'interceptor deve intervenire. Il valore predefinito restituisce sempre true (l'interceptor viene eseguito sempre). + +```js +// Aggiungi un interceptor alle richieste +axios.interceptors.request.use(function (config) { + // Fai qualcosa prima che venga effettuata la richiesta + return config; + }, function (error) { + // Fai qualcosa quando le richieste vanno in errore + return Promise.reject(error); + }, + { synchronous: true, runWhen: () => /* Questa funzione restituisce true */} +); + +// Aggiungi un interceptor alle risposte +axios.interceptors.response.use(function onFulfilled(response) { + // Qualsiasi codice di stato HTTP che si trova nel range dei 2xx farà triggerare questa funzione + // Fai qualcosa con la risposta + return response; + }, function onRejected(error) { + // Qualsiasi codice di stato HTTP che NON si trova nel range dei 2xx farà triggerare questa funzione + // Fai qualcosa con l'errore + return Promise.reject(error); + }); +``` + +Generalmente, l'interceptor delle risposte `onFulfilled` viene invocato solo per le risposte con codice di stato HTTP nel range 2xx, altrimenti viene invocato `onRejected`. +Tuttavia, questo comportamento dipende dalla configurazione di [validateStatus](/docs/req_config). +Ad esempio, se `validateStatus` è impostato per restituire sempre `true`, allora `onFulfilled` verrà invocato per _qualsiasi_ risposta (senza tener conto del codice di stato HTTP). + +Puoi sempre rimuovere un interceptor in qualsiasi momento, nel caso in cui tu non ne abbia più bisogno. + +```js +const myInterceptor = axios.interceptors.request.use(function () { + /*...*/ +}); +axios.interceptors.request.eject(myInterceptor); +``` + +Puoi aggiungere un inteceptor ad un'istanza di axios. + +```js +const instance = axios.create(); +instance.interceptors.request.use(function () { + /*...*/ +}); +``` diff --git a/posts/it/intro.md b/posts/it/intro.md new file mode 100644 index 0000000..6b8eaf3 --- /dev/null +++ b/posts/it/intro.md @@ -0,0 +1,76 @@ +--- +title: "Come Iniziare" +description: "Un client HTTP per il browser e node.js, basato sulle Promise." +next_title: "Esempio di Utilizzo" +next_link: "/docs/example" +--- + +# Che cos'è Axios? + +Axios è un client HTTP per [`Node.js`](https://nodejs.org) e browser, basato sulle _[Promise](https://javascript.info/promise-basics)_. È _[isomorfico](https://www.lullabot.com/articles/what-is-an-isomorphic-application)_ (ovvero può essere eseguito sia sul browser che su node.js con lo stesso codice). Lato server, usa il modulo `http` nativo di node.js, mentre lato client (browser) usa XMLHttpRequest. + +# Caratteristiche + +- Permette di fare richieste [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) dal browser +- Permette di fare richieste [http](http://nodejs.org/api/http.html) da node.js +- Supporta l'API [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) +- Permette di intercettare richieste e risposte +- Trasformazione dei dati delle richieste e delle risposte +- Annullamento delle richieste +- Gestione dei timeout +- Serializzazione dei parametri query con supporto a voci annidate +- Serializzazione automatica del corpo delle richieste in: + - JSON (`application/json`) + - Multipart / FormData (`multipart/form-data`) + - Form URL encoded (`application/x-www-form-urlencoded`) +- Inviare form HTML come JSON +- Gestione automatica dei dati JSON nelle risposte +- Cattura dello stato di progressione della richiesta per i browser e node.js con informazioni extra (velocità, tempo rimanente) +- Impostare limiti di larghezza di banda per node.js +- Compatibile con FormData e Blob conformi alle specifiche (incluso `node.js`) +- Supporto lato client per la protezione contro [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) + +# Installazione + +Usando npm: + +```bash +$ npm install axios +``` + +Usando bower: + +```bash +$ bower install axios +``` + +Usando yarn: + +```bash +$ yarn add axios +``` + +Usando pnpm: + +```bash +$ pnpm add axios +``` + +Usando jsDelivr CDN: + +```html + +``` + +Usando unpkg CDN: + +```html + +``` + +Moduli CommonJS precompilati per l'importo diretto con l'uso di require (se il tuo bundler dei moduli fallisce nella risoluzione automatica) + +```js +const axios = require("axios/dist/browser/axios.cjs"); // browser +const axios = require("axios/dist/node/axios.cjs"); // node +``` diff --git a/posts/it/multipart.md b/posts/it/multipart.md new file mode 100644 index 0000000..30b5ef2 --- /dev/null +++ b/posts/it/multipart.md @@ -0,0 +1,186 @@ +--- +title: "Corpo Multipart" +prev_title: "Corpo con URL-Encoding" +prev_link: "/docs/urlencoded" +next_title: "Note" +next_link: "/docs/notes" +--- + +## Inviare i dati come `multipart/form-data` + +### Usando l'API FormData + +#### Browser + +```js +const form = new FormData(); +form.append("my_field", "my value"); +form.append("my_buffer", new Blob([1, 2, 3])); +form.append("my_file", fileInput.files[0]); + +axios.post("https://example.com", form); +``` + +Si può ottenere lo stesso risultato usando il serializzatore interno di Axios e il metodo abbreviato corrispondente: + +```js +axios.postForm("https://httpbin.org/post", { + my_field: "my value", + my_buffer: new Blob([1, 2, 3]), + my_file: fileInput.files, // FileList verrà scomposto in campi separati +}); +``` + +I form HTML possono essere passati direttamente come payload della richiesta + +#### Node.js + +```js +import axios from "axios"; + +const form = new FormData(); +form.append("my_field", "my value"); +form.append("my_buffer", new Blob(["some content"])); + +axios.post("https://example.com", form); +``` + +Siccome node.js non supporta al momento la creazione di `Blob` da un file, puoi comunque farlo utilizzando un pacchetto di terze parti. + +```js +import { fileFromPath } from "formdata-node/file-from-path"; + +form.append("my_field", "my value"); +form.append("my_file", await fileFromPath("/foo/bar.jpg")); + +axios.post("https://example.com", form); +``` + +Per le versioni di Axios precedenti alla versione `v1.3.0`, devi importare il pacchetto `form-data`. + +```js +const FormData = require("form-data"); + +const form = new FormData(); +form.append("my_field", "my value"); +form.append("my_buffer", new Buffer(10)); +form.append("my_file", fs.createReadStream("/foo/bar.jpg")); + +axios.post("https://example.com", form); +``` + +### 🆕 Serializzazione automatica + +A partire dalla versione `v0.27.0`, Axios supporta la serializzazione automatica degli oggetti in oggetti di tipo FormData se l'header Content-Type della richiesta è impostato su `multipart/form-data`. + +La seguente richiesta invia i dati nel formato FormData (Browser e Node.js): + +```js +import axios from "axios"; + +axios + .post( + "https://httpbin.org/post", + { + user: { + name: "Dmitriy", + }, + file: fs.createReadStream("/foo/bar.jpg"), + }, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ) + .then(({ data }) => console.log(data)); +``` + +Il serializzatore FormData di Axios supporta alcune terminazioni speciali per eseguire le seguenti operazioni: + +- `{}` - serializza il valore con JSON.stringify +- `[]` - scompatta un oggetto di tipo array (o simile) in più campi separati con la stessa chiave + +> NOTA: +> L'operazione di scomponimento/espansione verrà usata di default sugli array e sugli oggetti FileList + +Il serializzatore di FormData supporta opzioni aggiuntive attraverso la proprietà `config.formSerializer: object` per gestire casi rari: + +- `visitor: Function` - funzione visitor definita dall'utente che verrà chiamata ricorsivamente per serializzare i dati dell'oggetto in un oggetto `FormData`, seguendo regole personalizzate. + +- `dots: boolean = false` - usa la notazione a punti invece delle parentesi per serializzare array ed oggetti. + +- `metaTokens: boolean = true` - aggiunge una terminazione speciale (es, `user{}: '{"name": "John"}'`) nella chiave del FormData. + Il body-parser del back-end potrebbe potenzialmente usare questo tipo di informazione per fare automaticamente il parsing in JSON del valore. + +- `indexes: null|false|true = false` - controlla in che modo verranno aggiunti gli indici alle chiavi generate per oggetti di tipo array `non annidati` + + - `null` - non aggiungere parentesi (`arr: 1`, `arr: 2`, `arr: 3`) + - `false`(predefinito) - aggiungi parentesi vuote (`arr[]: 1`, `arr[]: 2`, `arr[]: 3`) + - `true` - aggiungi le parentesi con i relativi indici (`arr[0]: 1`, `arr[1]: 2`, `arr[2]: 3`) + +Mettiamo caso di avere un oggetto come questo: + +```js +const obj = { + x: 1, + arr: [1, 2, 3], + arr2: [1, [2], 3], + users: [ + { name: "Peter", surname: "Griffin" }, + { name: "Thomas", surname: "Anderson" }, + ], + "obj2{}": [{ x: 1 }], +}; +``` + +Il serializzatore interno di Axios eseguirà il passaggio successivo: + +```js +const formData = new FormData(); +formData.append("x", "1"); +formData.append("arr[]", "1"); +formData.append("arr[]", "2"); +formData.append("arr[]", "3"); +formData.append("arr2[0]", "1"); +formData.append("arr2[1][0]", "2"); +formData.append("arr2[2]", "3"); +formData.append("users[0][name]", "Peter"); +formData.append("users[0][surname]", "Griffin"); +formData.append("users[1][name]", "Thomas"); +formData.append("users[1][surname]", "Anderson"); +formData.append("obj2{}", '[{"x":1}]'); +``` + +```js +import axios from "axios"; + +axios + .post( + "https://httpbin.org/post", + { + "myObj{}": { x: 1, s: "foo" }, + "files[]": document.querySelector("#fileInput").files, + }, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ) + .then(({ data }) => console.log(data)); +``` + +Axios supporta anche i seguenti metodi rapidi: `postForm`, `putForm`, `patchForm` +che non sono altro che i corrispondenti metodi http con l'header content-type impostato già a `multipart/form-data`. + +L'oggetto `FileList` può essere passato direttamente: + +```js +await axios.postForm( + "https://httpbin.org/post", + document.querySelector("#fileInput").files +); +``` + +Tutti i file verranno inviati con gli stessi campi: `files[]`; diff --git a/posts/it/notes.md b/posts/it/notes.md new file mode 100644 index 0000000..483c3fc --- /dev/null +++ b/posts/it/notes.md @@ -0,0 +1,41 @@ +--- +title: "Note" +description: "Ultime note prima di concludere" +prev_title: "Corpo con URL-Encoding" +prev_link: "/docs/urlencoded" +--- + +## Versioni + +Finché axios non raggiungerà la versione `1.0`, le modifiche sostanziali saranno rilasciate sotto una nuova versione minore. Ad esempio, le versioni `0.5.1` e `0.5.4` avranno la stessa API, mentre la versione `0.6.0` presenterà modifiche sostanziali. + +## Promise + +Per essere [supportato](http://caniuse.com/promises), axios dipende dall'implementazione nativa delle Promise dello standard ES6. +Se il tuo ambiente non supporta le Promise di ES6, puoi utilizzare il [polyfill](https://github.com/jakearchibald/es6-promise). + +## TypeScript + +axios include le definizioni [TypeScript](http://typescriptlang.org). + +```typescript +import axios from "axios"; +axios.get("/user?ID=12345"); +``` + +## Risorse + +- [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) +- [Come Aggiornare](https://github.com/axios/axios/blob/v1.x/UPGRADE_GUIDE.md) +- [Ecosistema](https://github.com/axios/axios/blob/v1.x/ECOSYSTEM.md) +- [Come Contribuire](https://github.com/axios/axios/blob/v1.x/CONTRIBUTING.md) +- [Codice di Condotta](https://github.com/axios/axios/blob/v1.x/CODE_OF_CONDUCT.md) + +## Ringraziamenti + +Axios è fortemente ispirata dal [servizio $http](https://docs.angularjs.org/api/ng/service/$http) presente in [Angular](https://angularjs.org/). +In definitiva, Axios è uno sforzo volto a fornire un servizio autonomo simile a `$http` da utilizzare al di fuori di Angular. + +## Licenza + +[MIT](https://github.com/axios/axios/blob/v1.x/LICENSE) diff --git a/posts/it/post_example.md b/posts/it/post_example.md new file mode 100644 index 0000000..ff52636 --- /dev/null +++ b/posts/it/post_example.md @@ -0,0 +1,101 @@ +--- +title: "Richieste POST" +description: "Come eseguire richieste POST con Axios" +prev_title: "Esempio di Utilizzo" +prev_link: "/docs/example" +next_title: "API di Axios" +next_link: "/docs/api_intro" +--- + +## Eseguire una richiesta `POST` + +### JSON + +```js +axios + .post("/user", { + firstName: "Fred", + lastName: "Flintstone", + }) + .then(function (response) { + console.log(response); + }) + .catch(function (error) { + console.log(error); + }); +``` + +Eseguire più richieste concorrenti + +```js +function getUserAccount() { + return axios.get("/user/12345"); +} + +function getUserPermissions() { + return axios.get("/user/12345/permissions"); +} + +const [acct, perm] = await Promise.all([ + getUserAccount(), + getUserPermissions(), +]); + +// OPPURE + +Promise.all([getUserAccount(), getUserPermissions()]).then(function ([ + acct, + perm, +]) { + // ... +}); +``` + +Inviare un form HTML come JSON + +```js +const { data } = await axios.post("/user", document.querySelector("#my-form"), { + headers: { + "Content-Type": "application/json", + }, +}); +``` + +### Form + +- Multipart (`multipart/form-data`) + +```js +const { data } = await axios.post( + "https://httpbin.org/post", + { + firstName: "Fred", + lastName: "Flintstone", + orders: [1, 2, 3], + photo: document.querySelector("#fileInput").files, + }, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } +); +``` + +- Form con URL codificato (`application/x-www-form-urlencoded`) + +```js +const { data } = await axios.post( + "https://httpbin.org/post", + { + firstName: "Fred", + lastName: "Flintstone", + orders: [1, 2, 3], + }, + { + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + } +); +``` diff --git a/posts/it/req_config.md b/posts/it/req_config.md new file mode 100644 index 0000000..6f227f0 --- /dev/null +++ b/posts/it/req_config.md @@ -0,0 +1,258 @@ +--- +title: "Configurazione della Richiesta" +prev_title: "L'Istanza Axios" +prev_link: "/docs/instance" +next_title: "Schema della Risposta" +next_link: "/docs/res_schema" +--- + +Queste sono le opzioni di configurazione disponibili per effettuare le richieste. Solo il campo `url` è obbligatorio. Le richieste verranno impostate di default a `GET` se non è specificato il campo `method`. + +```js +{ + // `url` è l'URL del server che verrà utilizzato per la richiesta + url: '/user', + + // `method` è il metodo di richiesta da utilizzare quando si effettua la richiesta + method: 'get', // default + + // `baseURL` verrà posto prima di `url` a meno che l'indirizzo `url` non sia assoluto. + // Può tornare utile impostare il `baseURL` di un'istanza di axios + // per poi passare URL relativi ai metodi di quell'istanza. + baseURL: 'https://some-domain.com/api', + + // `allowAbsoluteUrls` determina se gli URL assoluti sovrascriveranno il `baseUrl` configurato. + // Quando impostato a true (valore predefinito), i valori assoluti per il campo `url` sovrascriverranno il campo `baseUrl`. + // Quando impostato a false, i valori assoluti per il campo `url` verranno sempre preceduti dal `baseUrl`. + allowAbsoluteUrls: true, + + // `transformRequest` permette di modificare i dati della richiesta prima che venga inviata al server. + // Questo parametro viene applicato solo ai metodi di richiesta 'PUT', 'POST', 'PATCH' e 'DELETE' + // L'ultima funzione nell'array deve restituire una stringa oppure un'istanza di Buffer, ArrayBuffer, FormData o Stream. + // Puoi modificare l'oggetto degli header. + transformRequest: [function (data, headers) { + // Fai quello che vuoi per trasformare i dati + + return data; + }], + + // `transformResponse` permette di modificare i dati della risposta prima che questi passino per il then/catch + transformResponse: [function (data) { + // Fai quello che vuoi per trasformare i dati + + return data; + }], + + // `headers` sono gli header personalizzati che puoi inviare + headers: {'X-Requested-With': 'XMLHttpRequest'}, + + // `params` sono i parametri URL che vengono inviati con la richiesta + // Deve essere un plain object oppure un oggetto URLSearchParams + // NOTA: i parametri con valore null o undefined non vengono mostrati nell'URL. + params: { + ID: 12345 + }, + + // `paramsSerializer` è una configurazione opzionale che ha il compito di serializzare `params` + paramsSerializer: { + encode?: (param: string): string => { /* Qui puoi eseguire logiche personalizzate e poi restituire la stringa con la trasformazione */ }, // funzione di codifica personalizzata; invia le coppie chiave/valore in modo iterativo + serialize?: (params: Record, options?: ParamsSerializerOptions ), // per imitare il comportamento pre 1.x e gestire tu la serializzazione dei parametri + indexes: false // formato degli indici dell'array (null - senza parentesi, false (predefinito) - parentesi vuote, true - parentesi con gli indici) + }, + + // `data` sono i dati da inviare come corpo della richiesta + // Questo parametro viene applicato solo ai metodi di richiesta 'PUT', 'POST', 'PATCH' e 'DELETE'. + // Se non viene specificato `transformRequest`, deve essere di uno dei seguenti tipi: + // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams + // - Solo per i Browser: FormData, File, Blob + // - Solo per Node: Stream, Buffer + data: { + firstName: 'Fred' + }, + + // La sintassi alternativa per inviare i dati nel corpo di una richiesta + // metodo post + // viene inviato solo il valore, non la chiave + data: 'Country=Brasil&City=Belo Horizonte', + + // `timeout` definisce il numero di millisecondi prima che la richiesta vada in timeout. + // Se la richiesta richiede più tempo del valore definito in `timeout`, la richiesta verrà terminata. + timeout: 1000, // il valore predefinito è `0` (nessun timeout) + + // `withCredentials` indica se le richieste Access-Control cross-site debbano essere fatte + // utilizzando le credenziali + withCredentials: false, // predefinito + + // `adapter` permette di gestire manualmente le richieste per rendere il testing più facile. + // Restituisce una promise e fornisce una risposta valida (vedi lib/adapters/README.md) + adapter: function (config) { + /* ... */ + }, + + // `auth` indica di utilizzare l'autorizzazione HTTP Base, fornendo le credenziali. + // Verrà messo quindi un header `Authorization`, sovrascrivendo qualsiasi + // header `Authorization` già presente che hai impostato nel campo `headers`. + // Fai attenzione che solo l'autorizzazione HTTP Base è configurabile attraverso questo parametro. + // Per i token di tipo Bearer e simili, usa degli header personalizzati per gestire l'`Autorizzazione`; + auth: { + username: 'janedoe', + password: 's00pers3cret' + }, + + // `responseType` indica il tipo di dato con cui il server potrà rispondere + // Le opzioni disponibili sono: 'arraybuffer', 'document', 'json', 'text', 'stream' + // solo per il browser: 'blob' + responseType: 'json', // predefinito + + // `responseEncoding` indica la codifica da utilizzare per decodificare le risposte (solo per Node.js) + // Nota: Viene ignorato per `responseType` di tipo 'stream' o per richieste lato client. + responseEncoding: 'utf8', // default + + // `xsrfCookieName` è il nome del cookie da utilizzare come valore per i token xsrf + xsrfCookieName: 'XSRF-TOKEN', // default + + // `xsrfHeaderName` è il nome dell'header HTTP che porta il valore del token xsrf + xsrfHeaderName: 'X-XSRF-TOKEN', // default + + // `onUploadProgress permette di gestire gli eventi di progressione dei caricamenti + // solo per i browser + onUploadProgress: function (progressEvent) { + // Gestisci l'evento di progressione nativo + }, + + // `onDownloadProgress` permette di gestire gli eventi di progressione dei downloads + // solo per i browser + onDownloadProgress: function (progressEvent) { + // Gestisci l'evento di progressione nativo + }, + + // `maxContentLength` definisce la dimensione massima permessa del contenuto della risposta HTTP, in bytes. + maxContentLength: 2000, + + // `maxBodyLength` (solo per Node) definisce la dimensione massima permessa del contenuto della richiesta HTTP, in bytes. + maxBodyLength: 2000, + + // `validateStatus` definisce se risolvere o rifiutare la promise per un codice di stato specifico della risposta HTTP. + // Se `validateStatus` restituisce `true` (oppure se impostato a `null` o `undefined`), + // la promise verrà risolta; altrimenti la promise verrà rifiutata. + validateStatus: function (status) { + return status >= 200 && status < 300; // predefinito + }, + + // `maxRedirects` definisce il numero massimo di reindirizzamenti da seguire in node.js. + // Se impostato a 0, non verrà seguito nessun reindirizzamento. + maxRedirects: 21, // predefinito + + // `beforeRedirect` definisce una funzione che verrà chiamata prima del reindirizzamento. + // Usala per regolare le opzioni della richiesta al momento del reindirizzamento, + // ispezionare l'ultimo header della risposta, + // oppure per annullare la richiesta lanciando un errore. + // Se maxRedirects è impostato a 0, `beforeRedirect` non verrà utilizzato. + beforeRedirect: (options, { headers }) => { + if (options.hostname === "example.com") { + options.auth = "user:password"; + } + }, + + // `socketPath` definisce il percorso del Socket UNIX da usare in node.js. + // esempio '/var/run/docker.sock' per inviare richieste al daemon di docker. + // Puoi specificare solo `socketPath` oppure `proxy`. + // Se vengono definiti entrambi, verrà utilizzato `socketPath`. + socketPath: null, // predefinito + + // `transport` determina il metodo di trasporto che verrà utilizzato per effettuare le richieste. + // Se definito, verrà scelto quello. Altrimenti, se `maxRedirects` è uguale a 0, verrà utilizzata di default la libreria `http` o `https`, + // in base al tipo di protocollo definito nel campo `protocol`. + // Altrimenti, verrà utilizzata la libreria `httpFollow` o `httpsFollow`, sempre in base al tipo di protocollo che può gestire i reindirizzamenti. + transport: undefined, // default + + // `httpAgent` e `httpsAgent` definiscono un agent personalizzato da utilizzare quando si effettuano + // richieste HTTP e HTTPS, rispettivamente, in node.js. Questo permette di aggiungere + // opzioni come `keepAlive` che non sono abilitate di default prima della versione v19.0.0 di Node.js. + // In seguito alla versione v19.0.0, non serve più modificare l'agent per abilitare `keepAlive`, in quanto + // `http.globalAgent` ha già `keepAlive` abilitato di default. + httpAgent: new http.Agent({ keepAlive: true }), + httpsAgent: new https.Agent({ keepAlive: true }), + + // `proxy` definisce l'hostname, la porta e il protocollo del server proxy. + // Puoi anche definire il tuo proxy utilizzando le variabili d'ambiente + // convenzionali `http_proxy` e `https_proxy`. + // Se decidi di utilizzare le variabili d'ambiente per la configurazione del proxy, + // puoi anche definire una variabile d'ambiente chiamata `no_proxy` come una lista separata da virgola + // dei domini che non devono essere soggetti a proxy. + // Utilizza `false` per disabilitare i proxy, ignorando le variabili d'ambiente definite. + // Disabilita se stai fornendo httpAgent/httpsAgent personalizzati per gestire il proxy delle richieste. + // `auth` indica che deve essere utilizzata l'autorizzazione HTTP Base per la connessione al proxy, + // fornendo le credenziali. + // Questo aggiungerà un header `Proxy-Authorization`, andando a sovrascrivere + // qualsiasi header `Proxy-Authorization` già esistente che hai impostato tramite il campo `headers`. + // Se il server proxy utilizza HTTPS, devi impostare il protocollo a `https`. + + proxy: { + protocol: 'https', + host: '127.0.0.1', + port: 9000, + auth: { + username: 'mikeymike', + password: 'rapunz3l' + } + }, + + // Puoi utilizzare `signal` e istanze di AbortController per annullare la richiesta + signal: new AbortController().signal, + + // (Deprecata) `cancelToken` specifica un token di cancellazione che può essere usato per annullare la richiesta + // (dai un'occhiata alla sezione Annullamento per ulteriori dettagli) + cancelToken: new CancelToken(function (cancel) { + }), + + // Un modo alternativo per annullare richieste Axios usando un AbortController + signal: new AbortController().signal, + + // `decompress` indica se il corpo della risposta deve essere decompresso automaticamente. + // Se impostato a `true`, rimuove anche l'header 'content-encoding' dagli oggetti delle risposte + // di tutte le risposte decompresse. + // - Solo per Node (XHR non può disabilitare la decompressione) + decompress: true // default + + // `insecureHTTPParser` boolean. + // Indica se usare il parser HTTP non sicuro che accetta header HTTP invalidi. + // Questo permette interoperabilità con implementazioni HTTP non conformi. + // Tuttavia, non è raccomandato l'uso del parser non sicuro. + // Vedi le opzioni https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_request_url_options_callback + // Vedi anche https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/#strict-http-header-parsing-none + insecureHTTPParser: undefined // default + + // Opzioni transizionali per la retro-compatibilità. Potrebbe essere rimosso nelle future versioni. + transitional: { + // Modalità silenziosa di parsing JSON + // `true` – ignora gli errori di parsing JSON e imposta response.data a null se il parsing fallisce (vecchio comportamento) + // `false` – lancia un SyntaxError se il parsing del JSON fallisce (Nota: responseType deve essere impostato a 'json') + silentJSONParsing: true, // default value for the current Axios version + + // try to parse the response string as JSON even if `responseType` is not 'json' + forcedJSONParsing: true, + + // throw ETIMEDOUT error instead of generic ECONNABORTED on request timeouts + clarifyTimeoutError: false, + }, + + env: { + // La classe FormData da utilizzare automaticamente per serializzare il payload in un oggetto FormData. + FormData: window?.FormData || global?.FormData + }, + + formSerializer: { + visitor: (value, key, path, helpers) => {}; // funzione visitor personalizzata per serializzare i valori del form + dots: boolean; // Usa la notazione a punti invece del formato con le parentesi + metaTokens: boolean; // Conserva terminazioni speciali come {} nella chiave del parametro + indexes: boolean; // formato degli indici dell'array null - senza parentesi, false - parentesi vuote, true - parentesi con gli indici + }, + + // Adapter http (node.js) + maxRate: [ + 100 * 1024, // 100KB/s limite di upload, + 100 * 1024 // 100KB/s limite di download + ] +} +``` diff --git a/posts/it/res_schema.md b/posts/it/res_schema.md new file mode 100644 index 0000000..e156689 --- /dev/null +++ b/posts/it/res_schema.md @@ -0,0 +1,51 @@ +--- +title: "Schema della Risposta" +prev_title: "Configurazione della Richiesta" +prev_link: "/docs/req_config" +next_title: "Valori Predefiniti" +next_link: "/docs/config_defaults" +--- + +La risposta di una richiesta contiene le seguenti informazioni. + +```js +{ + // `data` è la risposta fornita dal server + data: {}, + + // `status` è il codice di stato HTTP della risposta del server + status: 200, + + // `statusText` è il messaggio dello stato HTTP del server + // A partire da HTTP/2 il messaggio è vuoto o non supportato. + // (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4) + statusText: 'OK', + + // 'headers' sono gli header HTTP con cui ha risposto il server + // Tutti i nomi degli header sono in minuscolo ed è possibile accedervi usando la notazione con le parentesi quadre. + // Esempio: `response.headers['content-type']` + headers: {}, + + // `config` è la configurazione che è stata fornita ad axios per effettuare la richiesta + config: {}, + + // `request` è la richiesta che ha generato questa risposta + // È l'ultima istanza di ClientRequest in node.js (nei rendirizzamenti) + // e l'istanza XMLHttpRequest nel browser + request: {} +} +``` + +Se usi `then`, riceverai la seguente risposta: + +```js +axios.get("/user/12345").then(function (response) { + console.log(response.data); + console.log(response.status); + console.log(response.statusText); + console.log(response.headers); + console.log(response.config); +}); +``` + +Se usi `catch`, o passi una [callback di rejection](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) come secondo parametro di `then`, la risposta sarà disponibile attraverso l'oggetto `error`, come spiegato nella sezione [Gestione degli Errori](/docs/handling_errors). diff --git a/posts/it/sponsor.md b/posts/it/sponsor.md new file mode 100644 index 0000000..93a35b7 --- /dev/null +++ b/posts/it/sponsor.md @@ -0,0 +1,92 @@ +--- +title: "Sponsorizzare Axios" +--- + +Grazie per aver deciso di supportare il nostro progetto. La tua donazione verrà utilizzata per manutenere e sviluppare Axios. + +Come ricompensa per i nostri sponsor più importanti, offriamo l'opportunità di aggiungere il tuo logo e una breve informazione sul nostro sito e/o [Readme.md](https://github.com/axios/axios) in base al livello di supporto che hai scelto. +Questa operazione viene totalmente automatizzata se effettui la donazione tramite [OpenCollective.com](https://opencollective.com/axios/contribute). Se utilizzi questo metodo, il tuo logo verrà aggiunto entro 24 ore. + +Il tuo logo può essere messo: + +- Nel carosello della pagina principale +- Nei caroselli di ogni pagina della documentazione +- In cima al [Readme.md](https://github.com/axios/axios) della nostra repo + +La posizione nel carosello dipende da: + +- data della donazione (gli sponsor nuovi vengono mostrati temporaneamente in cima) +- il tier di supporto scelto +- l'importo della donazione +- consistenza nelle donazioni + +Se hai scelto di donare tramite [GitHub](https://github.com/sponsors/axios), dovrai contattarci se desideri promuovere il tuo logo in base ai nostri tier di supporto. + +### Tier + +Guarda la lista dei tier su [Open Collective](https://opencollective.com/axios/contribute) + +| | Bronzo | Argento | Oro | Platino | +| ------------------------------------------------------------- | :--------: | :---------: | :---------: | :--------------: | +| Pagina principale | small logo | medium logo | large logo | extra large logo | +| Pagine della documentazione | | | medium logo | large logo | +| [Readme.md](https://github.com/axios/axios) | | | small logo | medium logo | +| Unione dei dati dalla repo GitHub degli sponsor | | + | + | + | +| Blocco dei link nei suggerimenti\* | | | + | + | +| Video Youtube incorporato nei suggerimenti\* | | | + | + | +| Lunghezza max. della descrizione nel Readme.md (in caratteri) | | | 100 | 150 | + +> Nota: +> Il blocco dei link extra e dei video può essere impostato solo tramite il file `sponsors.json` + +### Tipo di Supporto + +Sei libero di creare anche una donazione personalizzata, nel qual caso si otterranno i vantaggi del tier più alto esistente che comprende +l'importo della donazione. L'importo in eccesso verrà poi preso in considerazione per determinare l'ordine +degli sponsor presenti nel carosello. + +### Logo dello Sponsor + +Il tuo logo verrà scaricato sul nostro server, ottimizzato, rimossi i bordi vuoti e ridimensionato mantenendo le proporzioni. +Se la lunghezza del logo è considerevolmente più grande dell'altezza, la didascalia del testo verrà nascosta, +e il logo riempirà tutto lo spazio disponibile. L'altezza massima del logo è uguale per ogni tier di supporto. + +### Descrizione + +Se non viene fornita alcuna descrizione, cercheremo di prenderla dai meta-tag del sito dello sponsor. + +### GitHub + +Se hai aggiunto il tuo profilo GitHub al tuo profilo Open Collective, +puoi creare una repository speciale chiamata `axios-sponsor` con dentro il file `sponsor.json` +inserito nella root. In questo modo puoi gestire lì dentro le informazioni del tuo sponsor. + +I dati presenti in questo file verranno uniti con quelli del tuo profilo Open Collective. In questo modo puoi aggiungere informazioni aggiuntive +per farti pubblicità. + +Il file `sponsor.json` ha la seguente struttura (ogni campo è opzionale): + +```json +{ + "displayName": "Umbrella Corporation", + "targetLink": "https://umbrellacorp.com/", + "alt": "Umbrella Corporation", + "image": "https://fake.com/logo.png", + "image_dark": "https://fake.com/logo_dark.png", + "description": "The Umbrella Corporation is a pharmaceutical company", + "website": "https://google.com/", + "github": "https://github.com/fakeGitHib", + "icon": "https://fake.com/icon.png", + "video": "https://www.youtube.com/embed/isosE4Bowh0", + "twitter": "https://x.com/profile", + "showCaption": true, + "crown": false, + "hide": false, + "links": { + "link1": "https://google.com/", + "link2": "https://google.com/" + } +} +``` + +Il nostro backend scaricherà i dati aggiornati degli sponsor del sito ogni 24 ore. diff --git a/posts/it/translating.md b/posts/it/translating.md new file mode 100644 index 0000000..57fb100 --- /dev/null +++ b/posts/it/translating.md @@ -0,0 +1,46 @@ +--- +title: "Tradurre la documentazione" +--- + +Per rendere Axios accessibile a più persone possibili, è importante che questa documentazione possa essere letta in tutte le lingue. Siamo grati a chiunque voglia contribuire alla traduzione della documentazione. Questa guida fornisce tutte le istruzioni per aggiungerne una nuova. + +## Struttura + +Ogni traduzione è composta da un file di configurazione, `{language-shortcut}.lang.js` (per esempio, `en.lang.js` oppure `de.lang.js`) e dai file relativi alla traduzione della documentazione presenti in `posts/{language-shortcut}/*.md` (per esempio `posts/en` oppure `posts/de`). `{language-shortcut}` deve essere sostituito con il codice [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) della tua lingua, composto da due lettere. + +## Configurare la tua lingua + +- Copia `en.lang.js`. +- Rinominalo in `{language-shortcut}.lang.js`. +- Sostituisci `display` con il nome della tua lingua, nella tua lingua. Per esempio, se stai traducendo in tedesco, metti “Deutsch” invece di “Tedesco”. +- Sostituisci il prefisso con `/{language-shortcut}/`. +- Traduci i valori nei campi `p` e `t`. +- Traduci tutte le proprietà con l'etichetta `text` nella barra laterale. **Nota:** Dall'ultima versione di questa documentazione, non è più necessario aggiornare i link della barra laterale. + +### Registrare la configurazione + +Una volta finita la configurazione della lingua e aver tradotto le frasi e i link nel file di configurazione, dovrai registrarla nella configurazione principale. Per farlo, apri `inert.config.js` e aggiungi la seguente riga nelle prime righe del file: + +```js +const {language-shortcut}Config = require('./{language-shortcut}.config.js'); +``` + +Ovviamente, ricordati di sostituire `{language-shortcut}` con il codice [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) corretto (anche nel nome della variabile!). + +Ora, cerca la costante `langs`. Se questa costante si trova sopra la tua dichiarazione di `require`, sposta la tua dichiarazione di `require` sopra. Aggiungi poi il seguente oggetto alla lista `langs`: + +```js +const langs = [ + ... + { + name: 'Qualsiasi nome che definisca in maniera univoca la tua lingua, per esempio "English" oppure "German"', + prefix: "Lo stesso prefisso utilizzato per il file di configurazione.", + config: {language-shortcut}Config // L'oggetto di configurazione che hai importato in precedenza + } + ... +]; +``` + +Ora, puoi iniziare a tradurre i file. Copia la cartella `posts/en` in una nuova cartella `posts/{language-shortcut}` e traduci tutti i file (non tradurre i nomi dei file, ovviamente). + +Se riscontri qualsiasi problema, sentiti libero di [creare una issue](https://github.com/axios/axios-docs/issues/new/choose). diff --git a/posts/it/urlencoded.md b/posts/it/urlencoded.md new file mode 100644 index 0000000..2d704e7 --- /dev/null +++ b/posts/it/urlencoded.md @@ -0,0 +1,123 @@ +--- +title: "Corpo con URL-Encoding" +prev_title: "Annullare le Richieste" +prev_link: "/docs/cancellation" +next_title: "Corpo Multipart" +next_link: "/docs/multipart" +--- + +Per impostazione predefinita, Axios serializza gli oggetti JavaScript in `JSON`. +Se invece vuoi inviare i dati nel formato `application/x-www-form-urlencoded`, puoi utilizzare uno dei seguenti approcci. + +### Browser + +In un browser puoi usare l’API [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) nel modo seguente: + +```js +const params = new URLSearchParams(); +params.append("param1", "value1"); +params.append("param2", "value2"); + +axios.post("/foo", params); +``` + +> Nota: `URLSearchParams` non è supportato da tutti i browser (vedi [caniuse.com](http://www.caniuse.com/#feat=urlsearchparams)), ma esiste un [polyfill](https://github.com/WebReflection/url-search-params). Assicurati di includerlo a livello globale se devi supportare anche quei browser. + +In alternativa puoi codificare i dati usando la libreria [`qs`](https://github.com/ljharb/qs): + +```js +const qs = require("qs"); +axios.post("/foo", qs.stringify({ bar: 123 })); +``` + +Oppure, in un altro modo (ES6): + +```js +import qs from "qs"; +const data = { bar: 123 }; +const options = { + method: "POST", + headers: { "content-type": "application/x-www-form-urlencoded" }, + data: qs.stringify(data), + url, +}; +axios(options); +``` + +### Node.js + +#### Query string + +In Node.js puoi usare il modulo [`querystring`](https://nodejs.org/api/querystring.html) in questo modo: + +```js +const querystring = require("querystring"); +axios.post("http://something.com/", querystring.stringify({ foo: "bar" })); +``` + +Oppure puoi usare ['URLSearchParams'](https://nodejs.org/api/url.html#url_class_urlsearchparams) dal ['modulo url'](https://nodejs.org/api/url.html): + +```js +const url = require("url"); +const params = new url.URLSearchParams({ foo: "bar" }); +axios.post("http://something.com/", params.toString()); +``` + +Puoi usare anche la libreria [`qs`](https://github.com/ljharb/qs). + +> Nota: la libreria `qs` è preferibile se hai bisogno di serializzare oggetti annidati, perché `querystring` ha dei problemi noti con questo tipo di utilizzo (https://github.com/nodejs/node-v0.x-archive/issues/1665). + +### 🆕 Serializzazione automatica + +Axios può serializzare automaticamente l’oggetto data in formato urlencoded se l’header `content-type` è impostato a `application/x-www-form-urlencoded`. + +Questo funziona sia nel browser che in `node.js`: + +```js +const data = { + x: 1, + arr: [1, 2, 3], + arr2: [1, [2], 3], + users: [ + { name: "Peter", surname: "Griffin" }, + { name: "Thomas", surname: "Anderson" }, + ], +}; + +await axios.post("https://postman-echo.com/post", data, { + headers: { "content-type": "application/x-www-form-urlencoded" }, +}); +``` + +Il server vedrà qualcosa di questo tipo: + +```js + { + x: '1', + 'arr[]': [ '1', '2', '3' ], + 'arr2[0]': '1', + 'arr2[1][0]': '2', + 'arr2[2]': '3', + 'arr3[]': [ '1', '2', '3' ], + 'users[0][name]': 'Peter', + 'users[0][surname]': 'griffin', + 'users[1][name]': 'Thomas', + 'users[1][surname]': 'Anderson' + } +``` + +Se il parser del body del tuo framework server (ad esempio `body-parser` di `express.js`) supporta la decodifica di oggetti annidati, sul server riceverai automaticamente lo stesso oggetto che hai inviato. + +Esempio di echo server (`express.js`) : + +```js +var app = express(); + +app.use(bodyParser.urlencoded({ extended: true })); // support url-encoded bodies + +app.post("/", function (req, res, next) { + res.send(JSON.stringify(req.body)); +}); + +server = app.listen(3000); +```