English | 简体中文
Promise based api for the Mini Program. Supports the Wechat 、Alipay、Baidu the Mini-program of platform.
- Make wx.request from the Wechat Mini Program
- Make wx.downloadFile from the Wechat Mini Program
- Make wx.uploadFile from the Wechat Mini Program
- Make my.httpRequest from the Alipay Mini Program
- Make my.uploadFile from the Alipay Mini Program
- Make my.downloadFile from the Alipay Mini Program
- Make swan.request from the Baidu Mini Program
- Make swan.uploadFile from the Baidu Mini Program
- Make swan.downloadFile from the Baidu Mini Program
- Supports the Promise API
- Intercept request and response
- Supports the Mini Program RequestTask object of config
npm i wefetchPerforming a GET request
const wf = require('wefetch')
wx.showLoading({
title: 'loading',
mask: true
})
wf.get(url).then(res => {
// ....
}).catch(err => {
// ...
})
// request completed
.finally(() => {
wx.hideLoading()
})
wf.get('/get',
{
title: 'get Test',
content: 'get'
},
{
header: { demo: 'demo' }
})
.then(res => {
// handle success
console.log(res)
}).catch(error => {
// handle error
console.log(error)
}).then( _ => {
// always executed
})Performing a POST request
wf.post('/post',{title: 'post test', content: 'post'})
.then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})Performing a POSTJSON request
// the request header `Content-Type` property is a 'application/json;charset=uft-8'
wf.postJson('/postJson')
.then( res => {
console.log(res);
})Performing multiple concurrent requests
const getUserInfo = prams => wf.get('/user/1', params)
const getUserPermissions = params => wf.get('/user/1/permission', params)
wf.all([getUserInfo(), getUserPermissions()])
.then(res => {
// both requests are complete, the res as a Array back
})Performing a upload request
const chooseImage = wf.promisify(wx.chooseImage)
// using for wechat Mini Program
chooseImage().then(res => {
wf.upload('/upload', {
filePath: res.tempFilePaths[0],
name:'file'
})
.then(res =>{
console.log(res)
})
})
chooseImage().then(res => {
wf.upload({
filePath: res.tempFilePaths[0],
name:'file'
})
.then(res =>{
console.log(res)
})
})Performing a download request
wf.download('/download')
.then(res => {
console.log(res)
})
wf.download({
url:'/download'
})
.then(res => {
console.log(res)
})async/await is part of ECMAScript 2017 and is not supported in Mini Program, before we can use it, we need introduce a
regeneratorRuntime
const regeneratorRuntime = require('wehcat-regenerator-runtime');
// es6 write
async onload () {
let res = await wf.get('/get')
console.log(res)
// do something....
}
// Es5 write
onload: async function () {
let res = await wf.get('/get')
console.log(res)
// do something....
}Sample code of get request:
wf.get('/get',{},{eventType: 'get'})
// abort the request
wf.on('get', t => {
t.abort()
})
// Batch Processing the requestTask Object
wf.get('/user/info',{},{eventType:'user'})
wf.get('/user/permission',{},{eventType: 'user'})
wf.on('user', t => {
// this current event handle will be execute the two times
t.abort()
})Sample code of upload request:
// promisify
const chooseImage = wf.promisify(wx.chooseImage)
chooseImage().then(res => {
wf.upload('http://your-domain/upload', {
filePath: res.tempFilePaths[0],
name: 'file',
}, { eventType: 'upload'}).then(res => {
console.log(res)
});
wf.on('upload', t => {
t.onProgressUpdate((res) => {
console.log('upload progress', res.progress)
console.log('length of data already uploaded', res.totalBytesSent)
console.log('total length of data expected to be uploaded', res.totalBytesExpectedToSend)
})
})
});
// or like this:
chooseImage().then(res => {
wf.upload({
url: 'http://your-domain/upload',
filePath: res.tempFilePaths[0],
name: 'file',
eventType: 'upload'
}).then(res => {
console.log(res)
});
wf.on('upload', t => {
t.onProgressUpdate((res) => {
console.log('upload progress', res.progress)
console.log('length of data already uploaded', res.totalBytesSent)
console.log('total length of data expected to be uploaded', res.totalBytesExpectedToSend)
})
})
})Creating an instance You can create a new instance of wefetch with a custom config
const instance = wf.create({
baseUrl: 'http://your-domain.com/api'
//....
})Instance methods
{
// `url` is the server URL that will be used for the request
url: '/user',
// `baseURL` will be prepended to `url`
baseUrl:'http://your-domain.com/api',
// default method `get`
method: 'get',
// `uploadUrl` and `downloadUrl` will be prepended to `url`。 if your project have a different request path, you can like this to set it:
uploadUrl:'http://your-domain.com/upload',
downloadUrl: 'http://your-domain.com/download',
// support `alipay` platform only
timeout: 0,
// if your want to the Mini Program to back the requestTask Object, you can custom the `eventType`
// like this wf.on('your eventType', t => {...})
eventType: '',
// default `Content-Type`
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
}Global wefetch defaults
wf.defaults.baseUrl = 'http://your-domain.com/api';
wf.defaults.uploadUrl = 'http://your-domain.com/upload';
wf.defaults.downloadUrl = 'http://your-domain.com/download';Custom instance defaults
const instance = wf.create()
instance.defaults.baseUrl = 'http://your-domain.com/api';
instance.defaults.uploadUrl = 'http://your-domain.com/upload';
instance.defaults.downloadUrl = 'http://your-domain.com/download';// add a request interceptor
wf.before.use(request => {
// Do something before request is sent
return request;
}, error => {
// Do something with request error
return Promise.reject(error);
})
// add a response interceptor
wf.after.use(response => {
// Do something with response data
return response;
}, error => {
// Do something with response error
return Promise.reject(error)
})const chooseImage = wf.promisify(wx.chooseImage)
// using in wechat Mini Program
chooseImage().then(res => {
// Do something ...
console.log(res)
})