Aksioma atau Ambil: apa yang akan digunakan pada 2019?

Axios adalah perpustakaan JavaScript yang terkenal. Ini adalah klien HTTP berbasis janji untuk browser dan Node.js. Jika Anda telah bekerja sebagai programmer JavaScript dalam beberapa tahun terakhir, maka Anda, yang paling pasti, menggunakan perpustakaan ini. Pada Oktober 2019, paket Axios diunduh dari npm 25 juta kali. Tampaknya masa depan Axios tidak berawan. Tetapi bagaimana jika saya memberi tahu Anda bahwa Axios adalah proyek mati. Inilah tepatnya yang dibahas dalam satu diskusi tentang Reddit. Yaitu, kita berbicara tentang hal berikut:

• Repositori Axios GitHub memiliki tingkat aktivitas pengembang yang sangat rendah.
• Masalah dan PR diabaikan.
• Tim pengembang diam.

Situasi ini diperburuk oleh kerentanan yang didiskusikan secara luas. Kerentanan ini dilaporkan pada tahun 2017. Penulis proyek mengabaikannya selama lebih dari dua tahun.

Ketika pustaka Axios menjadi populer, browser tidak memiliki API yang mengimplementasikan klien HTTP berbasis janji. Antarmuka XML HTTP Request (XHR) standar tidak nyaman, sulit untuk dikerjakan. Para pengembang dengan senang hati menerima Axios karena fakta bahwa perpustakaan ini membuat hidup mereka lebih mudah.



API Ambil dirilis pada 2015. Mengapa kita masih menggunakan Axios pada tahun 2019? Mari kita bandingkan dua teknologi ini.

Volume Kode Templat

▍ Ambil

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

Xi Aksioma

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

Saat menggunakan Ambil, Anda harus berurusan dengan dua janji. Tetapi ketika bekerja dengan Axios, kami memiliki akses langsung ke hasil JSON di properti data objek respons.

Metode body mixin json() mengambil aliran respons dan membacanya sepenuhnya. Ini mengembalikan janji yang diselesaikan oleh hasil JSON dari penguraian teks isi permintaan.

Anda perlu menggunakan lebih banyak kode boilerplate di Ambil saat bekerja dengan permintaan POST.

▍ Ambil

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error)); 

Xi Aksioma

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error)); 

Menggunakan Axios menghindari penulisan kode boilerplate dalam jumlah besar dan membuat kode lebih bersih dan jelas.

Menangani kesalahan

▍ Ambil

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

Xi Aksioma

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

Pustaka Axios melaporkan kesalahan jaringan, tetapi Fetch API tidak. Saat bekerja dengan Ambil, Anda selalu perlu memeriksa properti response.ok . Untuk menyederhanakan solusi masalah ini, memeriksa kesalahan ini dapat dikeluarkan sebagai fungsi terpisah:

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); 

Fitur yang Hilang

Axios dapat memantau kemajuan unggahan data. Ambil tidak mendukung ini. Ini mungkin menjadi faktor penentu dalam pilihan teknologi bagi mereka yang sedang mengembangkan aplikasi yang memungkinkan pengguna untuk mengunggah foto atau file video ke server.

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config); 

Perpustakaan alternatif

Berikut adalah beberapa alternatif untuk Axios dan API Ambil:

• Ky adalah klien HTTP miniatur dan cerdas berdasarkan window.fetch .
• Superagent adalah pustaka klien HTTP progresif kecil berdasarkan XMLHttpRequest .

Ringkasan

Apa yang harus saya gunakan di 2019? Itu tergantung banyak. Misalnya, jika Anda perlu melacak kemajuan mengunggah materi ke server, maka Axios atau Superagent adalah yang terbaik untuk Anda. Jika Anda dapat menangani batasan Ambil, maka Anda lebih baik menggunakan API ini. Dan untuk sedikit meningkatkan kode Ambil, coba pustaka pembungkus seperti Ky.

Pembaca yang budiman! Klien HTTP apa yang Anda gunakan dalam proyek Anda?