みなさん、こんにちは。私は起業家歴 10 年のベテランであり、オープンソーステクノロジーの愛好家である Liu Ming です。
いくつかの子供用の靴が私に尋ねました, Nuxt3 に Axios を統合するにはどうすればよいですか? 私の答えは、Axios を Nuxt3 に統合しないでくださいですが、Axios は非常に使いやすく、
ほとんどの学生はすでに Axios の使用に慣れています。しかし、Nuxt3 公式チームは Axios の使用を推奨していません。この記事では子供用の靴を紹介します。

Axios が公式に推奨されない理由
Nuxt3 で Axios と同様の機能をカプセル化する方法。

アクシオスの過去と現在

アクシオスの誕生

初期の頃、ブラウザでネットワークリクエストを開始するには XMLHttpRequest オブジェクトが必要で、ノードバックエンド環境でネットワークリクエストを開始するには http モジュールが必要でした。この 2 つは書き方が異なり、使用するのがより複雑です。そこで Axios はこの 2 つのパッケージを作成し、フロントエンドとバックエンドの記述方法を統合しました。
開発者にとって、Axios を使用する限り、それがノード環境であるかブラウザ環境であるかを区別する必要はなく、いずれにしても、両者は同じように記述されます。それだけでなく、Axios にはリクエストインターセプトやレスポンスインターセプトなどの高度な機能もあります。そのため、Axios はすぐに人気になりました。Nuxt2 には Axios モジュールも統合されており、公式もそれを強く推奨しています。

アクシオスが時代遅れ

Nuxt3 で時代は変わりました。
まずはブラウザ環境です。ブラウザはフェッチをネイティブにサポートしており、XMLHttpRequest を置き換える傾向があります。
次に Node が登場し、2022 年 2 月に Node v17.5 がリリースされ、フェッチのネイティブサポートが導入されました。
これまでのところ、フェッチはフロントエンドとバックエンドで統合されています。
振り返ってみると、XMLHttpRequest の Axios フロントエンドカプセル化、http のバックエンドカプセル化はまったく必要ありません。

アクシオスについてどう思うか

fetch のフロントエンドとバックエンドは統一されていますが、Axios を使用することを好む子供たちがまだたくさんいます。これは正常なことです。結局のところ、Axios は本当に使いやすく、多くの古いプロジェクトはまだメンテナンスする必要があります。
そこで、インターネット上の記事をいくつか見て、Axios と Fetch を比較した場合、Fetch よりも Axios の方が優れているという結論に達しました。実際、これは非常に間違った比較です。Axios はパッケージ化されたプロジェクトであり、fetch は単なるネイティブ API であるため、比較する必要がある場合は、XMLHttpRequest オブジェクトと fetch、または http モジュールと fetch を比較する必要があります。
時間が経つにつれて、fetch の使用を推奨する新しいプロジェクトが増えます。Nuxt3 は 2022 年に誕生した新しいプロジェクトで、Axios の使用を完全に放棄します。

Nuxt3 の公式実践

Axios と Fetch を比較し、間違った比較ではありますが、Axios の方が優れていると結論付けます。しかし、少なくとも 1 つの点は、fetch が本当に認識されるためには、非常に便利なパッケージが必要であるということです。これを考慮して、Nuxt3 の公式チームは fetch をさらにカプセル化し、 ofetchという新しいプロジェクトを開発し、ofetch を Nuxt3 に統合しました。Nuxt3 にはどこでも使えるグローバルオブジェクト $fetch という ofetch があり、ofetch
のコードはすべて読みましたが、Axios に比べてコード量が少なく、基本的には Axios の機能を持っています。Ofetch はデフォルトで Nuxt3 に正式に統合されており、ofetch はすでに Nuxt3 プロジェクトに不可欠な部分です。したがって、当然のことながら、Axios は推奨されなくなりました。

Nuxt3でAxiosと同様の関数をカプセル化する方法

