Axios ve Fetch arasındaki fark nedir?

Getirme kullanarak web hizmetini arıyorum ama aynı axios yardımıyla yapabilirsiniz. Şimdi kafam karıştı. Ya aksaklık mı yoksa getirme mi?

Getirme ve Axios işlevsellik bakımından çok benzer, ama daha geriye dönük uyumluluk için Axios daha iyi çalışması gibi görünüyor (getirme örneğin IE 11 iş değil, kontrol Bu yayını )

Ayrıca, JSON istekleriyle çalışıyorsanız, aşağıdakilerle karşılaştığım bazı farklılıklar vardır.

JSON yayın isteğini getir

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 yayın isteği

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
}

Yani:

• 'S Getirme vücudun = AXIOS' verilerini
• Getirme gövdesi dize edilmelidir , Axios'un verileri nesneyi içerir
• Getirme hiçbir URL var istek nesnesinde, Axios URL var isteği nesnesinde
• Getirme isteği işlevi parametre olarak url'yi içerir , Axios istek işlevi ise parametre olarak url'yi içermez .
• Talebidir Fetch Tamam yanıt nesnesi içerdiğinde Tamam özelliği , Axios talebidir Tamam olduğunda durum 200 ve statusText 'Tamam' olduğunu
• Json nesnesi yanıtını almak için: fetch içinde yanıt nesnesindeki json () işlevini çağırın, Axios'ta yanıt nesnesinin data özelliğini alın .

Bu yardımcı olur umarım.

Bunlar HTTP istek kitaplıklarıdır ...

Sonunda aynı şüphe ile karşılaşıyorum, ancak bu yazıdaki tablo beni götürüyor isomorphic-fetch. Hangi fetchNodeJS ile çalışır.

http://andrewhfarmer.com/ajax-libraries/

Yukarıdaki bağlantı öldü Aynı tablo burada: https://www.javascriptstuff.com/ajax-libraries/

Veya burada:

GitHub'daki mzabriskie'ye göre :

Genel olarak çok benzerler. Axios'un bazı faydaları:

• Transformers: bir istek yapılmadan önce veya bir yanıt alındıktan sonra veriler üzerinde dönüşüm gerçekleştirilmesine izin ver

• Durdurucular: isteği veya yanıtı tamamen değiştirmenize izin verir (başlıklar da). ayrıca, bir istek yapılmadan önce veya Promise yerleşmeden önce zaman uyumsuz işlemler gerçekleştirin

• Dahili XSRF koruması

lütfen Tarayıcı Destek Eksenlerini kontrol edin

Sanırım aksiyom kullanmalısın.

Getirme API'sı ile axios API'sı arasında bir büyük fark daha

• Hizmet çalışanını kullanırken, getirme API'sını yalnızca HTTP isteğini kesmek istiyorsanız kullanmanız gerekir
• Ör. Servis çalışanı kullanarak PWA'da önbellekleme yaparken, axios API'sı kullanıyorsanız önbellekleme yapamazsınız (yalnızca getirme API'sı ile çalışır)

Axios, NPM kullanılarak bir React projesine kolayca kurulabilen bağımsız bir üçüncü taraf paketidir.

Bahsettiğiniz diğer seçenek getirme işlevidir. Axios'un aksine, fetch()çoğu modern tarayıcıda yerleşiktir. Getirme ile üçüncü taraf bir paket yüklemenize gerek yoktur.

Bu size kalmış, fetch()ne yaptığınızı bilmiyorsanız VEYA sadece bence daha basit olan Axios'u kullanmanız durumunda gidebilir ve potansiyel olarak berbat edebilirsiniz .

Buna ek olarak ... Testimde çeşitli kütüphanelerle oynuyordum ve 4xx isteklerinin farklı şekilde ele alındığını fark ettim. Bu durumda testim 400 yanıtı olan bir json nesnesi döndürür. 3 popüler kütüphanenin cevabı şu şekilde ele alınır:

// 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)

İlgi olduğunu request-promise-nativeve axiossüre 4xx yanıta atmak node-fetchdeğildir. Ayrıca fetchjson ayrıştırma için bir söz kullanır.

Aksiyosun faydaları:

• Transformers: istek yapılmadan önce veya yanıt alındıktan sonra veriler üzerinde dönüşüm gerçekleştirilmesine izin ver
• Durdurucular: isteği veya yanıtı tamamen değiştirmenize izin verir (başlıklar da). ayrıca istek yapılmadan veya Promise yerleşmeden önce zaman uyumsuz işlemler gerçekleştirin
• Dahili XSRF koruması

Avantajları axiosoverfetch