xhrからaxiosへのソースコード分析(4)

最近少し忙しいので、長い間更新していません。
今日はaxiosのソースコードについて話します。ソースコードについて話しているので、最初にソースコードダウンロードする必要があります
最初にディレクトリを見てみましょう。

  • / dist / ---------------------------------プロジェクト出力ディレクトリ
  • / lib / -----------------------------------プロジェクトのソースコードディレクトリ
    • / adapters / -------------------------リクエストコンフィギュレーターの定義(xhr、http)
      • https.js --------------------------- httpアダプターを実装します
      • xhr.js ------------------------------ xhrアダプターを実装します
    • / cancel / -----------------------------キャンセル機能を定義します
    • / core / --------------------------------いくつかのコア機能
    • Axios.js ----------------------------- axiosのコア
    • dispatchRequest.js -------------- httpリクエストアダプタメソッドを呼び出してリクエストを送信するために使用される関数
    • インターセプターマネージャー.js -----------インターセプターマネージャー
    • settle.js ------------------------------ http応答ステータスに従って、Promiseのステータスを変更します
    • / helpers / -----------------------------いくつかの補助メソッド
    • axios.js ------------------------------外の世界で使用されているaxiosメソッド
    • defaults.js -------------------------- axiosのデフォルト構成
    • utils.js -------------------------------パブリックツール
    • package.json ----------------------プロジェクト情報
    • index.d.ts --------------------------- ts宣言ファイルを構成します
    • index.js ------------------------------エントリファイル

主にlibの下のファイルについて説明します
ここに画像の説明を挿入します
。これは、リクエストを送信するために実際に使用するファイルです。Xhr.jsは、主にリクエストされたファイルを送信するために使用されます。ここでは、前に述べたことを使用してxhrオブジェクトを作成しました
。http.jsは主に、要求されたファイルをサーバー側に送信するために使用されます。したがって、axiosはブラウザ側とサーバー側の両方でリクエストを送信できます。

adapters / xhr.js

xhr.jsは、promiseメソッドを返すxhrAdaperメソッドを公開します
ここに画像の説明を挿入します

キャンセル

1.cancel.js

リクエストをキャンセルするために使用されます。
リクエストがキャンセルされた場合、エラーが返され、ここでの戻り値はcancel()です。

2.iscancel.js

返されたエラーがキャンセルタイプであるかどうかを判断するために使用されます
ここに画像の説明を挿入します

3.cancelToken.js

ここに画像の説明を挿入します

ソースコード分析

1. axiosとAxiosの関係
1)構文的に言えば:axiosはAxiosのインスタンスではありません
2)機能的に言​​えば:axiosはAxiosのインスタンスです
3)AxiosはAxios.prototype.request関数によって返される属性ですbind()
4 )Axiosオブジェクトとして、Axiosのプロトタイプにはすべてのメソッドがあり、Axiosにはすべての属性があります
ここに画像の説明を挿入します
。2 インスタンスとaxiosの違い
1)同じ
(1)同時に任意のリクエストを送信できる関数
(2 )特定のリクエストを送信できますget()/ post()/ delete()/ request()
(3)デフォルトの構成とインターセプターのプロパティがありますデフォルト/インターセプター
2)異なる
(1)デフォルトの一致値は異なる可能性があります
( 2)インスタンスに追加した後、axiosがありませんメソッド:create()/ CancelToken()/ all()

おすすめ

転載: blog.csdn.net/lbchenxy/article/details/106328929