Introduction 中文版
inspired by axios, build with typescript, encapsulate origin fetch
fxios = fetch + axios
<script src="//unpkg.com/fxios"></script>
<script type="application/javascript">
fxios.get(...)
fxios.post(...)
const f1 = fxios.create({
baseURL: '/api',
})
</script>
npm install fxios
// or
yarn add fxios
import fxios from 'fxios'
type ResType = {success: boolean}
async function createUser() {
const result = await fxios.post<ResType>('/api/user', { body: { name: 'abc' } })
return result
}
more to see: example.ts
import fxios, { Fxios } from 'fxios'
const f1 = new Fxios(config)
// or
const f2 = Fxios.create(config)
// or
const f3 = fxios.create(config)
the config for create new instance is FxiosConfig
,data structure as below:
{
// like axios baseURL,default blank.
baseURL: '',
// except baseURL, all other property inherit from RequestInit
// ref: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
body?: BodyInit | null;
cache?: RequestCache;
credentials?: RequestCredentials;
headers?: HeadersInit;
integrity?: string;
keepalive?: boolean;
method?: string;
mode?: RequestMode;
redirect?: RequestRedirect;
referrer?: string;
referrerPolicy?: ReferrerPolicy;
signal?: AbortSignal | null;
window?: any;
}
the request option will overwrite the instance config property as below
fxios.get({
url: '/api/users',
mode: 'cors',
})
fxios#request(option: IFxiosRequestOption | string)
the option could be a string as below:
fxios.get('/api/users')
all other case,should use object option IFxiosRequestOption
,
as below:
fxios.post({
url: '/users',
body: {
name: 'abc',
},
headers: {
...,
},
})
IFxiosRequestOption data structure
export interface IFxiosRequestOption extends RequestInit {
query?: {
[index: string]: string | string[] | number | number[] | boolean | boolean[] | undefined
}
body?: any
path?: {
[index: string]: string | number | boolean | undefined
}
formData?: any
baseURL?: string
url: string
}
these instance methods are all short cut of fxios#request
.
fxios#get
fxios#post
fxios#put
fxios#patch
fxios#delete
fxios#head
fxios#options
each method has already bind to the instance,need not to call like bind(fxios)
const get = fxios.get
...
get(...) // same as fxios.get(...)
path
is the parameter in the url path:
the below request will call this url: '/api/user/123/edit'。
fxios.get({
url: '/api/user/:id/edit',
path: {
id: '123'
}
})
when body is simple object, it will be JSON.stringify,and auto add {'Content-Type': 'application/json'}
to the request header,
other case, body will not be auto transformed.
as below:
fxios.post('/api/user', {
body: 'abc', // or { name: 'abc' }
})
each instance has interceptor
property,like transformRequest
and transformResponse
in axios.
interceptor has three property,request
、response
、catch
。
fxios.interceptor.request = function(option: IFxiosRequestOption): IFxiosRequestOption {...}
fxios.interceptor.response = function(res: Response, req?: IFxiosRequestOption ): any {...}
fxios.interceptor.catch = function(error: Error, req?: IFxiosRequestOption): any {...}