cmn-utils
可复用的通用模块, 一些不常用的函数,或在全局函数里会引起奇异的函数没有引出到全局,可以使用$$.request | $$.store 等间接使用,或import { request } from 'cmn-utils'
,也可以直接使用 import request from 'cmn-utils/lib/request'
目录
Request
简单包装的Fetch
API
- requestConfig 配置所有默认选项
- requestHeaders 设置headers, 支持 object | key-value | function 类型参数
- send 发送请求
- getform, postform, get, post, head, del, put 发送请求(这些都是简化的send)
- 支持jsonp
- 下面为不在$$中的方法
- create 返回新实例
- config 同 requestConfig
- headers 同 requestHeaders
- prefix 设置请求前缀,可在config中设置
- beforeRequest 请求前hook
- afterResponse 响应后hook
- contentType 设置content-type
使用
; // 发送请求$$$$$$$$$$$$
默认选项
{
method: 'POST', // default 'POST'
mode: 'cors',
cache: 'no-cache',
credentials: 'include',
headers: {
'content-type': 'application/json'
},
responseType: 'json', // text or blob or formData https://fetch.spec.whatwg.org/
prefix: '', // request prefix
beforeRequest: null, // before request check, return false or a rejected Promise will stop request
afterResponse: null, // after request hook
timeout: null, // request timeout (ms)
}
基本使用
简化写法
// 原始fetch 写法 // 等价于,直接使用send方法$$ // 等价于,使用提供的post方法$$
提交form表单
// 提交form表单$$ // 将拼接到url后面 //.postform('/form', {name: 'weiq'}) // 将做为Form Data发送
使用FormData && 上传
Upload FormData
注:不能用get方法
const data = ;data;data; $$ ;
全局配置, 将会覆盖默认参数, 一般全局配置一次
// 全局配置, 将会覆盖默认参数, 一般全局配置一次$$ // 配置请求头$$ // key-value // json // 用函数反回头$$
临时改变配置项
$$
获取原始响应结果 & 单独处理响应
当返回值不是统一格式时,使用afterResponse: null
,可以不走全局的拦截器,或者想取原始响应结果时使用responseType: null
$$ ;
并发请求
{ let r1 = $$; let r2 = $$; let r3 = $$; Promiseallr1 r2 r3}
Store
简单包装的store2
API
- setStore
- getStore
- removeStore
- clearStore
- 下面为不在$$中的方法
- getStoreAsync
- create
- getStoreInfo
- getStoreInfoAsync
- session
- local
$$ $$; $$ $$ $$store; $$store; $$store ; $$store; // 存储到 sessionStorage中$$store; // 存储到 localStorage中
Event
让组件可以发射、监听自定义事件, 有时我们可能需要让两个没有太大关系的组件间建立联系,比如增加商品到购物车这个场景,一般会在页面头部(Header
组件)放置购物车的图标,商品列表(Goods
组件)中有一个添加到购物车的图标,我们想点击这个图标时,让头部购物车图标显示+1的效果,有几种方案,其一是在头部定义一个changeCardNumber
方法,然后把这个方法层层传递到商品列表(Goods
)中,进行调用,这很容易出错,其二是点击商品列表中商品时,通过dispatch
发出一个类型是changeCardNumber
的action
,这种方法我们不得不把Header
包装一下才可以让它处理dispatch
的能力, 最后如果我们用自定义事件可以更容易实现这个效果,即在Header
中订阅一个changeCardNumber
这个事件,在其它任何地方只有触发trigger
这个事件就可以了,只需要注意不用的事件要及时移除。
API
- on 注册事件监听
- off 移除事件监听
- once 注册一次事件监听,只能触发一次trigger触发后即自动从监听中移除
- trigger 触发事件
示例
$$; $$; $$; $$;
Download
下载文件 $$.download(data, strFileName, strMimeType);
示例
$$; $$; $$; $$; var str= "hello world" arr= strlength;str;$$; $$; var x=;x;xresponseType="blob";x{ $$;};x;