anti-replay-ajax-util

基于umi-request, 在ajax请求层面, 实现请求防重.

Usage no npm install needed!

<script type="module">
  import antiReplayAjaxUtil from 'https://cdn.skypack.dev/anti-replay-ajax-util';
</script>

README

anti-replay-ajax-util

基本介绍

基于umi-request, 在ajax请求层面, 实现请求防重.

支持的两种防重模式: 丢弃旧请求, 丢弃新请求

使用

yarn add anti-replay-ajax-util
import {AjaxUtil, WebApiData} from 'anti-replay-ajax-util'

// 防重: 丢弃新请求
AjaxUtil.post({
    url:'web api url'
},AjaxUtil.AntiReplayModel.DISCARD_NEW)

// 防重: 丢弃旧请求
AjaxUtil.post({
    url:'web api url'
},AjaxUtil.AntiReplayModel.DISCARD_OLD)

// 无防重: 普通请求
AjaxUtil.post({
    url:'web api url'
})

全局拦截器

import {AjaxUtil, WebApiData,umiRequest} from 'anti-replay-ajax-util'

// request拦截器, 改变url 或 options.
umiRequest.interceptors.request.use((url, options) => {
  return (
    {
      url: `${url}&interceptors=yes`,
      options: { ...options, interceptors: true },
    }
  );
});

// 和上一个相同
umiRequest.interceptors.request.use((url, options) => {
  return (
    {
      url: `${url}&interceptors=yes`,
      options: { ...options, interceptors: true },
    }
  );
}, { global: true });


// response拦截器, 处理response
umiRequest.interceptors.response.use((response, options) => {
  const contentType = response.headers.get('Content-Type');
  return response;
});

// 提前对响应做异常处理
umiRequest.interceptors.response.use((response) => {
  const codeMaps = {
    502: '网关错误。',
    503: '服务不可用,服务器暂时过载或维护。',
    504: '网关超时。',
  };
  console.error(codeMaps[response.status]);
  return response;
});

// 克隆响应对象做解析处理
umiRequest.interceptors.response.use(async (response) => {
  const data = await response.clone().json();
  if(data && data.NOT_LOGIN) {
    location.href = '登录url';
  }
  return response;
})

AjaxUtil.post({
    url:'web api url',
    umiRequest:umiRequest
},AjaxUtil.AntiReplayModel.DISCARD_NEW)