Apa perbedaan antara Axios dan Fetch?


Jawaban:


165

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.


Ini pertanyaan lagi. Setelah responseOk benar, apakah kita perlu memeriksa status di response.data jika status sudah disediakan? terima kasih
Yang Wang

1
Axios request is ok when status is 200 and statusText is 'OK' Bagaimana dengan httpStatus lainnya dalam rentang 2xx seperti 201 atau 204?
leonbloy

46

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: masukkan deskripsi gambar di sini


6
Namun saya masih tidak dapat menemukan manfaat dari mengambil alih aksioma. Bisakah Anda tahu mengapa saya harus menggunakan aksioma?
Gorakh Nath

4
Saya pikir fetch adalah standar, lihat fetch.spec.whatwg.org ... axios dapat memiliki lebih banyak fitur karena tidak mengikuti itu .... Saya pikir pada akhirnya mereka melakukan hal-hal dasar (ajax http request) tetapi tergantung pada apa yang Anda butuhkan ... Saya tidak perlu transformator ... jadi mendapatkan lib standar adalah pro ...
Lucas Katayama

4
Sadarilah bahwa tabel itu menyesatkan. Ini mendefinisikan fetchsebagai asli ( Berarti Anda hanya dapat menggunakannya - tidak perlu menyertakan perpustakaan , sesuai dengan sumber tabel), sementara sebenarnya fetchadalah tidak diterapkan di beberapa platform (terutama di semua versi IE), yang Anda butuhkan untuk memberikan polyfill eksternal tetap.
Luca Fagioli

3
Menambahkan perbedaan yang disebutkan oleh @ jack123 fetch juga tidak menyediakan fungsionalitas ajax dasar seperti timeout(yang sangat aneh) kita harus menggunakan modul terpisah untuk mengimplementasikan fungsi dasar ini.
Apurva jain

2
@LucasKatayama Tautan tersebut tampaknya rusak
vancy-pants

30

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

masukkan deskripsi gambar di sini

Saya pikir Anda harus menggunakan aksioma.


4
Sepakat. Axios juga merupakan impor enuff kecil sehingga mengasapi tidak terlalu mengkhawatirkan - dibandingkan dengan sesuatu seperti ekspres atau luwak di mana jika seseorang agak gila tentang ukuran paket, mereka mungkin khawatir. :)
CodeFinity

1
Harap jangan kembalikan suntingan yang sah, atau salin konten tanpa atribusi.
jonrsharpe

9

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)

6
Adakah yang bisa memverifikasi ini benar? Itu adalah 1 orang, tetapi 9 upvotes tampaknya setuju namun akan menyenangkan untuk melihat komentar tentang ini (saya menggunakan aksioma dengan pekerja layanan pwa offline adalah mengapa saya bertanya.
Tom Stickel

Tentu, kami dapat memiliki beberapa komentar lagi tentang ini, tetapi saya menghadapi masalah dengan caching saat menggunakan aksioma dan ketika saya mengganti aksioma dengan mengambil () API itu bisa diselesaikan
Vaibhav Bacchav

1
Ini tampaknya benar, tetapi mungkin diperbaiki dalam waktu dekat: github.com/axios/axios/pull/2891
arkhz

7

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.


1
Ambil tidak apa-apa, tapi Axios seperti yang Anda katakan - lebih mudah. Apa yang dibangun di browser modern (fetch) tidak terlalu bagus untuk rilis fitur. - jadi saya lebih suka Axios
Tom Stickel

5

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.


1
@baitun ini dari saya menjalankan unit test yang (saya pikir saya menggunakan Mocha) sering memiliki .throwsmetode untuk menguji kesalahan yang dilemparkan. Dalam hal ini saya sedang menguji penolakan dari 3 lib dan melihat perbedaan dalam data yang dikembalikan.
cyberwombat

3

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.