Dalam dunia pengembangan web yang serba cepat, mengelola permintaan API secara efisien sangat penting. Terkadang, Anda perlu membatalkan permintaan ini untuk menghemat sumber daya atau mencegah hasil yang tidak diinginkan. Axios, sebuah pustaka JavaScript populer, menyediakan cara yang mudah untuk menangani skenario seperti itu. Dalam posting blog ini, kita akan menjelajahi seluk-beluk pembatalan permintaan API dengan Axios dan memperkenalkan Anda pada Apidog, sebuah alat yang menyederhanakan pengujian dan pengelolaan API. Dan bagian terbaiknya? Anda dapat mengunduh Apidog secara gratis!
Mengapa Anda Mungkin Perlu Membatalkan Permintaan
Mari kita mulai dengan skenario yang mudah dipahami. Bayangkan Anda sedang membangun fitur pencarian untuk aplikasi web Anda. Saat pengguna mengetik di kotak pencarian, Anda ingin mengambil saran dari API. Namun, jika pengguna terus mengetik dengan cepat, Anda tidak ingin membombardir server dengan permintaan yang tidak perlu untuk setiap penekanan tombol. Sebaliknya, Anda ingin membatalkan permintaan yang tertunda dan hanya mengirimkan yang terbaru. Di situlah pembatalan permintaan axios berperan!
Bagaimana Cara Kerja Pembatalan Permintaan Axios
Jadi, bagaimana cara kerja pembatalan ini? Nah, kuncinya terletak pada CancelToken yang disediakan oleh Axios. Token ini memungkinkan Anda untuk membuat "operasi yang dapat dibatalkan" dan mengaitkannya dengan permintaan tertentu. Jika Anda memutuskan untuk membatalkan operasi, Axios akan secara otomatis menghentikan permintaan yang sesuai.
Membuat CancelToken
Untuk memulai, Anda perlu mengimpor CancelToken dari Axios:
import axios from 'axios';
const source = axios.CancelToken.source();
Objek source memiliki dua properti: token dan cancel. Properti token adalah yang akan Anda teruskan bersama dengan permintaan Axios Anda, sedangkan fungsi cancel digunakan untuk, ya, membatalkan permintaan.
Membuat Permintaan yang Dapat Dibatalkan
Sekarang setelah Anda memiliki CancelToken, Anda dapat melampirkannya ke permintaan Axios Anda seperti ini:
axios.get('/api/suggestions', {
cancelToken: source.token
})
.then(response => {
// Handle the successful response
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
// Handle the cancellation
} else {
// Handle other errors
}
});
Dengan meneruskan source.token sebagai opsi cancelToken, Anda memberi tahu Axios bahwa permintaan ini dapat dibatalkan. Jika permintaan berhasil dibatalkan, Promise akan ditolak dengan objek Cancel, yang dapat Anda tangani di blok catch.
Membatalkan Permintaan
Untuk benar-benar membatalkan permintaan, Anda cukup memanggil fungsi cancel yang disediakan oleh objek source:
source.cancel('Operation canceled by the user.');
Anda dapat meneruskan alasan opsional untuk membatalkan permintaan, yang akan tersedia dalam objek Cancel yang dilemparkan oleh Promise yang ditolak.
Contoh Dunia Nyata: Saran Pencarian dengan Pembatalan Permintaan Axios
Sekarang setelah Anda memahami dasar-dasarnya, mari kita lihat bagaimana Anda dapat menerapkan pembatalan permintaan axios dalam skenario dunia nyata. Kita akan membangun fitur saran pencarian sederhana menggunakan React dan API apidog (API dummy untuk tujuan pengujian).
Pertama, mari kita siapkan komponen React kita:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const SearchSuggestions = () => {
const [query, setQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [cancelToken, setCancelToken] = useState(null);
// ... (Component logic goes here)
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Search..."
/>
<ul>
{suggestions.map(suggestion => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
};
Selanjutnya, mari kita implementasikan fungsi handleInputChange, yang akan mengambil saran dari API apidog:
const handleInputChange = (event) => {
const newQuery = event.target.value;
setQuery(newQuery);
// Cancel the previous request if it exists
if (cancelToken) {
cancelToken.cancel('Canceling previous request');
}
// Create a new CancelToken for the current request
const source = axios.CancelToken.source();
setCancelToken(source);
// Make the API request with the new CancelToken
axios.get(`https://api.apidog.com/suggestions?query=${newQuery}`, {
cancelToken: source.token
})
.then(response => {
setSuggestions(response.data.suggestions);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled:', thrown.message);
} else {
console.error('Error fetching suggestions:', thrown);
}
});
};
Dalam contoh ini, kita membatalkan permintaan sebelumnya sebelum membuat yang baru. Kita membuat CancelToken baru untuk setiap permintaan dan menyimpannya dalam status komponen menggunakan fungsi setCancelToken. Saat pengguna mengetik di kotak pencarian, kita membatalkan permintaan sebelumnya (jika ada) dan membuat permintaan baru dengan kueri yang diperbarui dan CancelToken yang baru.
Jika permintaan berhasil dibatalkan, blok catch akan menangani pembatalan dan mencatat alasannya. Jika ada kesalahan lain, itu juga akan ditangkap dan dicatat.
Teknik Tingkat Lanjut
Sekarang setelah Anda menguasai dasar-dasar pembatalan permintaan axios, mari kita lihat beberapa teknik tingkat lanjut yang dapat lebih meningkatkan keterampilan Anda.
Instans Axios yang Dapat Digunakan Kembali dengan Pembatalan Permintaan Otomatis
Alih-alih membuat CancelToken baru untuk setiap permintaan, Anda dapat membuat instans Axios yang dapat digunakan kembali yang secara otomatis membatalkan permintaan sebelumnya saat permintaan baru dibuat. Pendekatan ini sangat berguna saat bekerja dengan aplikasi kompleks yang memiliki banyak komponen yang membuat permintaan API.
Berikut adalah contoh bagaimana Anda dapat membuat instans seperti itu:
import axios from 'axios';
const axiosInstance = axios.create();
let cancelToken;
axiosInstance.interceptors.request.use(
config => {
if (cancelToken) {
cancelToken.cancel('Canceling previous request');
}
config.cancelToken = new axios.CancelToken(c => {
cancelToken = c;
});
return config;
},
error => Promise.reject(error)
);
export default axiosInstance;
Dalam contoh ini, kita membuat instans Axios baru menggunakan axios.create(). Kita kemudian menyiapkan interceptor untuk permintaan, yang secara otomatis membatalkan permintaan sebelumnya sebelum membuat yang baru. cancelToken disimpan secara global dan ditetapkan ke opsi cancelToken setiap permintaan baru.
Anda kemudian dapat menggunakan axiosInstance ini di seluruh aplikasi Anda untuk membuat permintaan API, dan itu akan secara otomatis menangani pembatalan permintaan untuk Anda.
Menangani Beberapa Permintaan yang Dapat Dibatalkan
Dalam beberapa kasus, Anda mungkin memiliki beberapa permintaan yang dapat dibatalkan dalam satu komponen atau fungsi. Untuk menangani situasi ini, Anda dapat menggunakan array atau objek untuk menyimpan beberapa instans CancelToken.
Berikut adalah contoh bagaimana Anda dapat mengelola beberapa permintaan pembatalan:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MultipleRequests = () => {
const [cancelTokens, setCancelTokens] = useState({});
const fetchData = (endpoint) => {
// Cancel any existing request for the same endpoint
if (cancelTokens[endpoint]) {
cancelTokens[endpoint].cancel('Canceling previous request');
}
// Create a new CancelToken for the current request
const source = axios.CancelToken.source();
setCancelTokens(prevTokens => ({ ...prevTokens, [endpoint]: source }));
// Make the API request with the new CancelToken
axios.get(`https://api.apidog.com/${endpoint}`, {
cancelToken: source.token
})
.then(response => {
// Handle the successful response
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled:', thrown.message);
} else {
console.error('Error fetching data:', thrown);
}
});
};
return (
<div>
<button onClick={() => fetchData('endpoint1')}>Fetch Data 1</button>
<button onClick={() => fetchData('endpoint2')}>Fetch Data 2</button>
</div>
);
};
Dalam contoh ini, kita menggunakan objek cancelTokens untuk menyimpan beberapa instans CancelToken, dengan endpoint sebagai kuncinya. Saat membuat permintaan baru, kita pertama-tama memeriksa apakah ada CancelToken yang ada untuk endpoint itu dan membatalkannya jika perlu. Kemudian, kita membuat CancelToken baru dan menyimpannya dalam objek cancelTokens, menimpa nilai sebelumnya untuk endpoint itu.
Pendekatan ini memungkinkan Anda untuk mengelola beberapa permintaan yang dapat dibatalkan dalam komponen atau fungsi yang sama, memastikan bahwa hanya permintaan terbaru untuk setiap endpoint yang dieksekusi.
Bagaimana cara membatalkan permintaan API dengan Apidog?
Untuk membatalkan permintaan API menggunakan Apidog, Anda biasanya akan mengikuti langkah-langkah ini:
- Buka Apidog dan buat permintaan baru.
2. Atur metode permintaan ke DELETE.
3. Masukkan URL sumber daya yang ingin Anda hapus dan tambahkan header atau parameter tambahan yang Anda butuhkan.
4. Klik tombol "Kirim" untuk mengirim permintaan dan menganalisis respons
Ini akan mengirimkan permintaan DELETE ke URL yang ditentukan, yang merupakan cara standar untuk menghapus sumber daya melalui API. Namun, jika Anda ingin membatalkan permintaan yang sedang berlangsung, ini mungkin tidak didukung secara langsung oleh Apidog karena akan bergantung pada fungsionalitas API dan apakah itu mendukung pembatalan permintaan yang sedang berlangsung.
Untuk API yang tidak mendukung pembatalan, Anda perlu menerapkan fungsionalitas ini di sisi server, di mana server dapat memeriksa sinyal pembatalan dan menghentikan pemrosesan permintaan yang sesuai.
Kesimpulan
Menguasai seni pembatalan permintaan API dengan Axios dapat secara signifikan meningkatkan kinerja dan keandalan aplikasi Anda. Seperti yang telah kita lihat, Axios menawarkan metode yang mudah dan efektif untuk membatalkan permintaan kapan pun diperlukan. Untuk mempraktikkan pengetahuan ini dan menyederhanakan proses pengujian API Anda, jangan lupa untuk mengunduh Apidog. Ini adalah sekutu yang kuat dalam toolkit pengembangan Anda, dan tersedia tanpa biaya. Rangkullah kekuatan Axios dan Apidog, dan bawa manajemen API Anda ke tingkat berikutnya!