Nuxt3 公式ドキュメントの DataFeching セクションでは、useFech と $fetch の簡単な使い方が紹介されていますので、Nuxt3 を始めたばかりの方は、このセクションをよく読むことを強くお勧めします。
ただし、多くのプロジェクトでは依然として、baseURL、リクエストインターセプト、および対応するインターセプトを設定する必要があります。これらの関数のいずれも、公式ドキュメントにはコード例が記載されていません。
実装は非常に簡単で、useRequest の組み合わせ関数を記述するだけです。Nuxt3では合成機能が自動でインポートされるので、書き出してから利用することができます。

//文件位置：/composables/useRequest.ts
type Response = {
  url: string;
  body:any,
  status: number;
  type:string,
  statusText?: string;
  _data?: any;
  headers?:object,
  ok?:boolean,
  redirected?:boolean,
  bodyUsed?:boolean,
};
type ResponseData={
  code:number,
  msg:string,
  data:object|object[]
}

export const useRequest = async (url: string,options:object) => {
  const router = useRouter();
  //此处是引入了pinia进行状态管理，大家可以根据自己需求进行重写
  //const store = useMainStore();
  const host = window.location.hostname;
  const headers = {
    Authorization:'Bearer '+localStorage.getItem('token')||null,
  };
  const defaultOptions:object = {
    //baseURL也可以在nuxt.config.ts中定义然后此处引入
    baseURL: "http://example.com",
    headers: headers,
    //响应拦截
    onResponse({ response }: { response: Response }) {
      console.log("response", response);
      const res = response._data;
      //后端返回code=0时弹出错误信息，此处采用了element-plus
      if (res.code == 0) {
        ElMessage.error(res.msg);
      }
    },
    //响应错误拦截
    onResponseError({ response }: { response: Response }) {
      console.log("response-error", response);
      const res = response._data;
      //后端返回401时导航到登录界面
      if (response.status == 401) {
        router.replace("/login");
        //store.logout()
      }
    },
  };
  const newOptions:object={...defaultOptions,...options};
  //采用element-plus进行请求时的加载
  //const loadingInstance = ElLoading.service({fullscreen:false});
  const { data, pending,refresh } = await useFetch(url, newOptions);
  if (!pending.value) {
    //loadingInstance.close();
  }
  return {data,refresh};
};

上記のパッケージコードは TypeScript で書かれています。TypeScriptに慣れていない場合は、プライベートメッセージを送って JavaScript の書き方を入手してください。
このパッケージでは主に以下の機能が実現されます。

グローバルベースURLを追加しました。
バックエンド認証用のトークンを含むグローバルヘッダーがリクエストに追加されます。
応答インターセプトの追加、エラーメッセージの統一プロンプト、および 401 エラーのログインインターフェイスへの自動転送
elemeng-plus の読み込みコンポーネントがネットワークリクエストに追加され、読み込みの開始と終了を自動的に処理します。

このカプセル化は、実際には正式な useFetch をさらに処理したもので、カプセル化後も useFetch のデータとリフレッシュが返されるだけで、使用方法は基本的に useFetch と同じです。
useFetch の使用に慣れていない場合は、公式ドキュメントを直接確認してください。
useFetch ドキュメント

上記のコードは単なる例であり、子供用の靴は必要に応じて書き換えることができます。たとえば、リクエストごとにメソッドを選択する必要を避けるために、別の useGet または usePost 組み合わせ関数を作成するか、複雑なリクエストインターセプトを追加します。重要なのは、ofetch の使用法を理解する必要があるということです
。この方法でのみ、必要に応じてコードを自由に変更できます。

私は起業家歴 10 年のベテランであり、オープンソーステクノロジーの愛好家である Ming Liu です。コミュニケーションや学習を行っている場合でも、開発ニーズがある場合でも、プライベートメッセージでご連絡ください。
ご質問がございましたら、Lao Liu までご連絡ください。

【Nuxt連載記事】Nuxt3のネットワークリクエストを理解するための1記事