Janvem - tools

Request

🔧 - 一个基于Axios二次封装的简易工具库

特点/功能

• 支持全局配置请求信息
• 支持自定义头部
• 支持实时获取接口的加载状态，全局回调加载状态，常用语页面加载中的Loading
• 支持配置自定义返回状态码，配置请求refreshToken接口
• 支持全局动态配置存储token信息，设置请求头中的Token Key
• 全面支持TypeScript

安装

Using npm：

$ npm install janvem-tools -S

Using yarn：

$ yarn add janvem-tools

API

| 名称 | 说明 | 类型 | 默认值 | 版本 | | ---------------- | --------------------------- | -------- | ------------------------------------------ | ---- | | baseURL | 全局接口域名地址 | string | "/" | v1.0 | | timeout | 请求有效时间，单位：ms | number | 20000 | v1.0 | | isNeedToken | 是否需要设置token | boolean | false | v1.0 | | tokenKey | 请求头中token的Key | string | "Authorization" | v1.0 | | loading | 开启接口loading功能监听 | boolean | false | v1.0 | | loadingCallback | loading状态变化时，毁掉方法 | function | (loading: boolean) => void; | v1.0 | | noPermissionCode | token过期的状态码 | number | 401 | v1.0 | | refreshConfig | refreshToken的接口配置信息 | object | 默认值与常规请求参数一致 | v1.0 | | beforeRequest | 全局请求拦截 | function | (AxiosRequestConfig) => AxiosRequestConfig | | | afterResponse | 全局相应拦截 | function | (AxiosResponse) => AxiosResponse | v1.0 |

Function

| 方法名 | 说明 | 默认值 | 版本 | | ---------- | ------------------------------------------------------------ | -------------------------- | ---- | | setToken | 设置全局token的value，默认存于localStorage，key为：AUTH_TOKEN | ajax.setToken(输入Token值) | | | clearToken | 清除全局token | ajax.clearToken() | |

使用：

Note：es6 usage

const { request } from 'janvem-tools'

Directory

# Example

api // 接口管理目录
| - request.js // 接口配置文件
| - modules // 各模块接口存放文件夹
| - | - common.js // 基础模块请求
| - | - .......

Init global request

// requst.js
const { request } from 'janvem-tools'
const ajax = new request({
  baseURL: "http://localhost:7001",
  timeout: 20000,
  isNeedToken: true,
  tokenKey: 'Authorization'
  loadingCallback: (loading) => {
    console.log(loading);
  },
  beforeRequest: (config) => {
    return config;
  },
  afterResponse: (response) => {
    return response;
  },
  noPermissionCode: 401,
  refreshConfig: {
    url: "/refresh",
    method: "POST",
    params: {},
  },
});
export default ajax;

Request

// common.js
import ajax from './../request.js'

// GET
export const get = (params = {}, config = {}) => {
  return ajax.get({
    url: "/",
    params,
    config: { // 此配置会覆盖默认配置
      isNeedToken: false, // 是否需要token
      loading: true, // 是否开启loading
      ...config
    },
  });
}

// POST
export const post = (params = {}, config = {}) => {
  return ajax.post({
    url: "/",
    params,
    config: { // 此配置会覆盖默认配置
      isNeedToken: false, // 是否需要token
      loading: true, // 是否开启loading
      ...config
    },
  });
}

// PUT
export const put = (params = {}, config = {}) => {
  return ajax.put({
    url: "/",
    params,
    config: { // 此配置会覆盖默认配置
      isNeedToken: false, // 是否需要token
      loading: true, // 是否开启loading
      ...config
    },
  });
}

// DELETE
export const delete = (params = {}, config = {}) => {
  return ajax.delete({
    url: "/",
    params,
    config: { // 此配置会覆盖默认配置
      isNeedToken: false, // 是否需要token
      loading: true, // 是否开启loading
      ...config
    },
  });
}

// FORM - 表单提交
const formData = new FormData();
formData.append('file', file)
export const form = (params = {}, config = {}) => {
  return ajax.form({
    url: "/",
    params,
    config: { // 此配置会覆盖默认配置
      isNeedToken: false, // 是否需要token
      loading: true, // 是否开启loading
      ...config
    },
  });
}

Token

// common.js
import ajax from './../request.js'
// GET
export const get = ajax.get({
  url: "/",
  params: {},
  config: { // 此配置会覆盖默认配置
    isNeedToken: true, // 是否需要token
  },
});

// other file
import ajax from '@/api/request.js'

// 设置Token
ajax.setToken(输入Token值)

// 清除Token
ajax.clearToken()