beyond-remote v2.0.1

beyond-remote

用于封装 fetch 的请求，此库依赖 promise 和 fetch

旧浏览器推荐使用 es6-promise ，ie8 还需要引入 es5-shim

require('es6-promise').polyfill()

fetch 推荐使用 whatwg-fetch

如果要支持 IE8 ,请使用 fetch-ie8

基本使用

import Remote from 'beyond-remote'

// 默认值
const remote = new Remote({
	basePath : '',
	requestJSON : true,
	responseJSON : true,
	timeout : 10,
	autoTransform : false,
	dataType : 'json',  // json/text/formData/blob/arrayBuffer
	credentials : 'same-origin'
})


const getUsers = remote.create({
	url : '/user/list'
})


getUsers().then(function(json){
	console.log(json)
}).catch(function(error){
    console.log(error)
})


// json 方式提交参数
const getUser = remote.create((id)=>{
	return {
		url : '/user/detail',
		requestJSON : true,
		body : {id}
	}
})

getUser(1).then(function(json){
	console.log(json)
}).catch(function(error){
      console.log(error)
})

// form 方式提交参数
const getUser = remote.create((id)=>{
	return {
		url : '/user/detail',
		requestJSON : false,
		body : {id}
	}
})

// 自定义提交参数
const getUser = remote.create((id)=>{
	return {
		url : '/user/detail',
		requestJSON : false,
		body : 'id=' + id
	}
})



// 文件图片上传
const uploadAvatar = remote.create((body)=>{
	return {
		url : '/user/uploadAvatar',
		requestJSON : false,
		body : new FormData
	}
})

// 自定义 headers
const getUser = remote.create((id)=>{
	return {
		url : '/user/detail',
		headers : {'content-type' : 'application/json'},
		body : {id}
	}
})

API

new Remote(options : Options)

remote.create(options : Options )

remote.create(()=> Options )

remote.setBase(options : Options )

Options 参数值

更多 options 请参考 fetch 的第二个参数对象，关于 fetch 接口的时候，请参考 这个API很“迷人”——(新的Fetch API)

高级

锁定和延时

使用锁定可以避免短时间内多次重复发起请求，如表单提交等业务场景

// sendMessageFn 方法会在第一次请求执行时锁定，后面的两次请求不会发生，在第一次执行开始的 60 秒后会可以再次执行
import Remote from 'beyond-remote'
import {lock} from 'beyond-lib/lib/lock'
var remote = new Remote
var sendMessage = remote.create({
	url : '/sendMessage',
	body : {content : 'hello'}
})

var sendMessageFn = lock(function(){
	sendMessage()
},60)

sendMessageFn()
sendMessageFn() // 无效
sendMessageFn() // 无效

setTimeout(()=>{
	sendMessageFn() //有效
},60000)

使用延时可以避免短时间内多次重复发起请求，如输入搜索等业务

// searchFn 方法会在连续请求后的最后一次请求，如果1秒钟之内再没请求，则执行
import Remote from 'beyond-remote'
import {delay} from 'beyond-lib/lib/delay'
var remote = new Remote
var search = remote.create({
	url : '/search',
	body : {content : 'hello'}
})

var searchFn = delay(function(){
	search()
},1)

searchFn() // 无效
searchFn() // 无效
searchFn() // 1秒后执行

注册事件

事件分为 Remote 级别和 remote 实例级别，前者针对所有的，后者针对 一个 remote 实例下创建的 remoter

import Remote from 'beyond-remote'
const remote = new Remote()
function handler(e){
	console.log(e.type)
}

var Remoteoffstart =  Remote.on('start',handler)
var Remoteoffsend =  Remote.on('send',handler)
var Remoteoffsuccess =  Remote.on('success',handler)
var Remoteofferror =  Remote.on('error',handler)
var Remoteoffcomplete =  Remote.on('complete',handler)

var remoteOffstart =  remote.on('start',handler)
var remoteOffsend =  remote.on('send',handler)
var remoteOffsuccess =  remote.on('success',handler)
var remoteOfferror =  remote.on('error',handler)
var remoteOffcomplete =  remote.on('complete',handler)

e : Event

事件发生顺序依次为 start -> send -> success/error -> complete

在事件类型方法里面，response 为同一实例，必须对 response 对象进行clone 再使用，见如下代码

Remote.on('success',(e)=>{
	if(e.response){
		e.response.clone().json().then((res)=> console.log(res) )
	}
})

使用 TypeScript

interface Data{
	success : true,
	data : []
}

const getData = remote.create<Data>({url : '/getData'})

getData()


const getUserById : (id : string)=> Promise<Data>  = remote.create((id)=>({url : `/getUser/${id}`}) )

getUserById(1)


const getImage : (src : string)=> Promise<Response>  = remote.create((src)=>({url : src,dataType : false}) )

getImage()
.then((res)=>{
	res.blob()
})
.then((blob)=>{
	let src = URL.createObjectURL(blob)
	let img = new Image
	img.src = src
})