CodeGym /Kurslar /Frontend SELF AZ /Axios və Fetch

Axios və Fetch

Frontend SELF AZ

Səviyyə , Dərs

Mövcuddur

5.1 Fetch API

JavaScript-də HTTP sorğuları yerinə yetirmək üçün əsasən iki kitabxanadan istifadə olunur: gömülü fetch funksiyası və üçüncü tərəf kitabxanası Axios. Hər ikisi API və digər veb resurslarla işləmək üçün güclü və çevik imkanlar təqdim edir.

Fetch API — brauzerə inteqrasiya olunmuş HTTP sorğularını yerinə yetirmək üsuludur. Bu, promises əsasında qurulub və şəbəkə sorğuları ilə işləmək üçün müasir yanaşma təklif edir.

Sadə fetch-sorğusunun sintaksisi:

    
      let promise = fetch(url, {method, headers,
        body})

Fetch-in əsas anlayışları:

fetch(url, options): HTTP sorğularını yerinə yetirmək üçün əsas metod
Bir promise qaytarır, bu isə Response obyektinə həll olunur

Fetch ilə sadə GET-sorğusunun nümunəsi:

JavaScript

    
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
          if (!response.ok) {
            throw new Error('Şəbəkə xətası: serverdən düzgün cavab alınmadı');
          }
          return response.json();
        })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error('Sorğu yerinə yetirilərkən xəta baş verdi: ', error);
        });

Fetch ilə POST-sorğusunun nümunəsi:

JavaScript

    
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          title: 'foo',
          body: 'bar',
          userId: 1
        })
      })
        .then(response => response.json())
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error('Sorğu yerinə yetirilərkən xəta baş verdi: ', error);
        });

Fetch Ayarları

Fetch API, options obyekti vasitəsilə sorğunun müxtəlif parametrlərini, məsələn, metod, headers, body və sair parametrləri tənzimləməyə imkan verir.

JavaScript

    
      const options = {
        method: 'GET', // 'POST', 'PUT', 'DELETE' və s. də ola bilər
        headers: {
          'Content-Type': 'application/json'
        },
        // body: JSON.stringify(data) // POST və PUT sorğuları üçün istifadə olunur
      };

      fetch('https://jsonplaceholder.typicode.com/posts/1', options)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Sorğu yerinə yetirilərkən xəta baş verdi: ', error));

5.2 Axios Kitabxanası

Axios — JavaScript-də HTTP sorğuları həyata keçirmək üçün məşhur bir kitabxanadır. O, native Fetch API ilə müqayisədə daha rahat və funksional API təqdim edir, eyni zamanda avtomatik JSON çevrilməsi, timeout işlənməsi, sorğuların ləğv edilməsi və köhnə brauzerləri dəstəkləmək kimi bir çox əlavə imkanları təmin edir.

Axios-un Qurulması

Axios-u npm vasitəsilə quraşdırmaq və ya CDN vasitəsilə qoşmaq olar.

npm vasitəsilə qurulması:

Terminal

    
      npm install axios

Node.js və ya modullu builderlər (məsələn, Webpack) istifadə edərkən qoşulması:

JavaScript

    
      // CommonJS üçün
      const axios = require('axios');

      // ES6 modulları üçün
      import axios from 'axios';

CDN vasitəsilə brauzerə qoşulması:

HTML

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

Sadə GET sorğusunun sintaksisi:

    
      let promise = axios.get(url)

Sadə POST sorğusunun sintaksisi:

    
      let promise = axios.post(url, data, config)

Axios-un əsas konsepsiyaları:

axios(config): HTTP sorğuları həyata keçirmək üçün əsas metod
Bu metod url, method, headers, data və digər parametrləri daxil edə bilən konfiqurasiya obyektini qəbul edir.
Qısa yollar: Axios hər bir HTTP metodu üçün metodlar təqdim edir (axios.get, axios.post, axios.put, axios.delete və s.), bu da müvafiq sorğuların həyata keçirilməsini asanlaşdırır.
Promises: Axios-un bütün metodları ya cavab obyektinə çözülən, ya da xəta halında rədd edilən Promise döndərir.

Cavab və xətaların işlənməsi ilə sadə GET sorğusunun sintaksisi:

JavaScript

    
      axios.get(url)
        .then(response => {
          // Uğurlu cavabın işlənməsi
        })
        .catch(error => {
          // Xətanın işlənməsi
        });

Cavab və xətaların işlənməsi ilə sadə POST sorğusunun sintaksisi:

JavaScript

    
      axios.post(url, data, config)
        .then(response => {
          // Uğurlu cavabın işlənməsi
        })
        .catch(error => {
          // Xətanın işlənməsi
        });

Axios-dan istifadə edərək sadə GET sorğusu nümunəsi:

HTML

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

JavaScript

    
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Sorğu yerinə yetiriləndə xəta baş verdi: ', error);
        });

Axios-dan istifadə edərək POST sorğusu nümunəsi:

HTML

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

