Skip to content

Latest commit

 

History

History
335 lines (240 loc) · 5.94 KB

.readme.md

File metadata and controls

335 lines (240 loc) · 5.94 KB
Raw

CircleCI

Features

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'