Next.js で Axios リクエストインターセプターを実装する方法-jsチュートリアル-php.cn

Axios は、サーバーへの HTTP リクエストの送信を容易にする、広く使用されている JavaScript ライブラリです。その際立った機能の 1 つはインターセプターです。これにより、アプリはリクエストとレスポンスをキャッチできるようになります。 Axios インターセプターを使用すると、リクエストまたはレスポンスがアプリケーションに到達する前に、リクエストまたはレスポンスごとに実行される関数をセットアップできます。これは、認証トークンの追加、ログ記録、グローバルなエラー処理などのタスクに役立ち、コードがクリーンになり、管理が容易になります。

このブログ投稿では、Next.js アプリケーションに Axios リクエストインターセプターを実装する方法を学びます。まず Axios をセットアップし、次にリクエストとレスポンスのインターセプターを作成して使用する方法を見ていきます。最後には、インターセプターを使用してアプリケーションを改善し、コードを整理する方法を理解できるようになります。

プロジェクトのセットアップ

Next.js アプリケーションに Axios リクエストインターセプターを実装する方法に入る前に、次のものが揃っていることを確認してください。

Node.js と npm/yarn がインストールされています: Node.js と npm (または Yarn) がマシンにインストールされていることを確認します。ここから Node.js をダウンロードできます。
Next.js プロジェクトのセットアップ: Next.js プロジェクトのセットアップが必要です。お持ちでない場合は、「Create Next App」を使用して新しい Next.js プロジェクトを作成できます:

か

リーリー

リクエストインターセプタの実装

Axios のリクエストインターセプターを使用すると、リクエストがサーバーに到達する前に変更できます。これらは、認証トークンの追加、カスタムヘッダーの設定、またはリクエストのログ記録に役立ちます。 Next.js アプリケーションに Axios リクエストインターセプターを実装する方法は次のとおりです。

ステップ 1: Axios インスタンスを作成する

lib フォルダー (またはプロジェクト内の任意の場所) に新しいファイル axiosInstance.js を作成します。前に作成した Axios インスタンスにリクエストインターセプターを追加できます。このインターセプターは、すべてのリクエストが送信される前に実行されます。

Axios インスタンスを作成すると、そのインスタンスで行われたすべてのリクエストに適用されるベース URL やヘッダーなどのデフォルト設定を設定できます。これはコードを DRY (同じことを繰り返さない) に保つのに役立ちます。

lib フォルダーに axiosInstance.js という名前の新しいファイルを作成し、Axios インスタンスをセットアップします。

リーリー
私たちが行ったことの概要は次のとおりです:

axios.create()を使用してAxiosインスタンスを作成しました

baseURL を API のベース URL に設定します。 API の構成に合わせてこれを調整できます。
を使用して、発信リクエストをインターセプトして変更します。これにより、ヘッダーや認証トークンを追加したり、リクエスト構成にその他の変更を加えることができます。
ステップ 2: Next.js ページまたはコンポーネントで Axios インスタンスを使用する

リーリー

ステップ 3: インターセプターのカスタマイズ

必要に応じて他のアクションを実行するようにリクエストインターセプターをカスタマイズできます。たとえば、各リクエストの詳細をログに記録したい場合があります: How to implement Axios Request Interceptors in Next.js

リーリー

このセットアップでは、各リクエストの詳細がコンソールに記録され、デバッグの目的で役立ちます。

Next.js アプリケーションにリクエストインターセプターを実装すると、すべてのリクエストが送信される前に一貫して変更または拡張されるようになり、コードの保守性と機能性が向上します。

レスポンスインターセプタの実装

How to implement Axios Request Interceptors in Next.js リクエストインターセプターを使用して発信リクエストを変更できるのと同様に、Axios のレスポンスインターセプターを使用すると、レスポンスがアプリケーションコードに到達する前にグローバルにレスポンスを管理できます。これは、エラー処理、応答変換、ロギングなどのタスクに特に役立ちます。 Axios を使用して Next.js アプリケーションにレスポンスインターセプターを実装する方法を見てみましょう。

