http
http copied to clipboard
:bento: Promise Based request / fetch / http For Real Project, Support Multiple Platforms
@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
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain'
})
http.get('/data').then(({data}) => {
console.log(data)
})
Create Custom Http Instance
const anotherHttp = http.create({
baseURL: 'https://my.domain'
})
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 body -
headers
request headers -
method
request http method, defaultGET
-
params
the url querystring object -
timeout
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 object -
application/x-www-form-urlencoded
willqs.stringify
the data object
data also support FormData, Blob, String
Response Object
-
data
response data -
headers
name: value
headers, all header names are lower cased -
status
status code, number -
config
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
微信小程序
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain',
wx: wx
})
http.get('/data').then(({data}) => {
console.log(data)
})
支持单个请求超时设置
请通过 npm 安装, 参见 npm 支持
快应用
import http from '@chunpu/http'
import fetch from '@system.fetch'
http.init({
baseURL: 'https://my.domain',
quickapp: fetch
})
支持单个请求超时设置
记得在 manifest.json
文件中加入权限
"features": [
{ "name": "system.network" },
{ "name": "system.fetch" }
]
axios (node.js)
const axios = require('axios')
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain',
axios: axios
})
Please use http with axios mode
in Node.js platform
jQuery / Zepto
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain',
jQuery: $
})
Config Defaults / Init
// support axios style
http.defaults.baseURL = 'https://my.domain'
http.defaults.timeout = 1000 * 20
// can also use http.init
http.init({
baseURL: 'https://my.domain',
timeout: 1000 * 20
})
Config default Post request
Content-Type
default is JSON
Always stringify Data to JSON
http.defaults.headers.post['Content-Type'] = 'application/json'
Always stringify Data to querystring
, which can really work not like axios...
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
Interceptors
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain'
})
http.interceptors.request.use(config => {
// Do something before request is sent
return config
})
http.interceptors.response.use(response => {
// Do something with response
return response
})
Cancel Requests
compatible with axios Cancellation
For easy understanding, cancelToken
equals deferred
equals source.token
const source = http.CancelToken.source()
http.get('/very/slow/api/1', {
cancelToken: source.token
}).catch(err => {
console.error(err) // error: cancel request
})
http.get('/very/slow/api/2', {
cancelToken: source.token
}).catch(err => {
console.error(err) // error: cancel request
})
setTimeout(() => {
source.cancel('cancel request') // will cancel all requests with this source
}, 1000)
Usage With Real Project
Assume the my.domain
service always return data like this
{
code: 0,
message: 'ok',
data: {
key: 'value'
}
}
import http from '@chunpu/http'
http.init({
baseURL: 'https://my.domain'
})
http.interceptors.response.use(response => {
if (typeof response.data === 'object') {
// always spread the response data for directly usage
Object.assign(response, response.data)
}
return response
})
http.post('/user/1024', {
name: 'Tony'
}).then(({data, code, message}) => {
if (code === 0) {
return data
} else {
console.error('error', message)
}
})
Usage with Vue.js
import http from '@chunpu/http'
Vue.prototype.$http = http
// in vue component file
submit () {
this.$http.post('/user/1024', {name: 'Tony'}).then(({data}) => {
this.user = data
})
}
Handling Errors
All Platform support timeout error for one request
http.get('/very/slow/api').catch(err => {
if (/timeout/i.test(err.message)) {
// this is timeout error
}
})
Other Api
You can stringify query string by
import http from '@chunpu/http'
http.qs.stringify({
query: 'string'
})
// => 'query=string'