@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

importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain'})http.get('/data').then(({data})=>{console.log(data)})

Create Custom Http Instance

constanotherHttp=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, default GET
• params the url querystring object
• timeout request timeout, 支持快应用和微信小程序
• withCredentials whether use cors, default false

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 will JSON.stringify the data object
• application/x-www-form-urlencoded will qs.stringify the data object

data also support FormData, Blob, String

Response Object

• data response data
• headersname: 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

微信小程序

importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain',wx: wx})http.get('/data').then(({data})=>{console.log(data)})

支持单个请求超时设置

请通过 npm 安装, 参见 npm 支持

快应用

importhttpfrom'@chunpu/http'importfetchfrom'@system.fetch'http.init({baseURL: 'https://my.domain',quickapp: fetch})

支持单个请求超时设置

记得在 manifest.json 文件中加入权限

"features": [
{ "name": "system.network" },
{ "name": "system.fetch" }
]

axios (node.js)

constaxios=require('axios')importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain',axios: axios})

Please use http with axios mode in Node.js platform

jQuery / Zepto

importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain',jQuery: $})

Config Defaults / Init

// support axios stylehttp.defaults.baseURL='https://my.domain'http.defaults.timeout=1000*20// can also use http.inithttp.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

importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain'})http.interceptors.request.use(config=>{// Do something before request is sentreturnconfig})http.interceptors.response.use(response=>{// Do something with responsereturnresponse})

Cancel Requests

compatible with axios Cancellation

For easy understanding, cancelToken equals deferred equals source.token

constsource=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'}}

importhttpfrom'@chunpu/http'http.init({baseURL: 'https://my.domain'})http.interceptors.response.use(response=>{if(typeofresponse.data==='object'){// always spread the response data for directly usageObject.assign(response,response.data)}returnresponse})http.post('/user/1024',{name: 'Tony'}).then(({data, code, message})=>{if(code===0){returndata}else{console.error('error',message)}})

Usage with Vue.js

importhttpfrom'@chunpu/http'Vue.prototype.$http=http// in vue component filesubmit(){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

importhttpfrom'@chunpu/http'http.qs.stringify({query: 'string'})// => 'query=string'

License