@uyun/utils

优云前端工具集。

1. request

基于 axios 封装，集成了默认配置、自动取消和自动添加时间戳防止缓存的功能。

1.1. 快速开始

import { request as axios, createHashHistory } from '@uyun/utils'
import { Router } from 'react-router-dom'

const history = createHashHistory()
const request = axios.create({
  baseURL: '/api',
  history
})

request.interceptors.response.use(res => res.data, error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled: ', error.message);
  } else {
    ...
  }

  return Promise.reject(error)
})

...
<Router history={history}>
</Router>
...

1.2. 默认配置

默认加入了如下配置：

{
  headers: {
    common: {
      'Content-Type': 'application/json; charset=utf-8'
    }
  }
}

1.3. 自动取消

如果创建 axios 实例时传入了 history 对象，将开启路由跳转时自动取消请求的功能，适用于解决用户在快速跳转路由时引起的数据问题。

import request from './request'

request.get('/user/12345')
  .then(res => {
    ...
  })
request.post('/user/12345', { foo: 'bar' })
  .then(res => {
    ...
  })

// 路由跳转时将取消当前页面所发送且未返回信息的请求
history.push('/list')
// Request canceled: Auto-cancel
// Request canceled: Auto-cancel

1.3.1. 指定关闭

某些特殊情况下不希望请求自动取消，可以指定某个请求关闭此功能。

import request from './request'

request.get('/user/12345', { cancel: false })
  .then(res => {
    ...
  })
request.post('/user/12345', { foo: 'bar' }, { cancel: false })
  .then(res => {
    ...
  })

// 路由跳转时不会取消这两个请求
history.push('/list')

1.3.2. 恢复实例

恢复 request 实例后，不再具有自动取消功能。

request.restore()

1.4. 自动添加时间戳防止缓存

默认自动在每个请求中添加当前时间戳，防止请求被浏览器缓存。

// 等同于
request.get('/list', {
  config: {
    params: {
      _: Date.now()
    }
  }
})

1.4.1. 关闭自动添加时间戳

在创建实例时关闭。

axios.create({
  timestampParams: false
})

使用 eject 方法关闭。

request.interceptors.request.eject(request.timestampParamsInterceptor)

2. mock

基于 axios-mock-adapter 封装，覆盖了默认的延迟响应时间。

原生 axios-mock-adapter 默认没有延迟响应时间，需要手动设置。封装后默认 delayResponse 为 500ms，更符合实际应用场景。

import {mock as MockAdapter} from '@uyun/utils'
import request from './request'

const mock = new MockAdapter(request)

mock
  .onGet(...).reply(...)
  .onAny().passThrough()

2.1. 指定延迟响应时间


const mock = new MockAdapter(request, {
  delayResponse: 1000
})

3. i18n

基于 everest-i18n 封装，默认从 cookie 读取语言或中文 zh_CN。

直接配置了语言并生成实例，导入多语言文本后，可直接在组件中引用 i18n 或 __ 方法并使用。

// index.js
import { intl } from '@uyun/utils'
import locale from './locale.json'

intl.merge(locale)

// Component.jsx
import { __ } from '@uyun/utils'

__('name', '名字')
__('total', '共 {total} 条', { total: 500 })

4. qs

基于 qs 封装，qs.parse 默认无视 querystring 中的问号。

原生 qs 默认需要手动指定 { ignoreQueryPrefix: true }。封装后覆盖了默认值为 true，更符合实际应用场景。

import { qs } from '@uyun/utils'

window.location.href
// ?a=1&b=2

qs.parse(window.location.href)
// { a: 1, b: 2 }

qs.stringify({ a: 1, b: 2 })
// a=1&b=2

5. cookie

即 js-cookie。

import { cookie } from '@uyun/utils'

cookie.get('name')

cookie.set('name', 'value', { expires: 7, path: '/' })

6. base64

即 js-base64。

import { base64 } from '@uyun/utils'

base64.encode('key')
// a2V5

base64.encodeURI('/url')
// L3VybA==

base64.decode('a2V5')
// key

7. uuid

即 node-uuid。

import { uuid } from '@uyun/utils'

uuid()
// '3b99e3e0-7598-11e8-90be-95472fb3ecbd'

8. classNames

即 classnames。

import React from 'react'
import { classNames } from '@uyun/utils'

function Example(props) {
  const { active, className, ...rest } = props
  const classes = classNames('btn', { 'btn-active': active }, className);

  return <button className={classes} {...rest} />
}

9. pathToRegexp

即 path-to-regexp。

import { pathToRegexp } from '@uyun/utils'

const regexp = pathToRegexp('/user/:userId')

regexp.test('/user/3b99e3e0-7598-11e8-90be-95472fb3ecbd') // => true

10. history

@uyun/utils 重新导出了 history 的接口。通常情况下，你只会使用到 createHashHistory。

import { createHashHistory } from '@uyun/utils'

const history = createHashHistory()

Current Tags

1.1.2 ... latest (3 years ago)

16 Versions

1.1.2 ... 3 years ago
1.1.1 ... 3 years ago
1.1.0 ... 4 years ago
1.1.0-beta.0 ... 4 years ago
1.0.0-beta.0 ... 4 years ago
1.0.0 ... 4 years ago
0.3.0 ... 5 years ago
0.3.0-alpha.3 ... 5 years ago
0.3.0-alpha.2 ... 5 years ago
0.3.0-alpha.1 ... 5 years ago
0.3.0-alpha.0 ... 5 years ago
0.1.0 ... 6 years ago
0.1.1 ... 6 years ago
0.1.2 ... 6 years ago
0.2.0 ... 5 years ago
0.1.3 ... 6 years ago