Quelle est la différence entre Axios et Fetch?

Fetch et Axios sont très similaires dans la fonctionnalité, mais pour une compatibilité plus en arrière Axios semble mieux fonctionner (fetch ne fonctionne pas dans IE 11 par exemple, cochez ce post )

aussi, si vous travaillez avec les requêtes JSON, ce sont quelques différences que je suis tombé sur.

Fetch JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

:

• Fetch corps = Axios' données
• Fetch's body doit être stringified , les données D'Axios contient le objet
• Fetch n'a pas d'url dans l'objet de requête, Axios url dans l'objet de requête
• La fonction de requête Fetch inclut l'url comme paramètre , la fonction de requête Axios n'inclut pas l'url comme paramètre .
• Extraire la demande est ok lors de la réponse de l'objet contient le ok propriété , Axios demande est ok quand état est de 200 et statusText est 'OK'
• pour obtenir la réponse de l'objet json: dans fetch appeler la fonction json () sur L'objet response, dans Axios obtenir propriété de données de l'objet response.

Espérons que cette aide.

était curieux à ce sujet aussi, trouvé votre question ici, puis trouvé ce post moyen qui peut se révéler utile. Fetch semble un peu plus bavard et impitoyable: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte

dans l'Ensemble, ils sont très similaires. Quelques avantages d'axios:

• Transformateurs: permettre d'effectuer des transformations sur les données avant la demande ou après la réponse est reçue
Intercepteurs
• : vous permettent de modifier entièrement la demande ou la réponse (en-têtes également). effectuer également des opérations asynchrones avant que la requête ne soit faite ou avant que la promesse ne soit réglée
• intégré XSRF protection

je pense que vous devriez utiliser axios.

en plus... Je jouais avec différents libs dans mon test et j'ai remarqué leur traitement différent des requêtes 4xx. Dans ce cas, mon test renvoie un objet json avec une réponse de 400. Voici comment 3 libs populaires gèrent la réponse:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

d'intérêt est que request-promise-native et axios jeter sur la réponse 4xx tandis que node-fetch ne fait pas. Aussi fetch utilise une promesse pour JSON parsing.

les avantages d'axios:

• Transformateurs: permettre d'effectuer des transformations sur les données avant la demande ou après la réponse est reçue
Intercepteurs
• : vous permettent de modifier entièrement la demande ou la réponse (en-têtes également). effectuer également des opérations asynchrones avant que la requête ne soit faite ou avant que la promesse ne soit réglée
• protection XSRF intégrée

avantages de axios plus de fetch