thwack
1.0.0
TL;DRThwack ist:
Diese README-Datei ist in Arbeit. Sie können mir auch auf Twitter eine Frage stellen.
Installation $ npm i thwackoder
$ yarn add thwack Warum Thwack über Axios? Axios war großartig, als es damals veröffentlicht wurde. Es gab uns einen auf Versprechen basierenden Wrapper für XMLHttpRequest , der schwierig zu verwenden war. Aber das ist lange her und die Zeiten haben sich geändert – Browser sind intelligenter geworden. Vielleicht ist es an der Zeit, dass Ihre Datenabruflösung mithalten kann?
Thwack wurde von Grund auf für moderne Browser entwickelt. Aus diesem Grund verfügt es nicht über das Gepäck, das Axios hat. Axios wiegt im gezippten Zustand etwa 5.000. Thwack hingegen ist ein schlanker Wert von ca. 1,5.000.
Sie unterstützen die gleiche API, es gibt jedoch einige Unterschiede – hauptsächlich hinsichtlich options –, aber größtenteils sollten sie für viele Anwendungen austauschbar verwendet werden können.
Thwack versucht nicht, wie Axios, jedes Problem zu lösen, sondern bietet die Lösung für 98 % dessen, was Benutzer wirklich brauchen. Dies verleiht Thwack seinen federleichten Fußabdruck.
Krass das. Thwack bietet die gleiche Leistung wie Axios bei deutlich geringerem Platzbedarf. Und das auf Versprechen basierende Ereignissystem von Thwack ist einfacher zu verwenden.
MethodenDie folgenden Methoden sind auf allen Thwack-Instanzen verfügbar.
thwack(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.request(options: ThwackOptions): Promise<ThwackResponse>
thwack.get(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.delete(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.head(url: string [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.post(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.put(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.patch(url: string, data:any [,options: ThwackOptions]): Promise<ThwackResponse>;
thwack.create(options: ThwackOptions): ThwackInstance;
Die Methode create erstellt (da!) eine neue untergeordnete Instanz der aktuellen Thwack-Instanz mit den angegebenen options .
thwack.getUri(options: ThwackOptions): string;
Die URL-Auflösung von Thwacks ist RFC-3986-konform. Axios ist es nicht. Es wird von @thwack/resolve unterstützt.
Thwack unterstützt die folgenden Ereignistypen: request , response , data und error .
Weitere Informationen zum Ereignissystem von Thwack finden Sie unten im Abschnitt „Thwack-Ereignisse“.
thwack.addEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;
thwack.removeEventListener(type: string, callback: (event:ThwackEvent) => Promise<any> ): void;
Statische MethodenThwack verfügt über die folgenden Hilfsfunktionen zum gleichzeitigen Senden von Anfragen. Sie dienen hauptsächlich der Axios-Kompatibilität. Beispiele für die Verwendung finden Sie im Abschnitt „Anleitung“ weiter unten.
thwack.all(Promise<ThwackResponse>[])
thwack.spread(callback<results>)
ThwackOptions Das options hat die folgenden Eigenschaften.
urlDies ist entweder eine vollständig qualifizierte oder eine relative URL.
baseURL Definiert eine Basis-URL, die zum Erstellen einer vollständig qualifizierten URL aus der oben genannten url verwendet wird. Muss eine absolute URL oder undefined sein. Standardmäßig wird der origin + pathname der aktuellen Webseite verwendet, wenn sie in einem Browser ausgeführt wird oder auf Node oder React Native undefined .
Wenn Sie beispielsweise Folgendes getan haben:
thwack ( 'foo' , {
baseURL : 'http://example.com' ,
} ) ;Die abgerufene URL lautet:
http://example.com/foo
method Eine Zeichenfolge, die eine der folgenden HTTP-Methoden enthält: get , post , put , patch , delete oder head .
data Wenn die method post , put oder patch ist, sind dies die Daten, die zum Erstellen des Anforderungshauptteils verwendet werden.
headersHier können Sie optionale HTTP-Anfrageheader platzieren. Alle hier angegebenen Header werden mit allen Instanz-Header-Werten zusammengeführt.
Wenn wir beispielsweise eine Thwack-Instanz wie folgt festlegen:
const api = thwack . create ( {
headers : {
'x-app-name' : 'My Awesome App' ,
} ,
} ) ;Wenn Sie dann später die Instanz verwenden, führen Sie einen Aufruf wie diesen durch:
const { data } = await api . get ( 'foo' , {
headers : {
'some-other-header' : 'My Awesome App' ,
} ,
} ) ;Die zu sendenden Header sind:
x-app-name: My Awesome App
some-other-header': 'My Awesome App'
defaultsDadurch können Sie die Standardoptionen für diese Instanz und praktisch alle untergeordneten Instanzen lesen/festlegen.
Beispiel:
thwack . defaults . baseURL = 'https://example.com/api' ; Für eine Instanz ist defaults dasselbe Objekt, das an create übergeben wurde. Im Folgenden wird beispielsweise „https://example.com/api“ ausgegeben.
const instance = thwack . create ( {
baseURL : 'https://example.com/api' ,
} ) ;
console . log ( instance . defaults . baseURL ) ; Beachten Sie außerdem, dass das Festlegen von defaults für eine Instanz (oder sogar das Übergeben von options ) an eine Instanz KEINE Auswirkungen auf die übergeordnete Instanz hat. Für das folgende Beispiel lautet thwack.defaults.baseURL also immer noch „https://api1.example.net/“.
thwack . defaults . baseURL = 'https://api1.example.net/' ;
const instance = thwack . create ( ) ;
instance . defaults . baseURL = 'https://example.com/api' ;
console . log ( thwack . defaults . baseURL ) ;params Dies ist ein optionales Objekt, das die Schlüssel/Wert-Paare enthält, die zum Erstellen der Abruf-URL verwendet werden. Gibt es :key -Segmente der baseURL oder der url , werden diese durch den Wert des passenden Schlüssels ersetzt. Wenn Sie beispielsweise Folgendes getan haben:
thwack ( 'orders/:id' , {
params : { id : 123 } ,
baseURL : 'http://example.com' ,
} ) ;Die abgerufene URL lautet:
http://example.com/orders/123
Wenn Sie keinen :name angeben oder mehr param als :name s vorhanden sind, werden die verbleibenden Schlüssel/Werte als Suchparameter festgelegt (z. B. ?key=value ).
maxDepth Die maximale Anzahl rekursiver Anforderungen, die in einem Callbck gestellt werden können, bevor Thwack einen Fehler auslöst. Dies wird verwendet, um zu verhindern, dass ein Ereignisrückruf eine rekursive Schleife verursacht, wenn eine weitere request ohne entsprechende Sicherheitsvorkehrungen ausgegeben wird. Standard = 3.
responseType Standardmäßig bestimmt Thwack anhand des Werts des Antwortheaders content-type “ automatisch, wie die Antwortdaten dekodiert werden. Wenn der Server jedoch mit einem falschen Wert antwortet, können Sie den Parser überschreiben, indem Sie responseType festlegen. Gültige Werte sind arraybuffer , document (d. h. formdata ), json , text , stream und blob . Standardmäßig ist „Automatisch“ eingestellt.
Was von Thwack zurückgegeben wird, wird durch die folgende Tabelle bestimmt. Die Spalte „Abrufmethode“ ist das, was in data aufgelöst wird. Wenn Sie keinen responseType angeben, bestimmt Thwack automatisch die Abrufmethode basierend auf content-type und der responseParserMap -Tabelle (siehe unten).
| Inhaltstyp | responseType | fetch |
|---|---|---|
application/json | json | response.json() |
multipart/form-data | formdata | response.formData() |
text/event-stream | stream | gibt response.body als data ohne Verarbeitung zurück |
blob | response.blob() | |
arraybuffer | response.arrayBuffer() | |
*/* | text | response.text() |
Hinweis:
streamwird derzeit in React Native aufgrund von #27741 nicht unterstützt
responseParserMap Eine weitere nützliche Möglichkeit, den zu verwendenden Antwortparser zu bestimmen, ist die Verwendung von responseParserMap . Sie können damit eine Zuordnung zwischen dem resultierenden content-type aus dem Antwortheader und dem Parsertyp einrichten.
Thwack verwendet standardmäßig die folgende Karte, die json und formdata -Dekodierung ermöglicht. Wenn es keine Übereinstimmungen gibt, verwendet der Antwortparser standardmäßig text . Sie können einen Standardwert festlegen, indem Sie die Sondertaste */* festlegen.
{
"application/json" : " json " ,
"multipart/form-data" : " formdata " ,
"*/*" : " text "
} ; Jeder Wert, den Sie in responseParserMap angeben, wird in die Standardzuordnung eingefügt. Das heißt, Sie können die Standardwerte überschreiben und/oder neue Werte hinzufügen.
Nehmen wir zum Beispiel an, Sie möchten ein Bild in einen Blob herunterladen. Sie können die baseURL auf Ihren API-Endpunkt und eine responseParserMap festlegen, die Bilder jeglicher Art als Blobs herunterlädt, aber weiterhin json Downloads zulässt (da dies die Standardeinstellung für einen content-type: application/json ).
import thwack from 'thwack' ;
thwack . defaults . responseParserMap = { 'image/*' : 'blob' } ; Jede URL, die Sie mit einem image/* Inhaltstyp herunterladen (z. B. image/jpeg , image/png usw.), wird mit dem blob Parser analysiert.
const getBlobUrl = async ( url ) => {
const blob = ( await thwack . get ( url ) ) . data ;
const objectURL = URL . createObjectURL ( blob ) ;
return objectURL ;
} ;Sehen Sie sich dieses Beispiel an, das auf CodeSandbox ausgeführt wird.
Beachten Sie, dass Sie diese Technik auch für andere Dinge als Bilder verwenden können.
Wie Sie sehen, ist die Verwendung responseParserMap eine hervorragende Möglichkeit, die Notwendigkeit zu beseitigen, responseType für verschiedene Thwack-Aufrufe festzulegen.
validateStatus Diese optionale Funktion wird verwendet, um zu bestimmen, welche Statuscodes Thwack verwendet, um ein Versprechen oder einen Wurf zurückzugeben. Es wird der status übergeben. Wenn diese Funktion „truey“ zurückgibt, wird das Versprechen aufgelöst, andernfalls wird das Versprechen abgelehnt.
Die Standardfunktion löst für jeden Status aus, der nicht im 2xx-Bereich liegt (z. B. 200–299).
paramsSerializer Dies ist eine optionale Funktion, die Thwack aufruft, um die params zu serialisieren. Wenn beispielsweise ein Objekt {a:1, b:2, foo: 'bar'} gegeben ist, sollte es in die Zeichenfolge a=1&b=2&foo=bar serialisiert werden.
Für die meisten Leute sollte der Standard-Serializer problemlos funktionieren. Dies dient hauptsächlich der Edge-Case- und Axios-Kompatibilität.
Beachten Sie, dass der Standard-Serializer die Parameter alphabetisch sortiert. Dies ist eine bewährte Vorgehensweise. Wenn dies in Ihrer Situation jedoch nicht funktioniert, können Sie Ihren eigenen Serialisierer erstellen.
resolver Dies ist eine Funktion, die Sie bereitstellen können, um das Standardverhalten des Resolvers zu überschreiben. resolver benötigt zwei Argumente: eine url und eine baseURL , die undefiniert sein muss, oder eine absolute URL. Es sollte für Sie kaum einen Grund geben, den Resolver auszutauschen, aber dies ist Ihre Notausstiegsmöglichkeit für den Fall, dass es nötig sein sollte.
ThwackResponsestatus Eine number die die dreistelligen HTTP-Statuscodes darstellt, die empfangen wurden.
ok Ein auf „true“ gesetzter boolean ist der status im 2xx-Bereich (also ein Erfolg). Dieser Wert wird von validateStatus nicht beeinflusst.
statusText Eine string die den Text des status darstellt. Sie sollten den status (oder ok ) in jeder Programmlogik verwenden.
headersEin Schlüssel/Wert-Objekt mit den zurückgegebenen HTTP-Headern. Alle doppelten Header werden zu einem einzigen Header verkettet, der durch Semikolons getrennt ist.
data Hier wird der zurückgegebene Text der HTTP-Antwort gespeichert, nachdem diese gestreamt und konvertiert wurde. Die einzige Ausnahme besteht, wenn Sie den responseType von stream verwendet haben. In diesem Fall werden data direkt auf das body -Element festgelegt.
Wenn ein ThwackResponseError ausgelöst wurde, sind data die Klartextdarstellung des Antworttexts.
options Das vollständige options , das die Anfrage verarbeitet hat. Diese options werden vollständig mit allen übergeordneten Instanzen sowie mit defaults zusammengeführt.
response Das vollständige HTTP- Response , wie es von fetch zurückgegeben wird, oder die response von einem synthetischen Ereignisrückruf.
ThwackResponseError Wenn die Antwort auf eine Thwack-Anfrage zu einem Nicht-2xx status führt (z. B. 404 Not Found), wird ein ThwackResponseError ausgelöst.
Hinweis: Es ist möglich, dass andere Arten von Fehlern ausgelöst werden (z. B. ein fehlerhafter Event-Listener-Rückruf). Daher empfiehlt es sich, den abgefangenen Fehler abzufragen, um festzustellen, ob er vom Typ
ThwackResponseErrorist.
try {
const { data } = await thwack . get ( someUrl )
} catch ( ex ) {
if ( ex instanceof thwack . ThwackResponseError )
const { status , message } = ex ;
console . log ( `Thwack status ${ status } : ${ message } ` ) ;
} else {
throw ex ; // If not, rethrow the error
}
} Ein ThwackResponseError verfügt über alle Eigenschaften eines normalen JavaScript- Error sowie eine thwackResponse -Eigenschaft mit denselben Eigenschaften wie ein Erfolgsstatus.
Instanzen In Thwack erstellte Instanzen basieren auf der übergeordneten Instanz. Die Standardoptionen eines übergeordneten Elements werden an die Instanzen weitergegeben. Dies kann nützlich sein, um Optionen im übergeordneten Element einzurichten, die sich auf die untergeordneten Elemente auswirken können, z. B. baseURL ,
Umgekehrt können Eltern addEventListener verwenden, um ihre Kinder zu überwachen (ein Beispiel hierfür finden Sie weiter unten im Abschnitt So protokollieren Sie jeden API-Aufruf).
Thwack-EreignisseIn Kombination mit Instanzen macht das Thwack-Ereignissystem Thwack äußerst leistungsfähig. Damit können Sie auf verschiedene Ereignisse hören.
Hier ist der Ereignisablauf für alle Ereignisse. Wie Sie sehen, ist es möglich, dass Ihr Code in eine Endlosschleife gerät, wenn Ihr Rückruf blind eine request() ausgibt, ohne zu prüfen, ob dies bereits geschehen ist. Seien Sie also vorsichtig.
request Immer wenn ein Teil der Anwendung eine der Datenabrufmethoden aufruft, wird ein request ausgelöst. Alle Listener erhalten ein ThwackRequestEvent -Objekt, das die options des Aufrufs in event.options enthält. Diese Ereignis-Listener können etwas so Einfaches tun wie (das Ereignis protokollieren) oder so kompliziert wie das Verhindern der Anfrage und das Zurückgeben einer Antwort mit (Scheindaten).
// callback will be called for every request made in Thwack
thwack . addEventListener ( 'request' , callback ) ;Beachten Sie, dass Rückrufe
asyncsein können, sodass Sie Thwack verzögern können, sodass Sie beispielsweise Daten über eine andere URL abrufen können, bevor Sie fortfahren.
response Das Ereignis wird ausgelöst, nachdem die HTTP-Header empfangen wurden, aber bevor der Text gestreamt und analysiert wird. Listener erhalten ein ThwackResponseEvent Objekt mit einem thwackResponse -Schlüssel, der auf die Antwort festgelegt ist.
data Das Ereignis wird ausgelöst, nachdem der Text gestreamt und analysiert wurde. Es wird nur ausgelöst, wenn der Abruf einen 2xx-Statuscode zurückgegeben hat. Listener erhalten ein ThwackDataEvent Objekt mit einem thwackResponse -Schlüssel, der auf die Antwort festgelegt ist.
error Das Ereignis wird ausgelöst, nachdem der Text gestreamt und analysiert wurde. Es wird ausgelöst, wenn der Abruf einen anderen Statuscode als 2xx zurückgegeben hat. Listener erhalten ein ThwackErrorEvent Objekt mit einem thwackResponse -Schlüssel, der auf die Antwort gesetzt ist.
NodeJS Thwack funktioniert auf NodeJS, erfordert jedoch eine Polyfüllung für window.fetch . Glücklicherweise gibt es eine wunderbare Polyfüllung namens node-fetch , die Sie verwenden können.
Wenn Sie NodeJS Version 10 verwenden, benötigen Sie außerdem eine Polyfüllung für Array#flat und Object#fromEntries . NodeJS Version 11+ verfügt über diese Methoden und erfordert kein Polyfill.
Sie können diese Polyfills entweder selbst bereitstellen oder stattdessen einen der folgenden praktischen Importe verwenden. Wenn Sie NodeJS 11+ ausführen, verwenden Sie:
import thwack from 'thwack/node' ; // NodeJS version 12+Wenn Sie NodeJS 10 verwenden, verwenden Sie:
import thwack from 'thwack/node10' ; // NodeJS version 10 Wenn Sie diese Polyfills selbst bereitstellen möchten, müssen Sie zur Verwendung von Thwack aus thwack/core importieren und fetch als Standard für fetch festlegen.
import thwack from 'thwack/code' ;
thwack . defaults . fetch = global . fetch ; Dies sollte in Ihrem App-Startcode erfolgen, normalerweise index.js .
Hinweis: Der
responseTypevonblobwird auf NodeJS nicht unterstützt.
Native reagierenThwack ist mit React Native kompatibel und benötigt keine zusätzlichen Polyfills. Unten finden Sie eine Beispiel-App, die in React Native geschrieben wurde.
Hinweis: React Native unterstützt aufgrund von #27741 keinen
stream
Wie Sie können thwack.all() und thwack.spread() verwenden, um gleichzeitige Anfragen zu stellen. Die Daten werden Ihrem Rückruf dann als ein Array präsentiert.
Hier zeigen wir Informationen für zwei GitHub-Benutzer an.
function displayGitHubUsers ( ) {
return thwack
. all ( [
thwack . get ( 'https://api.github.com/users/donavon' ) ,
thwack . get ( 'https://api.github.com/users/revelcw' ) ,
] )
. then (
thwack . spread ( ( ... results ) => {
const output = results
. map (
( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos`
)
. join ( 'n' ) ;
console . log ( output ) ;
} )
) ;
} Beachten Sie, dass es sich lediglich um Hilfsfunktionen handelt. Wenn Sie async / await verwenden, können Sie dies ohne die Thwack-Helfer mit Promise.all schreiben.
async function displayGitHubUsers ( ) {
const results = await Promise . all ( [
thwack . get ( 'https://api.github.com/users/donavon' ) ,
thwack . get ( 'https://api.github.com/users/revelcw' ) ,
] ) ;
const output = results
. map ( ( { data } ) => ` ${ data . login } has ${ data . public_repos } public repos` )
. join ( 'n' ) ;
console . log ( output ) ;
}Sie können dies live in der CodeSandbox sehen.
(Demo inspiriert von diesem Blob-Beitrag auf axios/fetch)
Verwenden Sie einen AbortController , um Anfragen abzubrechen, indem Sie sein signal in den thwack -Optionen übergeben.
Im Browser können Sie den integrierten AbortController verwenden.
import thwack from 'thwack' ;
const controller = new AbortController ( ) ;
const { signal } = controller ;
thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;
controller . abort ( ) ;In NodeJS können Sie so etwas wie einen Abort-Controller verwenden.
import thwack from 'thwack' ;
import AbortController from 'abort-controller' ;
const controller = new AbortController ( ) ;
const { signal } = controller ;
thwack ( url , { signal } ) . then ( handleResponse ) . catch ( handleError ) ;
controller . abort ( ) ; Wenn Sie beim Abbrechen einer Anfrage eine Aktion ausführen möchten, können Sie sich auch das abort bei signal anhören:
signal . addEventListener ( 'abort' , handleAbort ) ; Fügen Sie einen addEventListener('request', callback) hinzu und protokollieren Sie jede Anfrage in der Konsole.
import thwack from 'thwack' ;
thwack . addEventListener ( 'request' , ( event ) => {
console . log ( 'hitting URL' , thwack . getUri ( event . options ) ) ;
} ) ;Wenn Sie React verwenden, finden Sie hier einen Hook, den Sie in Ihrer App „verwenden“ können und der dasselbe bewirkt.
import { useEffect } from 'react' ;
import thwack from 'thwack' ;
const logUrl = ( event ) => {
const { options } = event ;
const fullyQualifiedUrl = thwack . getUri ( options ) ;
console . log ( `hitting ${ fullyQualifiedUrl } ` ) ;
} ;
const useThwackLogger = ( ) => {
useEffect ( ( ) => {
thwack . addEventListener ( 'request' , logUrl ) ;
return ( ) => thwack . removeEventListener ( 'request' , logUrl ) ;
} , [ ] ) ;
} ;
export default useThwackLogger ;Hier ist ein Codeausschnitt zur Verwendung.
const App = ( ) = {
useThwackLogger ( )
return (
< div >
...
</ div >
)
} Nehmen wir an, Sie haben eine App, die eine Anfrage nach einigen Benutzerdaten gestellt hat. Wenn die App auf eine bestimmte URL (z. B. users ) zugreift und nach einer bestimmten Benutzer-ID (z. B. „ 123 “) fragt, möchten Sie verhindern, dass die Anforderung den Server erreicht, und stattdessen die Ergebnisse verfälschen.
Der status in ThwackResponse ist standardmäßig auf 200 eingestellt. Wenn Sie also keine nicht OK-Antwort vortäuschen möchten, müssen Sie nur data zurückgeben.
thwack . addEventListener ( 'request' , async ( event ) => {
const { options } = event ;
if ( options . url === 'users' && options . params . id === 123 ) {
// tells Thwack to use the returned value instead of handling the event itself
event . preventDefault ( ) ;
// stop other listeners (if any) from further processing
event . stopPropagation ( ) ;
// because we called `preventDefault` above, the caller's request
// will be resolved to this `ThwackResponse` (defaults to status of 200 and ok)
return new thwack . ThwackResponse (
{
data : {
name : 'Fake Username' ,
email : '[email protected]' ,
} ,
} ,
options
) ;
}
} ) ; Oft ist es wünschenswert, ein DTO (Data Transfer Object) in etwas umzuwandeln, das vom Client einfacher genutzt werden kann. In diesem Beispiel unten konvertieren wir ein komplexes DTO in firstName , lastName , avatar und email . Andere Datenelemente, die vom API-Aufruf zurückgegeben werden, aber von den Anwendungen nicht benötigt werden, werden ignoriert.
In dieser Beispiel-App können Sie ein Beispiel für die DTO-Konvertierung, Protokollierung und Rückgabe gefälschter Daten sehen.
Sie können den Quellcode auf CodeSandbox ansehen.
In diesem Beispiel haben wir einen React Hook, der ein Bild als Blob-URL lädt. Die URL-zu-Blob-URL-Zuordnung wird im Sitzungsspeicher zwischengespeichert. Nach dem Laden wird das Bild bei jeder Aktualisierung der Seite sofort von der Blob-URL geladen.
const useBlobUrl = ( imageUrl ) => {
const [ objectURL , setObjectURL ] = useState ( '' ) ;
useEffect ( ( ) => {
let url = sessionStorage . getItem ( imageUrl ) ;
async function fetchData ( ) {
if ( ! url ) {
const { data } = await thwack . get ( imageUrl , {
responseType : 'blob' ,
} ) ;
url = URL . createObjectURL ( data ) ;
sessionStorage . setItem ( imageUrl , url ) ;
}
setObjectURL ( url ) ;
}
fetchData ( ) ;
} , [ imageUrl ] ) ;
return objectURL ;
} ;Sehen Sie sich dieses Beispiel auf CodeSandbox an
Im Moment haben Sie einen REST-Endpunkt unter https://api.example.com . Angenommen, Sie haben einen neuen REST-Endpunkt unter einer anderen URL veröffentlicht und möchten langsam 2 % des Netzwerkverkehrs an diese neuen Server weiterleiten.
Hinweis: Normalerweise wird dies von Ihrem Load Balancer im Backend erledigt. Es wird hier nur zu Demonstrationszwecken gezeigt.
Wir könnten dies erreichen, indem wir options.url im Anforderungsereignis-Listener wie folgt ersetzen.
thwack . addEventListener ( 'request' , ( event ) => {
if ( Math . random ( ) >= 0.02 ) {
return ;
}
// the code will be executed for approximately 2% of the requests
const { options } = event ;
const oldUrl = thwack . getUri ( options ) ;
const url = new URL ( '' , oldUrl ) ;
url . origin = 'https://api2.example.com' ; // point the origin at the new servers
const newUrl = url . href ; // Get the fully qualified URL
event . options = { ... event . options , url : newUrl } ; // replace `options`]
} ) ; Zusammen mit use-thwack könnte das Schreiben einer Datenabruf-App für React Native nicht einfacher sein.
Sehen Sie sich die gesamte App an, die auf Expo läuft.
CreditsThwack ist stark von den Axios inspiriert. Danke Matt!
LizenzLizenziert unter MIT
MitwirkendeDer Dank geht an diese wunderbaren Menschen (Emoji-Taste):
Donavon West ? | Jeremy Tice | Yuraima Estevez | Jeremy Bargar | Brooke Scarlett Yalof | Karl Horky | Koji |
Tom Byrer | Ian Sutherland | Blake Yoder | Ryan Hinchey | Miro Dojkic | santicevic |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
