Axios ile Çalışmak İçin Eksiksiz Bir Kılavuz

Axios, istemci tarafı JavaScript kodundan veya sunucu tarafı Node.js kodundan HTTP istekleri göndermek için basit bir API sağlayan bir JavaScript kitaplığıdır. Axios, JavaScript'in eşzamansız kodu daha sürdürülebilir hale getiren Promise API'si üzerine kuruludur.

Axios'a Başlarken

Axios'u uygulamanızda bir İçerik Dağıtım Ağı (CDN) kullanarak veya projenize yükleyerek kullanabilirsiniz.

Axios'u doğrudan HTML'de kullanmak için aşağıdaki CDN bağlantısını kopyalayın ve HTML dosyanızın baş bölümüne ekleyin:

<senaryokaynak=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">senaryo>

Bu yaklaşımla, Axios ve onun HTTP yöntemleri HTML betiklerinizin gövdesinde. Axios ayrıca REST API'lerini React gibi bir çerçevede kullanın.

Axios'u bir Node.js projesinde kullanmak için, onu npm veya yarn paket yöneticisini kullanarak proje dizininize kurun:

npm kurulum eksenleri
# veya
iplik ekleme eksenleri

Yüklemenin ardından JavaScript projenizde Axios'u kullanmaya başlayabilirsiniz:

sabit eksenler = gerekmek("eksen");

Bu kılavuz boyunca ücretsiz olarak çalışacaksınız. JSONYer Tutucu API. Bu API bir dizi kaynağa sahip olsa da, yalnızca /comments Ve /posts uç noktalar. Uç noktalar, verileri almak veya değiştirmek için erişilebilen belirli URL'lerdir.

Axios İle GET İstekleri Yapmak

Axios kullanarak bir GET isteğinde bulunmanın birden çok yolu vardır. Bununla birlikte, sözdizimi genellikle tercihe bağlıdır.

GET isteğinde bulunmanın yollarından biri, eksenler() istek yöntemini şu şekilde belirten bir nesneyle yöntem elde etmek ve isteğin gönderileceği URL.

Örneğin:

