@chunpu/http
Promise Based request / fetch / http For Real Project, Support multiple platforms
Installation
npm i @chunpu/http
Features
- Largely axios-compatible API
- Support More platforms like 微信小程序, 快应用
- Support the Promise API
- Intercept request and response
- More Automatic Transform request and response data
- Batch Cancel requests
- More adapters inside: axios, jQuery, XMLHttpRequest
Inspired by axios
Send Http Request just like axios in 微信小程序
, 快应用
, jQuery
, or XMLHttpRequest
by default
Let's have the Same Experience with Request Data😜
Usage
http http
Create Custom Http Instance
const anotherHttp = http
Api
Simple Request
.get(url, config)
.delete(url, config)
.head(url, config)
.options(url, config)
Careful! There is no such api like
.get(url, params)
Request with Data
.post(url, data, config)
.put(url, data, config)
.patch(url, data, config)
Basic Request
.request(config)
.request(url, config)
All config param is not required
Request Object
data
data for request bodyheaders
request headersmethod
request http method, defaultGET
params
the url querystring objecttimeout
request timeout, 支持快应用和微信小程序withCredentials
whether use cors, defaultfalse
Automatic Transform Request Data
Respect the request headers['content-type']
setting, data will be transform by the content type, Plain Object data will be auto stringify
application/json
willJSON.stringify
the data objectapplication/x-www-form-urlencoded
willqs.stringify
the data object
data also support FormData, Blob, String
Response Object
data
response dataheaders
name: value
headers, all header names are lower casedstatus
status code, numberconfig
the request object
Not Respect the response headers['content-type']
value, will always try to JSON.parse
the data, because most server not respect the response mime
Platform Support
微信小程序
http http
支持单个请求超时设置
请通过 npm 安装, 参见 npm 支持
快应用
http
支持单个请求超时设置
记得在 manifest.json
文件中加入权限
"features":
axios (node.js)
const axios = http
Please use http with axios mode
in Node.js platform
jQuery / Zepto
http
Config Defaults / Init
// support axios stylehttpdefaultsbaseURL = 'https://my.domain'httpdefaultstimeout = 1000 * 20 // can also use http.inithttp
Config default Post request
Content-Type
default is JSON
Always stringify Data to JSON
httpdefaultsheaderspost'Content-Type' = 'application/json'
Always stringify Data to querystring
, which can really work not like axios...
httpdefaultsheaderspost'Content-Type' = 'application/x-www-form-urlencoded'
Interceptors
http httpinterceptorsrequest httpinterceptorsresponse
Cancel Requests
compatible with axios Cancellation
For easy understanding, cancelToken
equals deferred
equals source.token
const source = httpCancelTokensource http http
Usage With Real Project
Assume the my.domain
service always return data like this
code: 0 message: 'ok' data: key: 'value'
http httpinterceptorsresponse http
Usage with Vue.js
Vueprototype$http = http // in vue component file { this$http}
Handling Errors
All Platform support timeout error for one request
http
Other Api
You can stringify query string by
httpqs// => 'query=string'