wd-axios

axios二次封装，提供loading，提示，缓存，请求队列查询等功能

安装

npm install wd-axios

修改配置（若使用默认配置可忽略此步骤）

import type { WdSettings } from 'wd-axios'
import { setOptions } from 'wd-axios'

const settings: WdSettings = {
  timeout: 5000,
  successValidator: (response) => response.data.status === 100,
  responseCodeAction: {
    100: (data, next) => {
      next()
    }
  }
}

setOptions(settings)

使用

import wdaxios from 'wd-axios'

await wdaxios(
    {
        cache: 'abc',
        props: ['meta'],
        url: 'http://localhost:5173/abc',
        params: { a: 1 }
    },
    { params: { a: 2, b: 2 } }
)

请求配置项

请求接收一个配置项列表，最终会合并配置项，相同属性列表前面的权重更大；

const payload: WdPayload = {
  <!-- axios配置 -->
  // 超时时间，单位ms
  timeout: 5000,
  ......(详见axios文档)

  <!-- 请求参数配置 -->
  // 请求的唯一标识，若不指定此属性，会根据请求参数生成hash值
  name:'getAbcList',
  // 在队列中包含相同请求时，配置需要取消(上一个:false/本次:true)请求
  cancel: {
    cancelWhenSamePending: false,
  },
  // 请求过程中的loading显示效果
  loading: {
    hide: false,  // 是否隐藏loading
    area: 'body', // 默认loading效果显示在key=body对应的WdLoadingAreaValue
  },
  // 请求结束时显示的成功/失败提示效果
  prompt: {
    success: null, // 成功请求默认不显示提示
    error: {
        type: 'error', // 请求错误时展示error类型
        content: '请求失败，请稍后再试', // 错误请求默认文字内容
        position: 'right', // 错误请求默认展示位置
    },
  },
  // cache的标识 false表示不使用cache,string表示需要使用cache并指向cache_key
  // 默认不使用cache，若需要使用时指定cache_key，在请求发送时所cache有效，则不发送请求，直接使用cache_key对应的内容
  cache: false,
  // preload的标识，表示当前请求是否为预请求
  // false表示不为预请求，无需特殊处理；
  // true标识为预请求，不需要loading，且需要cache，若未指定cache_key则cache_key为请求name
  preload: false,
  // 需要返回的属性列表
  // 可返回列表为：['headers','config','code','message','meta']
  // 此属性值设置后会覆盖默认值，如设置props: ['meta']，则response仅返回{data,meta,success}
  props: ['code', 'message', 'meta'], // 默认不返回'config'&'headers'
}

设置项

setOptions函数的参数，包含默认请求配置项以及全局配置；

const settings: WdSettings = {
  <!-- WdPayload默认值 -->
  ...payload, // 详见上述请求配置项

  <!-- 全局配置 -->
  // 设置最终response的各个属性对应的key，{targetKey: originKey} eg: {code: 'status'}
  // 值为 '' 时表示所有未一一指定的response内容均将放入此属性内，相同属性key内部值权重高于外部值
  // 值为 string 时表示将一一对应属性值
  // 默认 { code: 'code', message: 'message', data: 'data', meta: '' }
  responsePropMap: {
    code: 'status',
    message: 'msg',
    data: ''
  },
  // loading样式配置
  loadingStyles:{
    type: 'circle'; // loading样式，支持的属性值见 WdLoadingType
    color: 'green'; // loading图形的颜色
    size: '50px'; // loading图形的大小
    zIndex: 1000 ;
  },
  // 设置prompt的各种状态下对应的样式和表现（颜色，持续时间，位置等）
  // 值为Toastify.Options（提示展示效果使用的是第三方库Toastify）
  promptStyles:{
    success: {
        style: {
            background: 'linear-gradient(to right, green, #000)',
        },
    },
  },
  // 判断响应是否成功的函数，根据response判断请求再系统逻辑上是否成功
  successValidator: (response) => response.data.status === 100,
  // 特殊响应code对应的事件回调，比如：无权限返回502时，需要退出登录等操作
  // 若需要继续进行后续生命周期，则需要调用next函数，
  // 若next函数包含参数WdPrompt，则覆盖提示信息，若不想执行next，可直接return WdPrompt用于覆盖提示信息
  responseCodeAction: {
    410: (data, next) => {
      next({ content: '用户凭证失效，请返回重新登录', type: 'error', position: 'center' })
      location.href = '/login';
    }
  },
  // 自定义拦截器，分为request和response拦截器，值格式均为：[成功拦截器，失败拦截器]
  // 自定义拦截器在响应拦截器之前执行
  // 在此可处理一些操作，比如：headers token添加，请求参数格式化等
  interceptors: {
    request: [
      (config) => {
        config.headers['Auth-Token'] = 'token';
        return config
      }
    ]
    response: [
        undefined,
         (error: any) => {
            return {......}
         }
    ]
  }
}