Bagaimana untuk melaksanakan Axios Request Interceptors dalam Next.js

Axios ialah perpustakaan JavaScript yang digunakan secara meluas yang memudahkan untuk menghantar permintaan HTTP ke pelayan. Salah satu ciri yang menonjol ialah pemintas, yang membolehkan apl kami menangkap permintaan dan respons. Pemintas Axios membenarkan kami menyediakan fungsi yang dijalankan untuk setiap permintaan atau respons sebelum ia mencapai aplikasi. Ini berguna untuk tugas seperti menambahkan token pengesahan, pengelogan dan pengendalian ralat secara global, menjadikan kod kami lebih bersih dan lebih mudah untuk diurus.

Dalam catatan blog ini, kita akan belajar cara melaksanakan pemintas permintaan Axios dalam aplikasi Next.js. Kami akan mulakan dengan menyediakan Axios, dan kemudian kami akan melihat cara membuat dan menggunakan pemintas permintaan dan tindak balas. Pada akhirnya, anda akan tahu cara menggunakan pemintas untuk menambah baik aplikasi anda dan memastikan kod anda teratur.

Sediakan Projek

Sebelum menyelami cara melaksanakan pemintas permintaan Axios dalam aplikasi Next.js, pastikan anda mempunyai perkara berikut:

• Node.js dan npm/yarn Dipasang: Pastikan anda memasang Node.js dan npm (atau yarn) pada mesin anda. Anda boleh memuat turun Node.js dari sini.

• Persediaan Projek Next.js: Anda sepatutnya mempunyai persediaan projek Next.js. Jika anda tidak mempunyainya, anda boleh membuat projek Next.js baharu menggunakan Cipta Apl Seterusnya:
  

npx create-next-app my-axios-app
cd my-axios-app
npm install axios

atau

yarn add axios

Melaksanakan Pemintas Permintaan

Pemintas permintaan dalam Axios membolehkan anda mengubah suai permintaan sebelum mereka sampai ke pelayan. Ia berguna untuk menambah token pengesahan, menetapkan pengepala tersuai atau permintaan pengelogan. Begini cara untuk melaksanakan pemintas permintaan Axios dalam aplikasi Next.js.

Langkah 1: Buat Contoh Axios

Buat fail baharu axiosInstance.js dalam folder lib (atau mana-mana lokasi pilihan dalam projek anda). Anda boleh menambah pemintas permintaan pada contoh Axios yang anda buat sebelum ini. Pemintas ini akan dilaksanakan sebelum setiap permintaan dihantar.

Mencipta tika Axios membolehkan anda menetapkan konfigurasi lalai, seperti URL asas dan pengepala, yang akan digunakan pada semua permintaan yang dibuat dengan tika itu. Ini membantu dalam memastikan kod anda KERING (Jangan Ulangi Sendiri).

Buat fail baharu bernama axiosInstance.js dalam folder lib anda dan sediakan tika Axios anda:

// lib/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://dummyjson.com', // Replace with your API base URL
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

// Add a request interceptor
axiosInstance.interceptors.request.use(
  function (config) {
    // Do something before the request is sent
    // For example, add an authentication token to the headers
    const token = localStorage.getItem('authToken'); // Retrieve auth token from localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

export default axiosInstance;

Berikut ialah ringkasan perkara yang telah kami lakukan:

• Mencipta tika Axios menggunakan axios.create().
• Tetapkan baseURL kepada URL asas API anda. Anda boleh melaraskan ini supaya sepadan dengan konfigurasi API anda.
• Digunakan interceptors.request.use() untuk memintas dan mengubah suai permintaan keluar. Ini membolehkan kami menambah pengepala, token pengesahan atau membuat perubahan lain pada konfigurasi permintaan.

Langkah 2: Gunakan Contoh Axios dalam Halaman atau Komponen Next.js

Dengan penyediaan pemintas permintaan, anda boleh menggunakan tika Axios dalam halaman atau komponen Next.js anda seperti biasa. Pemintas akan secara automatik menambah token (atau melakukan sebarang tindakan terkonfigurasi lain) sebelum setiap permintaan dihantar.

// pages/index.js
import React, { useEffect, useState } from 'react';
import axiosInstance from '../lib/axiosInstance';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axiosInstance.get('/products/1') // Replace with your API endpoint
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

) : (

Loading...

)}