zl fetch
v6.0.6
zlFetch は、リクエストを行うための便利な方法を提供するフェッチのラッパーです。
その特徴は次のとおりです。
ネイティブfetch機能よりも生活の質が向上
response.json() 、 response.text() 、またはresponse.blob()を使用せずに、応答をすぐに使用します。catchブロックに送られます。awaitを使用する場合の簡単なエラー処理 — エラーを返すことができるため、 try/catchブロックを記述する必要はありません。ネイティブfetch機能に対する追加の改善
Content-Typeヘッダーは、 body内容に基づいて自動的に設定されます。headers 、 body 、 statusなど、応答に関して必要なすべてを取得します。GET 、 POST 、 PUT 、 PATCH 、およびDELETEメソッドの短縮形authプロパティを使用して認証ヘッダーを生成します。注: zlFetch はv4.0.0以降の ESM ライブラリです。
# Installing through npm
npm install zl-fetch --saveその後、JavaScript ファイルにインポートして使用できるようになります。
import zlFetch from 'zl-fetch'npmを使用せずにzlFetch使用する:CDN を通じて zlFetch を JavaScript に直接インポートできます。
これを行うには、まずscriptのタイプをmoduleに設定し、次にzlFetchインポートする必要があります。
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > zlFetch は、通常のfetch関数と同じように使用できます。唯一の違いは、 response.jsonメソッドやresponse.textメソッドを記述する必要がなくなったことです。
zlFetch が自動的に処理するため、応答の使用に直接進むことができます。
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch には、これらの一般的な REST メソッドの短縮メソッドが含まれているため、これらをすぐに使用できます。
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ )zlFetch はjson 、 text 、およびblob応答タイプをサポートしているため、 response.json() 、 response.text()またはresponse.blob()を記述する必要はありません。
他の応答タイプは現在サポートされていません。他の応答タイプをサポートする必要がある場合は、独自の応答ハンドラーの使用を検討してください。
zlFetch は、必要なすべてのデータをresponseオブジェクトで送信します。これには次のものが含まれます。
headers : 応答ヘッダーbody : レスポンスボディstatus : 応答ステータスstatusText : 応答ステータスのテキストresponse : Fetch からの元の応答これは、 headers 、 status 、 statusText 、さらにはresponseオブジェクトの残りの部分を自分で検索する必要がないようにするためです。
v4.0.0の新機能: debugオプションを追加することで、リクエスト オブジェクトをデバッグできます。これにより、構築中のリクエストを含むdebugオブジェクトが表示されます。
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) )zlFetch は、すべての 400 エラーと 500 エラーをcatchメソッドに送ります。エラーには応答と同じ情報が含まれます。
headers : 応答ヘッダーbody : レスポンスボディstatus : 応答ステータスstatusText : 応答ステータスのテキストresponse : フェッチからの元の応答これにより、zlFetch を Promise で使用するのが非常に簡単になります。
zlFetch ( 'some-url' ) . catch ( error => {
/* Handle error */
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' )
. then ( response => {
if ( ! response . ok ) {
Promise . reject ( response . json )
}
} )
. catch ( error => {
/* Handle error */
} )async / await使用する場合の簡単なエラー処理zlFetch を使用すると、すべてのエラーをerrorsオブジェクトに渡すことができます。これを行うには、 returnErrorオプションを追加します。これは、 async/awaitを頻繁に使用する場合に便利です。
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) オプションとしてquery queries追加すると、zlFetch がクエリ文字列を自動的に作成します。これをGETリクエストで使用します。
zlFetch ( 'some-url' , {
queries : {
param1 : 'value1' ,
param2 : 'to encode' ,
} ,
} )
// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1¶m2=to%20encode' )body内容に基づいたContent-Type生成zlFetch は、 bodyデータに応じてContent-Type適切に設定します。次の 3 種類のデータをサポートします。
objectを渡すと、 zlFetch はContent-Type application/jsonに設定します。また、本文JSON.stringifyするので、自分で行う必要はありません。
zlFetch . post ( 'some-url' , {
body : { message : 'Good game' } ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/json' } ,
body : JSON . stringify ( { message : 'Good game' } ) ,
} ) zlFetch には、フォーム データをオブジェクトに変換できるtoObjectヘルパーが含まれています。これにより、フォームでの zlFetch が非常に簡単になります。
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} )文字列を渡すと、zlFetch はContent-Typeをapplication/x-www-form-urlencodedに設定します。
zlFetch には、オブジェクトをクエリ文字列に変換するのに役立つtoQueryStringメソッドも含まれているため、このオプションを簡単に使用できます。
import { toQueryString } from 'zl-fetch'
zlFetch . post ( 'some-url' , {
body : toQueryString ( { message : 'Good game' } ) ,
} )
// The above request is equivalent to this
fetch ( 'some-url' , {
method : 'post' ,
headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } ,
body : 'message=Good%20game' ,
} ) Form Data を渡すと、zlFetch はネイティブのfetch関数にContent-Typeを処理させます。通常、これはデフォルトのオプションでmultipart/form-data使用します。これを使用する場合は、サーバーがmultipart/form-data受信できることを確認してください。
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , { body : data } )
// The above request is equivalent to this
fetch ( 'some-url' , { body : data } )
// Your server should be able to receive multipart/form-data if you do this. If you're using Express, you can a middleware like multer to make this possible:
import multer from 'multer'
const upload = multer ( )
app . use ( upload . array ( ) ) v5.0.0の重大な変更: Content-Typeヘッダーを渡すと、zlFetch は本文コンテンツのフォーマットを設定しなくなります。正しいデータ型を渡すことができることが期待されます。 (上記の新しい API をサポートするためにこれを行う必要がありました)。
zlFetch にauthプロパティを指定すると、認証ヘッダーが生成されます。
string (通常はトークン用) を渡すと、Bearer Auth が生成されます。
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} ) objectを渡すと、zlFetch は Basic 認証を生成します。
zlFetch ( 'some-url' , {
auth : {
username : 'username'
password : '12345678'
}
} )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Basic ${ btoa ( 'username:12345678' ) } ` }
} ) ;事前定義されたオプションを使用してzlFetchのインスタンスを作成できます。これは、同様のoptionsまたはurlを使用してリクエストを送信する必要がある場合に非常に役立ちます。
urlは必須ですoptionsは任意です import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )すべてのインスタンスには短縮メソッドもあります。
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) v5.0.0の新機能
URL を渡さずにzlFetchインスタンスを使用できるようになりました。これは、適切なエンドポイントを使用してインスタンスを作成した場合に便利です。
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )すべてのインスタンスには短縮メソッドもあります。
// Shorthand methods
const response = api . get ( ) // Without URL, without options
const response = api . get ( 'some-url' ) // With URL, without options
const response = api . post ( 'some-url' , { body : 'message=good+game' } ) // With URL, with options
const response = api . post ( { body : 'message=good+game' } ) // Without URL, with optionszlFetch でサポートされていない応答を処理したい場合は、 customResponseParser: trueオプションに渡すことができます。これにより、zlFetch からの追加処理を行わずに、通常のフェッチ要求からの応答が返されます。その後、 response.json()または必要に応じて他のメソッドを使用できます。
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
