axios----構成の詳細
3552 ワード
Axiosの構成パラメータはたくさんありますが、一つ一つ理解してみましょう. url-サーバに要求を送信するためのurl method-要求メソッド、デフォルトはGETメソッド baseURL-urlが絶対パスでない場合、https://some-domain.com/api/v1/login?name=jackでは、サーバに要求を送信するURLはbaseURL+urlになります. transformRequest-transformRequestメソッドでは、要求がサーバに送信される前に要求を変更できます.このメソッドは、PUT、POST、およびPATCHメソッドにのみ適用されます.また、このメソッドは最後にstring、ArrayBuffer、またはStreamを返さなければなりません. transformResponse-transformResponseメソッドでは、then/catchにデータが渡される前にresponseデータを変更できます.このメソッドは、最後にデータを返します. headers--httpリクエストの様々な情報を含むカスタムHeadersヘッダファイルを送信します. params--paramsは要求を送信するクエリーパラメータオブジェクトで、オブジェクトのデータはurlに結合されますか?param1=value1¶m2=value2. paramsSerializer--paramsパラメータシーケンス化器. data-dataは、POST、PUT、またはPATCH要求を送信するデータオブジェクトである. timeout-リクエストタイムアウト設定(ミリ秒 ) withCredentials-証明書 を使用する必要があるドメイン間リクエストがあるかどうかを示します. adapter--adapterは、ユーザーがよりテストしやすい要求を処理できるようにします.Promiseと有効なresponse を返します. auth--authはhttpの認証を完了するために証明書を提供することを示す.これにより、headersにAuthorizationライセンス情報が設定されます.カスタムAuthorizationライセンスはheadersに設定します. responseType--サーバが応答を返すデータ型を表し、arraybuffer、blob、document、json、text、streamの6種類があり、デフォルトはjson類似データである. xsrfCookieName-xsrf token値として使用されるcookie名 xsrfHeaderName-xsrf token値http head名付き onUploadProgress--アップロード中にいくつかの操作を許可する onDownloadProgress--ダウンロード中にいくつかの操作を許可する maxContentLength--受信したresponse応答データの最大長を定義します. validateStatus--validateStatusは、HTTP応答ステータスコードに基づいて取得を受信または拒否するかどうかを決定するpromiseを定義する.validateStatusがtrue(nullまたはundefinedに設定)を返すとpromiseが受信されます.そうでなければpromiseは拒否されます. maxRedirects-maxRedirectsはnodeで定義されている.jsのredirectの最大値は、0に設定した場合、redirectはありません. httpエージェント-httpリクエストを使用するエージェント を定義します. httpsAgent-httpsリクエストを使用するエージェント を定義します. proxy--proxyはプロキシサーバーのホスト名とポートを定義し、auth cancelToken-cancelToken要求を取り消すためのcancel tokenを定義する 統一コンフィギュレーション
インタフェーステストでは、オンライン環境とテスト環境を切り替える必要があります.ここではConfigで構成することができます.これにより、私たちが開始したすべての要求はこの基本的なURLを通じて行きます.
1
2
3
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://www.xxxx.xxx/api';
//axios.defaults.baseURL = 'http://192.168.1.129:8383';
Interceptorsブロッキング
ここでは、大量のリクエストを開始する際に、リクエストを統一的に処理する必要があることを重点的に紹介しなければなりません.筆者は
You can intercept requests or responses before they are handled by then or catch. 要求をブロックしたり、応答する前に処理した操作や例外をブロックできます.
request統合処理操作
POSTの要求であれば、構成では
要求メソッド別名
次はaxiosがサポートするすべてのリクエストメソッドの別名で、さまざまなリクエストを容易にします.注: axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
同時性
次のインタフェースは、コンカレントリクエストの処理(複数のrequestを同時に処理)に使用されます. axios.all(iterable) axios.spread(callback)
インタフェーステストでは、オンライン環境とテスト環境を切り替える必要があります.ここではConfigで構成することができます.これにより、私たちが開始したすべての要求はこの基本的なURLを通じて行きます.
1
2
3
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://www.xxxx.xxx/api';
//axios.defaults.baseURL = 'http://192.168.1.129:8383';
Interceptorsブロッキング
ここでは、大量のリクエストを開始する際に、リクエストを統一的に処理する必要があることを重点的に紹介しなければなりません.筆者は
vue-resource
とaxios
を用いた後,axios
の配置をより人間的に比較した.公式のAPIではこう紹介されていますYou can intercept requests or responses before they are handled by then or catch. 要求をブロックしたり、応答する前に処理した操作や例外をブロックできます.
request統合処理操作
POSTの要求であれば、構成では
params
フィールドを使用できません.data
フィールドを使用する必要があります.ここには注意しなければならない小さな点があります.POSTのパスはシーケンス化する必要があります.そうしないと、サービス側は正しく受信しません.エラーが発生します.ここではrequestのデータを一度シーケンス化します.要求メソッド別名
次はaxiosがサポートするすべてのリクエストメソッドの別名で、さまざまなリクエストを容易にします.注:
[...]
のデータは、空であってもよいことを示します.url
はajax要求アドレスである.data
は、コミットされたデータオブジェクトである.config
は構成オブジェクトであり、すべてのajax構成はconfig
で実現することができる.同時性
次のインタフェースは、コンカレントリクエストの処理(複数のrequestを同時に処理)に使用されます.