zy-fetch
fetch api base http client for the brower & node,support Interceptors
Features
- Use XMLHttpRequests from the browser when not support fetch,see Fetch-polyfill
- Use Fetch from the browser when support fetch
- Use node-fetch from the node.js
- Supports the Promise API
- Supports automatic transformResponse,transformRequest
- Supports automatic build SearchParams
- Support Timeout
- Support Retry Fetch
- Support Interceptors
- Support Create Instance
Browser Support
- Chrome
- Firefox
- Safari 6.1+
- Internet Explorer 9+
Installing
Using npm:
$ npm install zy-fetch -s
and
//global use // it will do that -> self.fetch = zyFetch or global.fetch = zyFetch //module use
Using cdn:
api
Request method aliases
fetch(init,option)
fetch.send(init,option)
fetch.get(init[, option])
fetch.delete(init[, option])
fetch.head(init[, option])
fetch.options(init[, option])
fetch.post(init[, body[, option]])
fetch.put(init[, body[, option]])
fetch.patch(init[, body[, option]])
Concurrency
fetch.all(fetchArray)
fetch.allByOrder(fetchArray)
fetch.spread(callback)
Creating an instance
You can create a new instance of zyFetch with a custom config.
fetch.create([config])
nativeFetch
fetch.nativeFetch (get window.fetch or node-fetch)
request config
fetch(init,option),in addition to fetch's own option, zy-fetch include other option,like this
responseType: 'json' //json,blob,formData,arrayBuffer,text transformResponse: false //default false,true represents automatic transform response timeout: 1000 //to set request timeout time baseUrl: '' //base url retry: Number //retry count retryTimeout: 1000 //retry timeout
Global Config
defaults
const config = headers: {} responseType: 'json' //json,blob,formData,arrayBuffer,text method: 'get' transformResponse: false //default false,true represents automatic transform response transformRequest: false //default false,true represents automatic transform request credentials: 'same-origin' //omit,include,same-origin timeout: 0 baseUrl: '' // base url,
Set Config
you also can set golbal config like this
fetchconfigheaders'Content-Type' = 'application/json' fetchconfigresponseType = 'blob' fetchconfigtransformResponse = true fetchconfigtransformRequest = true fetchconfigtimeout = 3000 fetchconfigbaseUrl = 'https://www.zzz.com'
Example
NORMAL
This is the writing of fetch API, see Fetch
MORE
This is the writing of zy-fetch API
GET
// to get userinfofetch ; // orfetch ;
POST
// to add userfetch ;
Concurrent Requests
const userFetch = const teacherFetch = fetchalluserFetchteacherFetch // use fetch.spread to simplify fetchalluserFetchteacherFetch
Execute fetch in sequence
const fetch1 = fetch const fetch2 = fetch fetch
transformRequest
you can set transformRequest to auto transformRequest, like this
fetch ; //equalfetch ;
transformResponse
you can set responseType and transformResponse to auto transformResponse, like this
fetch ;
Timeout
Retry Fetch
Interceptors
You can intercept requests or responses,add a request interceptor before request send or add a response interceptor after response finished.
response interceptor include transform interceptor and noTransform interceptor
zy-fetch
inside is a mode of responsibility chain
1.if not automatic transform response
This order is ->request interceptors -> fetch -> checkstatus -> noTransform interceptor
2.if automatic transform response
This order is ->request interceptors -> fetch -> checkstatus -> noTransform interceptor -> transformResponse -> transform interceptor
example
// Add a x-csrf-token headerfetchinterceptorsrequest // Add a common response interceptor, to handle not loginfetchinterceptorsresponsenoTransform fetchinterceptorsresponsetransform
Create Instance
//fetch.create(config)const instance = fetchinstance ;
checkStatus
A fetch() promise will reject with a TypeError when a network error is encountered or CORS is misconfigured on the server side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example. An accurate check for a successful fetch() would include checking that the promise resolved, then checking that the Response.ok property has a value of true,
so we Built in checkStatus
function
{ if responsestatus >= 200 && responsestatus < 300 return response else let error = responsestatusText errorresponse = response throw error }
Aborting Fetch
browsers & node that do not support fetch will also not support AbortController or AbortSignal , see polyfill,
var controller = ; var signal = controllersignal;