Axios는 HTTP 요청을 서버에 더 쉽게 보낼 수 있도록 널리 사용되는 JavaScript 라이브러리입니다. 눈에 띄는 기능 중 하나는 앱이 요청과 응답을 포착할 수 있게 해주는 인터셉터입니다. 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 구성에 맞게 조정할 수 있습니다.
• 보내는 요청을 가로채고 수정하기 위해interceptors.request.use()를 사용했습니다. 이를 통해 헤더, 인증 토큰을 추가하거나 요청 구성을 변경할 수 있습니다.

2단계: Next.js 페이지 또는 구성 요소에서 Axios 인스턴스 사용

요청 인터셉터를 설정하면 평소처럼 Next.js 페이지나 구성 요소에서 Axios 인스턴스를 사용할 수 있습니다. 인터셉터는 각 요청이 전송되기 전에 자동으로 토큰을 추가하거나 다른 구성된 작업을 수행합니다.

3단계: 인터셉터 사용자 정의

요청 인터셉터를 사용자 정의하여 필요에 따라 다른 작업을 수행할 수 있습니다. 예를 들어 각 요청의 세부정보를 기록할 수 있습니다.

이 설정은 각 요청의 세부정보를 콘솔에 기록하므로 디버깅 목적에 도움이 될 수 있습니다.

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...
)}
       
); }
       

        로그인 후 복사
       
      

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.

Conclusion

Dans cet article de blog, nous avons exploré le concept puissant d'interception des requêtes avec Axios dans une application Next.js. Cela permet aux développeurs d'avoir plus de contrôle sur les requêtes et les réponses HTTP au sein de leurs applications. Qu'il s'agisse d'ajouter des jetons d'authentification, de journaliser les demandes à des fins de débogage ou de gérer les erreurs à l'échelle mondiale, les intercepteurs Axios offrent une solution flexible pour répondre à divers besoins de développement.

Si vous aimez ce blog, consultez notre autre blog sur Comment implémenter l'intercepteur Axios dans React

위 내용은 Next.js에서 Axios 요청 인터셉터를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!