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 参数值

| 方法 | 类型 | 默认值 | 说明 | | -------- | ---- | ---- |---- | | 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/false | | 设置返回数据的转换，默认为 json，支持 json/text/formData/blob/arrayBuffer/false;设置为 false 时，可以获取原始 response | | remoter | any | | 设置返回数据的转换，默认为 json，支持 json/text/formData/blob/arrayBuffer |

更多 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

| 方法 | 类型 | 默认值 | 说明 | | -------- | ---- | ---- |---- | | 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 : false}) )

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