ステップ 1: 応答インターセプターを作成する

axiosInstance.js ファイルで、作成した Axios インスタンスにレスポンスインターセプターを追加できます。このインターセプターは、応答が受信されるたびに実行されます。

// 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 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); } ); // Add a response interceptor axiosInstance.interceptors.response.use( function (response) { // Do something with the response data console.log('Response:', response); return response; }, function (error) { // Handle the response error if (error.response && error.response.status === 401) { // Handle unauthorized error console.error('Unauthorized, logging out...'); // Perform any logout actions or redirect to login page } return Promise.reject(error); } ); export default axiosInstance;

ログイン後にコピー

Step 2: Use the Axios Instance in Next.js Pages or Components

With the response interceptor set up, you can use the Axios instance in your Next.js pages or components as usual. The interceptor will automatically handle responses and errors based on your configuration.

// pages/index.js import { 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 (  Data from API
 {data ? ( {JSON.stringify(data, null, 2)}) : (
        Loading...)}
       ); }
       
        ログイン後にコピー

How to implement Axios Request Interceptors in Next.js

By implementing response interceptors in your Next.js application, you can centralize response handling, improving code maintainability and application robustness. Whether it’s logging, transforming data, or managing errors, response interceptors provide a powerful way to manage HTTP responses efficiently.

Framework-Independent Alternative: Using Requestly

While Axios has powerful tools for processing HTTP requests within applications, integrating and managing interceptors directly within your codebase can be difficult and demand changes to your application’s architecture. Instead of depending on framework-specific solutions such as Axios interceptors, developers can use Requestly, a browser extension that modifies network requests and responses without requiring any changes to the application’s code. This method has various advantages over standard interceptors:

Simplifying Modifications with Requestly

No Code Changes Required: Unlike implementing interceptors in your application code, which requires understanding and modifying the codebase, Requestly operates entirely from the browser. This means developers can modify requests and responses dynamically without touching the application’s source code.
Flexibility Across Technologies: Requestly’s framework-independent nature allows it to work seamlessly across different projects and technologies. Whether you’re working with React, Angular, Vue.js, or any other framework, Requestly provides a consistent interface for managing network traffic.

Advantages of Using Requestly

Ease of Use: Requestly simplifies the process of modifying network requests and responses through an intuitive browser extension interface. This accessibility makes it ideal for developers of all skill levels, from beginners to advanced users.
Immediate Testing and Debugging: With Requestly, developers can instantly test and debug different scenarios by altering headers, URLs, or response content. This capability speeds up development cycles and enhances troubleshooting efficiency.
Enhanced Privacy and Security: Requestly empowers developers to block or modify requests to enhance privacy, security, and compliance with data protection regulations. For instance, blocking tracking scripts or adding secure headers can be done effortlessly.

Example Use Cases

Modify Server Response: Modify response content to simulate various server behaviors without backend changes.
Testing Different API Requests: Dynamically alter request to test different API endpoints or data payloads.
Blocking Network Request: Test your website under scenarios where certain external resources are unavailable
Adding Custom Headers: Add authentication tokens or custom CORS headers for testing APIs that require specific headers. ### How to use Requestly Interceptor

Modify API Response

Requestly allows you to modify API responses. It provides a user-friendly interface for overriding the response body of API requests, allowing you to mimic different data scenarios that your frontend might encounter.

Insert/Inject Script

Insert/Inject Script Rule allows you to inject JavaScript and CSS into web pages as they load. This means you can modify the DOM, change styles, or even add new functionality without altering the source code directly. It’s important for testing hypotheses or debugging during the development and quality assurance process. Learn more about it here.

Replace Rule

Replace Rule enables you to replace a String in URL with another String. This feature is particularly useful for developers to swap the API endpoints from one environment to another or change something specific in the URL. Requests are matched with source condition, and find and replace are performed on those requests by redirecting to the resulting URL. Learn more about this rule here.