npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@i965/mini-tools

v0.0.19

Published

> 在开发过程当中,经常会有一些通用的工具方法,所以这里整理出来,减少CV操作。

Downloads

62

Readme

在开发过程当中,经常会有一些通用的工具方法,所以这里整理出来,减少CV操作。

目前主要分为两类工具:

  • 通用工具 - commonimport { common } from '@i965/mini-tools';
  • 微信小程序 - mpimport { mp } from '@i965/mini-tools';

common

assertType

类型断言,主要是使用的Object.prototype.toString方法进行判断。

const str = 'this is String';
assertType(str, 'String'); // true

const fn = () => {};
assertType(fn, 'Function'); // true

Queue

队列类

| 方法 | 参数 | 说明 | | :------: | :--: | :--------------------------: | | enqueue | any | 数据入队 | | dequeue | 无 | 数据出队 | | isEmpty | 无 | 队列是否为空 | | size | 无 | 返回队列长度 | | clear | 无 | 清空队列 | | show | 无 | 将整个队列返回,队列不会清空 | | loopExec | 无 | 出队并且执行,直到清空队列 |

mp

diff

比较两个对象的节点差异,主要是为了优化小程序的setData

const cur = {
  a: 1,
  b: 2,
  c: 'str',
  d: { e: [2, { a: 4 }, 5] },
  f: true,
  h: [1],
  g: { a: [1, 2], j: 111 },
}
				
const pre = {
	a: [],
  b: 'aa',
  c: 3,
  d: { e: [3, { a: 3 }] },
  f: false,
  h: [1, 2],
  g: { a: [1, 1, 1], i: 'delete' },
  k: 'del',
}

diff(cur, pre) // { a: 1, b: 2, c: 'str', 'd.e[0]': 2, 'd.e[1].a': 4, 'd.e[2]': 5, f: true, h: [1], 'g.a': [1, 2], 'g.j': 111, 'g.i': null, k: null }

promisely

将小程序api的回调风格转换为promise风格。

const response = await mp.promisely(wx.request, {...requestOptions});

request

因为业务需求,每次登陆小程序都要验证token,而小程序没有统一的登陆入口,所以这里将小程序的请求进行了一层封装,默认第一次请求的时候会预先请求token。

import { mp } from '@i965/mini-tools';
const request = new mp.Request(constructOptions);

构造函数入参是一个对象:

  • baseURL - 请求地址的基础URL
  • loginUrl - 获取登陆凭证的地址,如果你的小程序接入了登陆凭证验证如 token,在处理接口时,会默认不处理这个url;如果你没有传入这个参数,就表示你没有使用登陆凭证验证,会直接进行请求。
  • getToken - 从本地获取登陆凭证的方法,支持promise
  • setToken - 将登陆凭证存放在本地的方法,支持promise
  • requestToken - 后端服务获取 token 的方法,必须是一个promise

生成的实例方法:

  • request

    参数是一个对象,同wx.request或者wx.uploadFile,在此基础上另外多了一个 type?: 'request' | 'uploadFile',如果是request,实质调用的是wx.request;如果是uploadFile,实质是调用的wx.uploadFile;默认是request。

  • post

    实质调用的是上面的request({method: 'post',type: 'request', ...others})

  • get

    实质调用的是上面的request({method: 'get', type: 'request', ...others})

  • uploadFile

    实质调用的是上面的request({type: 'uploadFile', ...others})

  • before

    请求拦截,可以在这里处理请求头等等信息。参数是一个函数,该函数的参数是传入的请求参数。

  • after

    响应拦截,可以自定义处理响应信息。参数是一个函数,(resolve, reject, response) => void,前两个是该请求的promise的状态处理,后一个是返回的具体信息。假设我们约定返回的response.data.code === 0是正常的,其它都是错误的,那么这个response的结果的可以通过resolve(response)返回成功态,reject(response)返回失败态。

// request.js
import { mp } from '@i965/mini-tools';
import CODE from './code';
import { REQUEST } from '../../config/index';
const app = getApp();
const baseURL = REQUEST.baseURL;

// 从本地获取 token 的方法
const getToken = () => {
  return app.globalData.userInfo ? app.globalData.userInfo.token : '';
};

// 将 token 存放在本地的方法
const setToken = (token) => {
  const userInfo = {
    token,
  };
  Object.assign(app.globalData.userInfo, userInfo);
};

// 后端服务获取 token 的方法
const requestToken = () =>
  new Promise(async (resolve, reject) => {
    const { code } = await mp.promisely(wx.login);
    const response = await mp
      .promisely(wx.request, {
        url: `${baseURL}user/WxUser/wxLogin?appId=${REQUEST.appId}`,
        method: 'post',
        data: { code },
      })
      .catch((res) => {
        wx.showToast({
          title: `获取登陆凭证失败`,
          icon: 'none',
        });
        return res;
      });
    const { data, statusCode } = response;
    if (statusCode === 200 && data && data.result) {
      resolve(data.result.token);
    } else {
      reject(response);
    }
  });

const request = new mp.Request({
  baseURL,
  loginUrl: 'wxLogin',
  getToken,
  setToken,
  requestToken,
});

// 请求拦截
request.before((options) => {
  options.header = {
    'content-type': 'application/json', // 默认值
    Authorization: `Bearer ${options.token}`,
  };
  options.url += `${options.url.includes('?') ? '&' : '?'}appId=${REQUEST.appId}`;
  return options;
});

// 响应拦截
request.after((resolve, reject, response) => {
  const { statusCode, data } = response;
  if (statusCode === 200) {
    switch (data.code) {
      case CODE.SUCCESS:
        resolve(data);
        break;
      case CODE.AUTHENTICATION_FAILED:
        wx.showModal({
          title: '提示',
          content: '会话失效,请重新进入小程序',
          confirmColor: '#4685FC',
        });
        reject(data);
        break;
      default:
        const msg = data.errorMsg && typeof data.errorMsg == 'string' ? data.errorMsg : '网络错误';
        wx.showToast({
          title: msg,
          icon: 'none',
        });
        console.log(`接口错误,状态码:${statusCode}; 信息:${response}`);
        reject(data);
    }
  } else {
    console.log(`网络错误,状态码:${statusCode}; 信息:${response}`);
    wx.showToast({
      title: '网络错误,请稍后再试',
      icon: 'none',
    });
    reject(data);
  }
});

export default request;


// api.js
import request from './request';

export const getCart = () =>
  request.post({
    url: 'cart/wx/cart/getCart',
  });