Cara Menggunakan Pemintas Axios untuk Mengendalikan Respons Ralat API

Apabila membina aplikasi web moden, pengendalian panggilan API dan responsnya adalah bahagian penting dalam pembangunan. Axios, perpustakaan JavaScript yang popular, memudahkan membuat permintaan HTTP, tetapi ia turut disertakan dengan ciri terbina dalam seperti pemintas yang membolehkan pembangun mengurus respons dan ralat dengan cara yang lebih diperkemas dan cekap.

Dalam artikel ini, kami akan menumpukan pada penggunaan pemintas Axios untuk mengendalikan respons ralat API dengan berkesan, membolehkan anda menyeragamkan pengendalian ralat merentas keseluruhan aplikasi anda.

Apakah Axios?

Axios ialah klien HTTP berasaskan janji untuk JavaScript yang menyokong sintaks async/menunggu untuk membuat permintaan kepada API. Ia popular kerana ia mudah digunakan dan keupayaannya boleh diperluaskan dengan mudah dengan pemintas.

Contoh Asas Axios:

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Walaupun contoh ini menunjukkan cara mengendalikan permintaan dan ralat dengan .then dan .catch, menggunakan pemintas boleh menjadikan kod anda lebih cekap apabila anda perlu mengurus berbilang permintaan API.

Apakah Axios Interceptors?

Axios pemintas ialah fungsi yang membolehkan anda memintas dan mengendalikan kedua-dua permintaan dan respons sebelum ia diproses oleh .then atau .catch. Ini amat berguna apabila anda perlu menggunakan konfigurasi biasa pada semua permintaan atau mengendalikan respons ralat dengan cara yang seragam.

Terdapat dua jenis pemintas utama:

1. Pemintas Permintaan: Digunakan untuk mengubah suai atau menambah pengepala, token atau konfigurasi lain pada permintaan sebelum ia dihantar.
2. Pemintas Balasan: Digunakan untuk mengendalikan respons atau ralat secara global, termasuk mengelog atau mencuba semula permintaan apabila perlu.

Mengapa Menggunakan Pemintas Respons?

Apabila berurusan dengan berbilang titik akhir API, setiap satu mungkin mengembalikan jenis mesej ralat atau kod status yang berbeza. Tanpa pemintas, anda perlu mengendalikan ralat untuk setiap panggilan API individu, yang boleh membawa kepada kod berulang dan tidak dapat diselenggara.

Dengan pemintas respons, anda boleh mengurus semua respons ralat di satu tempat, memastikan pendekatan yang konsisten untuk mengendalikan ralat merentas apl anda.

Menyediakan Pemintas Tindak Balas Axios

1. Pasang Axios

Pertama, pastikan anda telah memasang Axios dalam projek anda:

npm install axios

2. Buat Instance Axios

Untuk menyediakan pemintas, sebaiknya buat tika Axios yang boleh digunakan semula di seluruh apl anda. Ini membantu menyeragamkan permintaan dan pengendalian respons anda.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

3. Tambah Pemintas Balasan

Anda boleh menambah pemintas tindak balas untuk menangkap dan mengendalikan ralat sebelum ia mencapai blok .then atau .catch anda dalam panggilan API individu anda.

npm install axios

4. Membuat Panggilan API

Dengan pemintas tersedia, anda kini boleh menggunakan apiClient untuk panggilan API anda. Jika sebarang ralat berlaku, ia akan ditangkap dan dikendalikan secara automatik oleh pemintas.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',  // Replace with your API base URL
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

Dalam persediaan ini, anda tidak perlu menulis kod pengendalian ralat untuk setiap panggilan API tunggal. Pemintas memusatkan logik ini dan menjadikan panggilan API anda lebih bersih dan lebih mudah diselenggara.

---

Kes Penggunaan Praktikal untuk Pemintas Axios

1. Muat Semula Token Automatik

Jika API anda menggunakan token pengesahan (cth., JWT), anda mungkin menghadapi situasi di mana token tamat tempoh dan anda perlu memuat semulanya. Pemintas Axios boleh digunakan untuk memuat semula token secara automatik apabila respons 401 Tidak dibenarkan diterima.

apiClient.interceptors.response.use(
  (response) => {
    // If the response is successful (status code 2xx), return the response data
    return response;
  },
  (error) => {
    // Handle errors globally
    if (error.response) {
      // Server responded with a status code out of 2xx range
      const statusCode = error.response.status;
      const errorMessage = error.response.data.message || 'An error occurred';

      // Handle different status codes accordingly
      if (statusCode === 401) {
        // Handle unauthorized error, for example by redirecting to login
        console.error('Unauthorized access - redirecting to login');
      } else if (statusCode === 500) {
        // Handle server errors
        console.error('Server error - try again later');
      } else {
        // Handle other types of errors
        console.error(`Error ${statusCode}: ${errorMessage}`);
      }
    } else if (error.request) {
      // No response received (network error, timeout, etc.)
      console.error('Network error - check your internet connection');
    } else {
      // Something else happened during the request
      console.error('Request error:', error.message);
    }

    // Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
    return Promise.reject(error);
  }
);

2. Mengendalikan Ralat Rangkaian

Jika apl anda bergantung pada API luaran, isu rangkaian boleh menjadi masalah biasa. Pemintas Axios boleh membantu menyediakan mesej ralat mesra pengguna sekiranya berlaku kegagalan rangkaian.

// Example API call
apiClient.get('/users')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    // This will be triggered if the error isn't handled by the interceptor
    console.error('Error fetching users:', error);
  });

---

Faedah Menggunakan Axios Interceptors

1. Pengendalian Ralat Berpusat: Daripada menulis kod pengendalian ralat untuk setiap panggilan API, anda boleh mengendalikan ralat di satu tempat.

2. Kod Pembersih: Memandangkan pengendalian ralat diurus oleh pemintas, panggilan API individu anda akan menjadi lebih bersih dan lebih ringkas.

3. Kebolehselenggaraan yang dipertingkatkan: Perubahan pada pengendalian ralat (cth., menambah kes baharu atau menapis mesej ralat) boleh dilakukan di satu tempat, menjadikan pangkalan kod lebih mudah diselenggara.

4. Ketekalan: Pemintas memastikan pendekatan yang konsisten untuk mengendalikan ralat, jadi anda tidak perlu risau tentang kehilangan kes tepi atau menulis kod berlebihan.

---

Kesimpulan

Menggunakan pemintas Axios untuk mengendalikan tindak balas ralat API boleh meningkatkan struktur, kebolehselenggaraan dan ketekalan kod anda dengan sangat baik. Dengan memusatkan logik pengendalian ralat, anda boleh menjadikan panggilan API anda lebih cekap dan mengurangkan kod berulang merentas aplikasi anda.

Pemintas ialah ciri berkuasa Axios yang boleh digunakan untuk pelbagai kes penggunaan, daripada menguruskan penyegaran token kepada memaparkan mesej ralat mesra pengguna semasa kegagalan rangkaian. Mula memanfaatkan pemintas Axios hari ini untuk memudahkan pengendalian ralat dan meningkatkan daya tahan aplikasi anda!

Atas ialah kandungan terperinci Cara Menggunakan Pemintas Axios untuk Mengendalikan Respons Ralat API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!