Axios vs Fetch: Quin hauríeu d'utilitzar?

Bloc

Axios vs Fetch: Quin hauríeu d'utilitzar?

Axios és el client HTTP recomanat oficialment de JS. Usem de tant en tant superagent , però gairebé mai no fem servir el fitxer fetch () funció . El motiu és que Axios redueix dràsticament la quantitat de caldera que necessiteu per a la vostra sol·licitud mitjana d’API. A continuació, es detallen alguns dels motius pels quals:

Axios ho és isomorf , fetch no ho és

La sintaxi de les sol·licituds bàsiques d'Axios és la mateixa tant a Node.js com al navegador. Com que Node.js no té cap funció integrada fetch() funció, heu d'utilitzar un polilloc com node-fetch . I n’hi ha diversos diferències conegudes entre la recuperació de node i el navegador fetch () .

Axios genera un error quan falla una sol·licitud

Un dels problemes més molestos amb fetch() això és tot no genera cap error quan el servidor respon amb un estat d'error HTTP, com ara 404 o 500 .

fetch('https://httpbin.org/post').catch(err => { /* No error even though the server responded with 405 */ }); axios.get('https://httpbin.org/post').catch(err => { err.response.status; // 405 'METHOD NOT ALLOWED' });

Tanmateix, fetch() fa llança un error si no pot arribar al servidor, de manera que sempre necessiteu dos camins diferents per gestionar errors amb fetch(). La situació és encara pitjor asíncron / espera : cada fetch() necessita un extra llavors () per bombollar els errors.

Axios error handling és molt més fàcil: feu servir catch().

JSON automàtic i serialització i anàlisi codificats per formularis

La majoria de les API modernes utilitzen JSON o codificació de formularis per a òrgans de sol·licitud. Axios gestiona JSON i codifica el formulari automàticament, així com automàticament serialització de cadenes de consulta .

// Serialize JSON body and query params with fetch: body = JSON.stringify(body); query = new URLSearchParams(query).toString(); const res = await fetch('/myendpoint?' + query, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body }); // Serialize JSON body and query params with axios: await axios.post('/myendpoint', { params: query, body });

#axios #fetch #programming #developer

masteringjs.io

Axios vs Fetch: Què hauríeu d'utilitzar?

Heu d'utilitzar Axios o la recuperació nativa del navegador ()? El motiu és que Axios redueix dràsticament la quantitat de caldera que necessiteu per a la vostra sol·licitud mitjana d’API. A continuació s’explica per què heu d’utilitzar Axios.