Apa perbedaan antara Axios dan Fetch?

Saya menelepon layanan web dengan menggunakan fetch tetapi hal yang sama dapat saya lakukan dengan bantuan aksioma. Jadi sekarang saya bingung. Haruskah saya memilih aksioma atau mengambil?

Fetch dan Axios sangat mirip dalam fungsi, tetapi untuk kompatibilitas lebih lanjut Axios tampaknya bekerja lebih baik (mengambil tidak berfungsi di IE 11 misalnya, periksa posting ini )

Juga, jika Anda bekerja dengan permintaan JSON, berikut adalah beberapa perbedaan yang saya temui.

Ambil permintaan pos JSON

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
}

Permintaan posting Axios JSON

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
}

Begitu:

• Ambil ini tubuh = Axios' Data
• Tubuh Fetch harus dirubah , data Axios berisi objek
• Ambil tidak memiliki url di objek permintaan, Axios memiliki url di objek permintaan
• Fungsi permintaan pengambilan menyertakan url sebagai parameter , fungsi permintaan Axios tidak menyertakan url sebagai parameter .
• Ambil permintaan ok ketika objek respons berisi properti ok , permintaan Axios ok ketika status 200 dan statusText 'OK'
• Untuk mendapatkan respons objek json: dalam mengambil panggilan, fungsi json () pada objek respons, di Axios mendapatkan properti data objek respons.

Semoga ini membantu.

Itu adalah perpustakaan permintaan HTTP ...

Saya berakhir dengan keraguan yang sama tetapi tabel dalam posting ini membuat saya setuju isomorphic-fetch. Yang mana fetchselain bekerja dengan NodeJS.

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

Tautan di atas mati. Tabel yang sama ada di sini: https://www.javascriptstuff.com/ajax-libraries/

Atau di sini:

Menurut mzabriskie di GitHub :

Secara keseluruhan mereka sangat mirip. Beberapa manfaat aksioma:

• Transformer: memungkinkan melakukan transformasi pada data sebelum permintaan dibuat atau setelah tanggapan diterima

• Pencegat: memungkinkan Anda untuk mengubah permintaan atau tanggapan sepenuhnya (tajuk juga). juga, lakukan operasi async sebelum permintaan dibuat atau sebelum Janji diselesaikan

• Built-in XSRF perlindungan

silakan periksa Dukungan Browser Axios

Saya pikir Anda harus menggunakan aksioma.

Satu lagi perbedaan utama antara mengambil API & axios API

• Saat menggunakan pekerja layanan, Anda harus menggunakan API ambil hanya jika Anda ingin mencegat permintaan HTTP
• Ex. Saat melakukan caching di PWA menggunakan pekerja layanan, Anda tidak akan dapat melakukan cache jika Anda menggunakan axios API (hanya berfungsi dengan mengambil API)

Axios adalah paket pihak ke-3 yang berdiri sendiri yang dapat dengan mudah dipasang ke proyek Bereaksi menggunakan NPM.

Opsi lain yang Anda sebutkan adalah fungsi ambil. Tidak seperti Axios, fetch()dibangun ke sebagian besar browser modern. Dengan mengambil Anda tidak perlu menginstal paket pihak ketiga.

Jadi terserah Anda, Anda bisa pergi dengan fetch()dan berpotensi mengacaukan jika Anda tidak tahu apa yang Anda lakukan ATAU hanya menggunakan Axios yang lebih mudah menurut saya.

Selain itu ... Saya bermain-main dengan berbagai lib dalam pengujian saya dan memperhatikan perbedaan penanganan permintaan 4xx. Dalam hal ini pengujian saya mengembalikan objek json dengan respons 400. Inilah cara 3 lib populer menangani respons:

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

Yang menarik adalah itu request-promise-nativedan axiosmemberikan respons 4xx sementara node-fetchtidak. Juga fetchmenggunakan janji untuk parsing json.

Manfaat aksioma:

• Transformer: memungkinkan melakukan transformasi pada data sebelum permintaan dibuat atau setelah respons diterima
• Pencegat: memungkinkan Anda untuk mengubah permintaan atau tanggapan sepenuhnya (tajuk juga). juga melakukan operasi async sebelum permintaan dibuat atau sebelum Perjanjian diselesaikan
• Perlindungan XSRF bawaan

Keuntungan axioslebihfetch