A fetch-like API for wechat mini-program

Installation

# 小程序开发者工具构建npm包时仅处理production依赖,因此要加`--save-prod`
npm i @xixilive/weapp-fetch --save-prod

Usage

basic

A simple example of use fetch function, see API section in document for details.

import fetch from '@xixilive/weapp-fetch'

fetch('http://example.com').then(res => console.log(res))

use http

It exposes a http wrapper for wx.request.

import {http, Logger} from '@xixilive/weapp-fetch'

http.logger = new Logger(console, 'debug')

// intercept request
http.before = (params) => {
  params.someKey = 'someValue'
}

// intercept response
http.after = (res) => {
  res.someKey = 'someValue'
}

const client = http('https://example.com')

client.get('/api').then(console.log)
client.head('/api').then(console.log)
client.post('/api', data).then(console.log)
client.put('/api', data).then(console.log)
client.patch('/api', data).then(console.log)
client.delete('/api').then(console.log)

config http.logger

by default, http.logger will log nothing, see API section for details.

import fetch, {http, Logger} from '@xixilive/weapp-fetch'

// use wx RealtimeLogManager
const realtimeTransport = wx.getRealtimeLogManager()
http.logger = new Logger(realtimeTransport, 'debug')

// or use wx LogManager
const localTransport = wx.getLogManager()
http.logger = new Logger(localTransport, 'debug')

// or use wx console
const consoleTransport = console
http.logger = new Logger(consoleTransport, 'debug')

// ...
// will process logging during fetch/http requests

Build Tips

This package was prebuilt as es module to dist folder, and all of source code not be transpiled to ES5 version. If you use this package's default build, you should turn on the ES6 to ES5 option in devtools. If you want a custom build, please clone this repo.

API

fetch function

function fetch(url: string, init: any): Promise<any>;

http

// to create an http instance
function http(base: string, defaultHeaders: object): HttpInstance

interface HttpInstance {
  get(path: string, header:any): Promise<any>;
  head(path: string, header:any): Promise<any>;
  post(path: string, data: any, header: any): Promise<any>;
  put(path: string, data: any, header: any): Promise<any>;
  patch(path: string, data: any header: any): Promise<any>;
  delete(path: string, header: any): Promise<any>;
}

class http {
  // to send a request directly
  static request(options: wxRequestOptions): Promise<any>;

  // get or set logger
  static logger: Logger;

  // get or set request interpolator
  static before: RequestInterpolator;

  // get or set response interpolator
  static after: ResponseInterpolator;
}

function RequestInterpolator(params: object): void;
function ResponseInterpolator(response: object): void;

Logger

interface transport {
  // basic method
  log(...args: string[]): void;
  // level relative methods
  debug?(...args: string[]): void;
  info?(...args: string[]): void;
  warn?(...args: string[]): void;
  error?(...args: string[]): void;
}

class Logger {
  constructor(transport: Transport, level: LoggerLevel = LoggerLevel.DEBUG);
  log(level: string, ...args: string[]): Logger;
  debug(...args: string[]): Logger;
  info(...args: string[]): Logger;
  warn(...args: string[]): Logger;
  error(...args: string[]): Logger;

  static levels :LoggerLevel;
}

enum LoggerLevel {
  ERROR = 1,
  WARN = 2,
  INFO = 4,
  DEBUG = 8,
}

Incompatible features of fetch

• Does not support FormData
• Does not support Blob
• Does not support abort yet