AxiosのInterceptorsを使用すると、要求または応答を「後」または「catch」に処理する前にブロックできます.したがって、Axiosを使用すると、APIを使用して通信する際によく使用されるbaseURLやヘッダなど、すべてのAxios要求を一度に処理することができる.

Axios-ブロッキングの基本構造

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

REST APIのbaseURLとタイトルの設定
たとえば、baseURLがhttp://localhost:3000/であり、タイトルには権限とContent-Typeが含まれている必要があると仮定します.
ブロッキングを使用しない場合は、axiosを使用するすべてのREST API要求にAPIアドレスと必要なヘッダファイルを追加する必要があります.
以下のようにbaseURLやheadersを変数として使用しても、常に加入する必要があるため、面倒になります.
変数としてbaseURLとヘッダーを使用

const baseURL = "http://localhost:3000/";
const options = {
  headers: {
    Authorization: `Bearer ${process.env.REACT_APP_KEY}`,
    "Content-Type": "application/json",
  },
};
get

const getData = async () => {
  await axios.get(baseURL, options);
};
post

const postData = async () => {
  await axios.post(baseURL, {data}, options);
};
patch

const patchData = async (todo) => {
  await axios.patch(`${baseURL}/${todo.id}`, {data}, options);
};
delete

const deleteData = async (todo) => {
  await axios.delete(`${baseURL}/${todo.id}`, options);
};

ブロッカーを使用してすべてのaxiosリクエストにbaseURLとheaderを追加したため、axiosリクエストのたびにbaseURLとheaderを追加する必要はなくなりました.
以前はインターセプタを使用する前にAPIリクエスト時に必要なヘッダが抜けてエラーが発生することがよくありましたが、今は別に入力しなくても自分で入ることができるのでエラーはありません.
ブロッキングを使用して、すべてのaxiosリクエストにbaseURLとheaderを挿入できます.

axios.defaults.baseURL =
  "http://localhost:3000/";
axios.interceptors.request.use(async (config) => {
  if (!config.headers["Authorization"]) {
    config.headers[
      "Authorization"
    ] = `Bearer ${process.env.REACT_APP_KEY}`;
  }
  config.headers["Content-Type"] = "application/json";

  return config;
});

get

const getData = async () => {
  await axios.get("/");
};

post

const postData = async () => {
  await axios.post("/", {data});
};

patch

const patchData = async (todo) => {
  await axios.patch(`/${todo.id}`, {data});
};

delete

const deleteData = async (todo) => {
  await axios.delete(`/${todo.id}`);
};