JavaScript

    
      axios.post('https://jsonplaceholder.typicode.com/posts', {
          title: 'foo',
          body: 'bar',
          userId: 1
        })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Sorğu yerinə yetiriləndə xəta baş verdi: ', error);
        });

5.3 Axios Konfiqurasiyası

Axios üçün tənzimləmələr

Axios HTTP-sorğuları config obyekti vasitəsilə konfiqurasiya etməyə imkan verir. Bu obyekt aşağıdakı parametrləri əhatə edir: url, method, headers və məlumatlar (data). Aşağıda sorğunun əsas konfiqurasiya nümunəsi verilmişdir:

HTML

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

JavaScript

    
      const config = {
        method: 'get', // 'get', 'post', 'put', 'delete' və s. ola bilər
        url: 'https://jsonplaceholder.typicode.com/posts/1',
        headers: {
          'Content-Type': 'application/json' // Məlumat növünü göstərmək üçün başlıq
        },
        // data: JSON.stringify(data) // POST və PUT sorğuları üçün istifadə edilir, sorğu gövdəsini ötürmək üçün
      };

      axios(config)
        .then(response => console.log(response.data))
        .catch(error => console.error('Sorğunu yerinə yetirərkən xəta baş verdi: ', error));

Axios üçün əlavə imkanlar:

Sorğu parametrləri: URL vasitəsilə sorğu parametrlərini ötürmək mümkündür.
Sorğuları dayandırmaq: AbortController istifadə edərək.
Vaxt aşımları: sorğu üçün gözləmə vaxtının təyin edilməsi.

Sorğu parametrlərindən istifadə nümunəsi:

HTML

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

JavaScript

    
      axios.get('https://jsonplaceholder.typicode.com/posts', {
        params: {
          userId: 1 // Sorğu parametrləri params obyekti vasitəsilə ötürülür
        }
      })
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error('Sorğunu yerinə yetirərkən xəta baş verdi: ', error);
        });

5.4 Fetch və Axios müqayisəsi

İndi Fetch və Axios-u əsas göstəricilər üzrə müqayisə edək:

1. İstifadə rahatlığı:

Fetch: sadə əməliyyatlar üçün rahatdır, amma mürəkkəb ssenarilər (məsələn, JSON çevrilməsi, timeout'ların emalı) üçün əlavə emal tələb edir.
Axios: mürəkkəb sorğuları yerinə yetirmək üçün daha rahat və güclü API təqdim edir.

2. JSON dəstəyi:

Fetch: cavab body-sini JSON-a çevirmək üçün response.json() çağırışının açıq bir şəkildə edilmesini tələb edir.
Axios: JSON cavabları avtomatik olaraq çevirir.

3. Timeout'lar:

Fetch: inteqrasiya edilmiş timeout dəstəyi yoxdur. Timeout-un həyata keçirilməsi üçün AbortController və ya wrapper'lərdən istifadə etmək lazımdır.
Axios: konfiqurasiya vasitəsilə timeout'ları quraşdırmağa imkan yaradır.

4. İnterceptor'lar:

Fetch: sorğu və cavab interceptor'ları dəstəkləmir.
Axios: sorğu göndərməzdən əvvəl və cavab qəbul etdikdən sonra məntiqin icrası üçün interceptor'lardan istifadə etməyə imkan verir.

Axios ilə interceptor'lara nümunə

Interceptor'lar (interceptor'lar) sorğu göndərilməmişdən əvvəl və ya cavab qəbul edildikdən sonra müəyyən hərəkətləri icra etməyə imkan verir:

HTML

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

JavaScript

    
      // Sorğular üçün interceptor əlavə edilməsi
      axios.interceptors.request.use(config => {
        console.log('Sorğu serverə göndərildi: ', new Date());
        return config;
      }, error => {
        return Promise.reject(error);
      });

      // Cavablar üçün interceptor əlavə edilməsi
      axios.interceptors.response.use(response => {
        console.log('Serverdən cavab alındı: ', new Date());
        return response;
      }, error => {
        return Promise.reject(error);
      });

      // Interceptor'larla sorğu nümunəsi
      axios.get('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => console.log(response.data))
        .catch(error => console.error('Sorğunu yerinə yetirərkən səhv baş verdi: ', error));

Axios ilə paralel sorğular

Axios istifadə etməklə Promise.all() vasitəsilə paralel sorğuları asanlıqla yerinə yetirmək və nəticələri emal etmək mümkündür:

HTML

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

JavaScript

    
      Promise.all([
        axios.get('https://jsonplaceholder.typicode.com/todos/1'),
        axios.get('https://jsonplaceholder.typicode.com/todos/2')
      ])
      .then(responses => {
        responses.forEach(response => {
          console.log(response.data);
        });
      })
      .catch(error => console.error('Sorğunu yerinə yetirərkən səhv baş verdi: ', error));

Əvvəlki Əvvəlki dərs

Sonrakı Növbəti dərs

Şərhlər

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION