jt-lq-remote

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 )

Options 参数值

方法	类型	默认值	说明
url	string	-	请求的url，会与 basePath 做拼接
basePath	string	-	每一个 Remote 实例的 basepath ,会与 url 拼接
requestJSON	boolean	true	requestJSON 为 true 且没有手动设置content-type的情况下， 会设置请求头 content-type 为 application/json ，并会将 object 类型的 body 通过 JSON.stringify 转化 json 格式字符串
responseJSON	boolean	true	responseJSON 为 true 且没有手动设置content-type的情况下， 会设置请求头 Accept 为 application/json
timeout	number	number	超时设置，单位为秒，默认为 10，设置0为不限制超时
dataType	string		设置返回数据的转换，默认为 json，支持 json/text/formData/blob/arrayBuffer
remoter	any		设置返回数据的转换，默认为 json，支持 json/text/formData/blob/arrayBuffer

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

高级

锁定和延时

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

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

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

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

API

delay(remoter,time)

lock(remoter,time)

方法	类型	默认值	说明
remoter	Function	-	-
time	number	1	锁定或者延迟的时间，单位为 秒

注册事件

import Remote from 'beyond-remote'

function handler(e){
	console.log(e.type)
}

var offstart =  Remote.on('start',handler)
var offsend =  Remote.on('send',handler)
var offsuccess =  Remote.on('success',handler)
var offerror =  Remote.on('error',handler)
var offcomplete =  Remote.on('complete',handler)

e : Event

方法	类型	默认值	说明
type	string	-	start,send,success,error,complete
ok	boolean	-	请求返回的状态码status，当 200 <= status < 300 为 true，当 type 为 start 和 send 该值为 undefined
error	Error	-	fetch 请求失败的 Error 对象，start 和 send 该值为 undefined
response	Response	-	response 对象，start 和 send 时，该值为 undefined
remoter	any	-	当前请求函数，也可在创建的时候指定

事件发生顺序依次为 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 : null}) )

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