reactモジュール化axiosから🎶

こんにちは!今日はReactのaxiosモジュール化をテーマに記事を書きます.axiosは通常javascriptでサーバ通信を行う際に使用されるライブラリですが、より効率的に使用する方法を見てみましょう.

1.一般的なaxiosの使用😒

通常、「文章を書く」というapiを使用する場合、axiosの共通コードは次のようになります.

import axios from 'axios';
import cookies from 'js-cookie';

const SERVER = 'http://localhost:8080/api/v1';

const requestPost = async (postDto) => {
  const res = await axios.get(`${SERVER}/write-post`, postDto, {
    headers: {
      access_token: cookies.get('access_token'),
    },
  });
}

この機能を前述のように扱うと、ヘッダーに統一的にマークされ、デフォルトのサーバURLの作成を続行するコードが作成されます.
しかし、これらの操作が一致せず、自動的に値を挿入したらどうなるのでしょうか.
このaxiosをカスタマイズしてみましょう

2. customAxios.tsファイルの作成💽

まずファイルを作成しましょう.src/libパスでcustomaxiosを使用します.tsというファイルを作成します.このファイルにaxiosインスタンスを作成させます.
参照ドキュメント:https://xn--xy1bk56a.run/axios/guide/api.html#http-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%B3%84%EC%B9%AD
次のコードをcustomaxiosファイルに追加します.

import axios, { AxiosInstance } from 'axios';
import cookies from 'js-cookie';

export const customAxios: AxiosInstance = axios.create({
  baseURL: `${SERVER_ADDRESS}`, // 기본 서버 주소 입력
  headers: {
    access_token: cookies.get('access_token'),
  },
});

上のaxios.パラメータとしてcreate関数に渡されるbaseURLとheadersオブジェクトは何を意味しますか?
baseURLはサーバーのデフォルトのURLを表し、タイトルに毎回渡さなければならないオブジェクト(例えば、ユーザータグ)が含まれている場合、自動的に挿入されます.
customaxiosがエクスポートされた以上、今すぐ使用しましょう.

3.customaxiosの使用🎶

CustomAxiosを使用して、最初のトピックで実装されたAPIを使用する機能を実装します.コードは次のとおりです.

import { customAxios } from 'lib/customAxios';

const requestPost = async (postDto) => {
  const res = await customAxios.post('/write-post', postDto);
}

上記の一般的なaxiosコードと比較して、どのような感じがしますか?タイトルにタグを追加することなく、URLパスにbaseURLの後ろの部分だけを挿入できます.
以上の2つの利点はaxiosをカスタマイズする最大の原因だと思います.

4.リフレッシュタグの処理（インタフェース付き）🧨

最後にAxiosインタフェースを利用する方法について説明します인터셉터はブロックを意味し、その名の通り、要求が発行される前にブロック要求のタスクを実行する.
次の例は、リフレッシュタグ処理に基づいている.
リフレッシュタグを処理する関数コードを作成します.

import axios, { AxiosRequestConfig } from 'axios';
import cookies from 'js-cookie';
import * as jwt from 'jsonwebtoken';

export const checkToken = async (config: AxiosRequestConfig) => {
  let accessToken = cookies.get('access_token');
  const decode = jwt.decode(accessToken);
  const nowDate = new Date().getTime() / 1000;
  
  // 토큰 만료시간이 지났다면
  if (decode.exp < nowDate) {
    const { data } = await axios.post(`${SERVER_URL}/token`, { accessToken }, {
        headers: {
          access_token: getToken(),
        },
      });
    // 리프레쉬 토큰 발급 서버 요청
    
    const { refreshToken } = data.data;
    
    accessToken = refreshToken;
  }
  
  config.headers['access_token'] = accessToken;
  return config;
}

関数を書き終わったらcustomaxiostsファイルにもう1行追加してください.コードは次のとおりです.

customAxios.interceptors.request.use(checkToken);

コードの追加が完了すると、axiosにリクエストが送信されるたびに、ヘッダーのタグが検証され、期限切れであるかどうかを確認し、リフレッシュタグ処理が自動的に実行されます.
今日はaxiosをカスタマイズする方法について説明しました.次回も有益なテーマで皆さんにお会いしたいと思います長いコメントありがとうございます😀