@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, 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
• 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'

License