Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/doxiaodong/intercept-fetch
https://github.com/doxiaodong/intercept-fetch
api fetch intercept-fetch interceptor jsonp promise
Last synced: about 2 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/doxiaodong/intercept-fetch
- Owner: doxiaodong
- Created: 2017-02-23T11:27:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T13:55:20.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T19:44:43.417Z (7 months ago)
- Topics: api, fetch, intercept-fetch, interceptor, jsonp, promise
- Language: TypeScript
- Size: 136 KB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://travis-ci.org/doxiaodong/intercept-fetch)
[](https://www.npmjs.com/package/intercept-fetch)
[]()
[]()
# Add interceptors in fetch api
# Usage
* install `npm i intercept-fetch --save`
* add interceptors
```typescript
import {
FetchClient,
Interceptor
} from 'intercept-fetch'
const fetchClient = new FetchClient()
const interceptor = new Interceptor({
cors: {
id: 0,
request(url, config) {
url += '&a=1'
config.mode = 'cors'
return Promise.resolve([url, config])
},
success(data) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('res a', data)
data.a = 'intercepta'
resolve(data)
}, 1000)
})
}
},
credentials: {
id: 1,
request(url, config) {
url += '&b=2'
config.credentials = 'include'
return Promise.resolve([url, config])
},
requestError(fetchError) {
return Promise.reject('requestError reject')
// or return Promise.resolve('requestError resolve')
},
response(response) {
return Promise.resolve(error)
},
success(data) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('res b', data)
data.b = 'interceptb'
resolve(data)
}, 1000)
})
},
error(res) {
return Promise.resolve(res)
},
timeout(url) {
return Promise.resolve('timeout')
// default timeout is 10s
// or return Promise.reject('timeout)
}
}
})
fetchClient.setInterceptors(interceptor)
fetchClient.get('https://google.com')
```
> Warning: at end of each interceptor, you can reject(any) to catch, if you want to complete the fetch flow, please resolve as ref example!!!
# class FetchClient
* getInterceptors(): IInterceptors
* setInterceptors(interceptors: Interceptor): void
* clearInterceptors(): void
* request(url: string | Request, config?: RequestInit): Promise
* get(url: string, param?: { [key: string]: any }, config?: RequestInit): Promise
```typescript
fetchClient.get('http://google.com', { date: Date.now() })
```
* post(url: string, config?: RequestInit): Promise
* put(url: string, config?: RequestInit): Promise
* delete(url: string, config?: RequestInit): Promise
* options(url: string, config?: RequestInit): Promise
* head(url: string, config?: RequestInit): Promise
* patch(url: string, config?: RequestInit): Promise
# class Interceptor
* interface
```typescript
export interface IInterceptor {
id?: number
request?: (url: string | Request, config: RequestInit) => Promise<[string | Request, RequestInit]>
requestError?: (error: any) => Promise
response?: (res: Response) => Promise
success?: (data: any) => Promise
error?: (res: Response) => Promise
timeout?: (url: string) => Promise
jsonpRequest?: (url: string, config?: fetchJsonp.Options) => Promise<[string, fetchJsonp.Options]>
jsonpResponse?: (res: fetchJsonp.Response) => Promise
jsonpSuccess?: (data: any) => Promise
jsonpError?: (error: any) => Promise
}
export interface IInterceptors {
[key: string]: IInterceptor
}
```
* set(key: string, value: IInterceptor): void
* get(key: string): IInterceptor
* delete(key: string): void
* has(key: string): boolean
* forEach(callback: (value?: IInterceptor, key?: string, target?: Interceptor) => void, thisArg?): void
* merge(interceptors: Interceptor): Interceptor // merge this Interceptor to param Interceptor
```typescript
const I = new Interceptor({
a: {
}
})
I.merge(new Interceptor({
a: {
request(url, config){
return Promise.resolve([url, config])
}
},
b: {}
}))
// I
// a: {
// },
// b: {}
```
# Differences with https://github.com/werk85/fetch-intercept
* All interceptors(request, response, success, error) are Promise
* Provide a interceptor class
* Can add more than one interceptors ordered by id, and the smaller id is call first
* Support typescript