sabit eksenler = gerekmek("eksen");
eksenler({
 yöntem: "elde etmek",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .Daha sonra((res) => {
konsol.log (res.veri);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });

Bu örnek oluşturur eşzamansız programlama modelini kullanan bir söz zincirleyerek .Daha sonra() Ve .yakalamak() yöntemler. Taahhüt, istek başarılı olduğunda konsola verilen yanıtı günlüğe kaydeder ve istek başarısız olursa hata mesajını günlüğe kaydeder.

Axios ayrıca, bir nesneyi zincirleyerek geçirme ihtiyacını ortadan kaldıran GET istekleri yapmak için daha kolay bir yol sağlar. .elde etmek() yöntemi eksenler misal.

Örneğin:

eksenler
 .elde etmek(" https://jsonplaceholder.typicode.com/comments")
 .Daha sonra((res) => {
konsol.log (res.veri);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });

Axios İle POST İstekleri Yapmak

Axios ile POST isteği yapmak, GET isteği yapmaya benzer. Bu isteği kullanarak bir sunucuya veri gönderebilirsiniz.

Aşağıdaki kod parçacığı, Axios'un nasıl kullanılacağına bir örnektir. .postalamak() yöntem:

eksenler
 .postalamak(" https://jsonplaceholder.typicode.com/comments", {
 isim: "Jackson Smith",
 e-posta: "[email protected]",
 vücut: "Bu bir sanat eseri.",
 })
 .Daha sonra((res) => {
konsol.log (res.veri);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });

Kod, yeni bir yorum oluşturmak için JSONPlaceholder API'sine bir POST isteği gönderir. bu axios.post yöntem, verileri şuraya gönderir: /comments uç nokta.

İstekte gönderilen veriler, isim, e-posta, Ve vücut mülk. İstek başarılı olursa, Daha sonra yöntem, yanıt verilerini konsola kaydeder. Ve eğer bir hata varsa, yakalamak method hatayı konsola kaydeder.

Axios İle PUT/PATCH İstekleri Yapmak

Sunucudaki mevcut bir kaynağı güncellemek için PUT veya PATCH isteğini kullanabilirsiniz. PUT tüm kaynağı değiştirirken, PATCH yalnızca belirtilen alanları günceller.

Axios ile PUT veya PATCH isteği yapmak için, .koymak() veya .yama() sırasıyla yöntemler.

Güncellemek için bu yöntemlerin nasıl kullanılacağına dair bir örnek aşağıda verilmiştir. e-posta id'si 100 olan yorumun özelliği:

sabit eksenler = gerekmek("eksen");
eksenler
 .elde etmek(" https://jsonplaceholder.typicode.com/comments/100")
 .Daha sonra((res) => {
konsol.log (res.data.email);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });
// Çıktı:
// '[email protected]'
eksenler
 .yama(" https://jsonplaceholder.typicode.com/comments/100", {
 e-posta: "[email protected]",
 })
 .Daha sonra((res) => {
konsol.log (res.data.email);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });
// Çıktı:
// '[email protected]',

Bu program önce uç noktaya bir GET isteği yapar " https://jsonplaceholder.typicode.com/comments/100". Daha sonra günlüğe kaydeder e-posta kimliğine sahip yorumun özelliği 100 konsola. PATCH isteği yaptıktan sonra nelerin değiştiğini görebilmeniz için GET isteği yapıyoruz.

İkinci istek, aynı uç noktaya yönelik bir PATCH isteğidir. Bu kod, yorumun e-postasını şu şekilde günceller: [email protected].

Axios ile DELETE İstekleri Yapmak

kullanabilirsiniz SİLMEK sunucudaki bir kaynağı silme isteği.

nasıl kullanılacağına ilişkin aşağıdaki örneği alın. .silmek() sunucudan bir kaynağı silme yöntemi:

eksenler
 .silmek(" https://jsonplaceholder.typicode.com/comments/10")
 .Daha sonra((res) => {
konsol.log (res.veri);
 })
 .yakalamak((hata) => {
konsol.hata (hata);
 });
//Output:
// {}

Konsola boş bir nesne kaydederek, yukarıdaki kod, 10 kimliğine sahip yorumu sildiğini gösterir.

Axios İle Eş Zamanlı İstek Yapma

Axios'u kullanarak aynı anda birden fazla uç noktadan veri alabilirsiniz. Bunu yapmak için, kullanmanız gerekir .Tümü() yöntem. Bu yöntem, bir istek dizisini parametresi olarak kabul eder ve yalnızca tüm yanıtları aldığınızda çözer.

Aşağıdaki örnekte, .Tümü() yöntem aynı anda iki uç noktadan veri alır:

eksenler
 .Tümü([
 eksenler.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 eksenler.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .Daha sonra(
 eksen.spread((yorumlar, gönderiler) => {
konsol.log (yorumlar.veriler);
konsol.log (yazılar. veriler);
 })
 )
 .yakalamak((hata) =>konsol.hata (hata));

Yukarıdaki kod bloğu, istekleri aynı anda gönderir ve ardından yanıtları alıcıya iletir. .Daha sonra() yöntem. Axios'lar .yaymak() yöntem yanıtları ayırır ve her yanıtı kendi değişkenine atar.

Son olarak, konsol günlüğe kaydeder. veri iki yanıtın özelliği: yorumlar ve gönderiler.

Axios İle İstekleri Yakalama

Bazen, sunucuya ulaşmadan önce bir isteği durdurmanız gerekebilir. Axios'u kullanabilirsiniz interceptors.request.use() istekleri engelleme yöntemi.

Aşağıdaki örnekte yöntem, yapılan her istek için isteğin türünü konsola kaydeder:

axios.interceptors.request.use(
 (yapılandırma) => {
konsol.kayıt(`${config.method} istek yapıldı`);
geri dönmek yapılandırma;
 },
 (hata) => {
geri dönmekSöz.reddet (hata);
 }
);
eksenler
 .elde etmek(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .Daha sonra((res) =>konsol.log (res.veri))
 .yakalamak((hata) =>konsol.hata (hata));

Program, kullanarak bir Axios yakalayıcı tanımlar. axios.interceptors.request.use yöntem. Bu yöntem alır yapılandırma Ve hata argüman olarak nesneler. bu yapılandırma nesne, istek yöntemi de dahil olmak üzere istek hakkında bilgi içerir (yapılandırma yöntemi) ve istek URL'si (yapılandırma.url).

Durdurucu işlevi şunu döndürür: yapılandırma nesne, isteğin normal şekilde ilerlemesine izin verir. Bir hata varsa, işlev reddedilen değeri döndürür. Söz nesne.

Son olarak, program önleyiciyi test etmek için bir talepte bulunur. Konsol, yapılan istek türünü, bu durumda bir GET isteğini günlüğe kaydeder.

Axios'ta Daha Fazlası Var

Axios kullanarak projelerinizde nasıl istekte bulunacağınızı ve istekleri nasıl yakalayacağınızı öğrendiniz. İstekleri dönüştürmek ve Axios örneklerini kullanmak gibi diğer birçok özellik, keşfetmeniz için bir JavaScript geliştiricisi olarak sizin için mevcuttur. Axios, JavaScript uygulamalarınızda HTTP istekleri yapmak için tercih edilen bir seçenek olmaya devam ediyor. Ancak Fetch API, keşfedebileceğiniz başka bir iyi seçenektir.