Notably Polite Mariner

    min-fetch

    3.0.0 • Public • Published

    @chunpu/http

    NPM version Downloads Dependency Status

    Promise Based request / fetch / http For Real Project, Support multiple platforms

    Installation

    npm i @chunpu/http

    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'

    License

    License

    Install

    npm i min-fetch

    DownloadsWeekly Downloads

    13

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    75.9 kB

    Total Files

    24

    Last publish

    Collaborators

    • ftft1885