v0.4.0: Response type blob arrarybuffer and add multiple response int…

…erceptors chain behaviour same as axios's (#16) * feat: when `responseType: 'blob' | 'arraybuffer'`, return blob or arraybuffer to data * fix tests * Fix: Compatible axios response interceptors chain behaviour * remove comments * feat: response interceptors chain * v0.4.0 * fix tests
suhaotian · Apr 24, 2024 · 57205fe · 57205fe
1 parent a4edb2f
commit 57205fe
Show file tree

Hide file tree

Showing 12 changed files with 630 additions and 195 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG 📝
 
+## v0.4.0 2024/04/24
+
+**Breaking Change**
+
+This version is about Axios compatible issue in some cases. Fixing https://github.com/suhaotian/xior/issues/12 and https://github.com/suhaotian/xior/issues/15.
+
+- Feat(core): when `responseType: 'blob' | 'arrarybuffer'` then the `resposne.data` is `Blob` and `ArrayBuffer`, no need `response.blob()` or `response.arraybuffer()` anymore.
+- Fix(interceptors): make sure the multiple response interceptors chain behaviour same as axios's interceptors.
+
 ## v0.3.13 2024/04/21
 
 - Feat(plugin): add custom paramaters of LRU in plugins: cache, error-cache, throttle

diff --git a/Mock-plugin.md b/Mock-plugin.md
@@ -61,8 +61,8 @@ instance.get('/api/hello').then((res) => {
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/mock.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/mock.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -79,8 +79,8 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
-<script src="https://unpkg.com/xior@0.3.13/plugins/mock.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/mock.umd.js"></script>
 
 <!-- Usage -->
 <script>

diff --git a/README.md b/README.md
@@ -121,7 +121,7 @@ yarn add xior
 Use jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -136,7 +136,7 @@ Use jsDelivr CDN:
 Use unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -316,6 +316,7 @@ http.interceptors.response.use(
     if (error?.response?.status === 401) {
       localStorage.removeItem('REQUEST_TOKEN');
     }
+    return Promise.reject(error);
   }
 );
 ```
@@ -659,9 +660,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/error-retry.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/error-retry.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -674,10 +675,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/error-retry.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/error-retry.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -770,9 +771,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/throttle.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/throttle.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -785,10 +786,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/throttle.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/throttle.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -843,9 +844,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/dedupe.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/dedupe.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -858,10 +859,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/dedupe.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/dedupe.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -923,9 +924,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/error-cache.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/error-cache.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -938,10 +939,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/error-cache.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/error-cache.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -1086,9 +1087,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/progress.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/progress.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -1101,10 +1102,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/progress.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/progress.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -1211,9 +1212,9 @@ Use CDN:
 Using jsDelivr CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/dist/xior.umd.js"></script>
 <!-- Load plugin -->
-<script src="https://cdn.jsdelivr.net/npm/xior@0.3.13/plugins/mock.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xior@0.4.0/plugins/mock.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -1226,10 +1227,10 @@ Using jsDelivr CDN:
 Using unpkg CDN:
 
 ```html
-<script src="https://unpkg.com/xior@0.3.13/dist/xior.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/dist/xior.umd.js"></script>
 
 <!-- Load plugin -->
-<script src="https://unpkg.com/xior@0.3.13/plugins/mock.umd.js"></script>
+<script src="https://unpkg.com/xior@0.4.0/plugins/mock.umd.js"></script>
 
 <!-- Usage -->
 <script>
@@ -1336,16 +1337,44 @@ Even if the environment doesn't support `fetch`, you can use a `fetch` polyfill
 
 ### 3. How do I handle responses with types like `'stream'`, `'document'`, `'arraybuffer'`, or `'blob'`?
 
-> Currently in `xior`, when `responseType` is set to `'stream', 'document', 'arraybuffer', 'blob', or 'original'`, Xior will return the original fetch response.
+When `{responseType: 'blob'| 'arraybuffer'}`:
+
+```ts
+xior.get('https://exmaple.com/some/api', { responseType: 'blob' }).then((response) => {
+  console.log(response.data); // response.data is a Blob
+});
+
+// Same with
+fetch('https://exmaple.com/some/api')
+  .then((response) => response.blob())
+  .then((data) => {
+    console.log(data); // is a Blob
+  });
+```
+
+```ts
+xior.get('https://exmaple.com/some/api', { responseType: 'arraybuffer' }).then((response) => {
+  console.log(response.data); // response.data is a ArrayBuffer
+});
+
+// Same with
+fetch('https://exmaple.com/some/api')
+  .then((response) => response.arraybuffer())
+  .then((data) => {
+    console.log(data); // is a ArrayBuffer
+  });
+```
+
+**But when `responseType` set to `'stream', 'document' or 'original'`, Xior will return the original fetch response:**
 
 ```ts
 fetch('https://exmaple.com/some/api').then((response) => {
   console.log(response);
 });
 
 // same with
-xior.get('https://exmaple.com/some/api', { responseType: 'blob' }).then((res) => {
-  console.log(res.response); // res.data will be undefined
+xior.get('https://exmaple.com/some/api', { responseType: 'stream' }).then((res) => {
+  console.log(res.response); // But res.data will be undefined
 });
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xior",
-  "version": "0.3.13",
+  "version": "0.4.0",
   "description": "A lite request lib based on fetch with plugin support and similar API to axios.",
   "repository": "suhaotian/xior",
   "bugs": "https://github.com/suhaotian/xior/issues",

diff --git a/src/interceptors.ts b/src/interceptors.ts
@@ -58,10 +58,10 @@ export default async function defaultRequestInterceptor(req: XiorInterceptorRequ
 
   return {
     ...req,
-    data,
     _data,
-    url,
     _url,
+    data,
+    url,
     method,
     headers,
     isGet,

diff --git a/src/types.ts b/src/types.ts
@@ -46,3 +46,20 @@ export type XiorPlugin = (
   adapter: (request: XiorRequestConfig) => Promise<XiorResponse>,
   instance?: XiorInstance
 ) => (request: XiorRequestConfig) => Promise<XiorResponse<any>>;
+
+export interface XiorInterceptorOptions {
+  /** @deprecated useless here */
+  synchronous?: boolean;
+  /** @deprecated useless here */
+  runWhen?: (config: XiorInterceptorRequestConfig) => boolean;
+}
+
+export interface XiorResponseInterceptorConfig<T = any> {
+  data: T;
+  config: XiorInterceptorRequestConfig<T>;
+  request: XiorInterceptorRequestConfig<T>;
+  response: Response;
+  status: number;
+  statusText: string;
+  headers: Headers;
+}
-Original file line number
+Diff line change
@@ Expand Up @@
       return {
         ...req,
-        data,
         _data,
-        url,
         _url,
+        data,
+        url,
         method,
         headers,
         isGet,
@@ Expand Down @@