若依--Request.js

🕗 发布于 2024-09-29 19:54 javascript 前端 java

编写一个request.js的基本类，封装一些信息，比如请求地址、响应时间、携带的token参数等等。

//创建一个axios实列这里的 import.meta.env.VITE_APP_BASE_API 表示这个基础 URL 的值来自于环境变量。通常，这种做法用于将不同环境（如开发、测试和生产）中的 API 地址进行分离管理。
//方便多环境的开发
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

.env文件配置环境。

分为开发环境和生产环境
.env.development：
.env.production：

import axios from 'axios'
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi'
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'

let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  //对于post 和put请求
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
    if (requestSize >= limitSize) {
      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
      return config;
    }
    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj)
    } else {
      const s_url = sessionObj.url;                // 请求地址
      const s_data = sessionObj.data;              // 请求数据
      const s_time = sessionObj.time;              // 请求时间
      const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理，请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    // 二进制数据则直接返回
    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
      return res.data
    }
    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true;
        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
          useUserStore().logOut().then(() => {
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;
      });
    }
      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
    } else if (code === 500) {
      ElMessage({ message: msg, type: 'error' })
      return Promise.reject(new Error(msg))
    } else if (code === 601) {
      ElMessage({ message: msg, type: 'warning' })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      ElNotification.error({ title: msg })
      return Promise.reject('error')
    } else {
      return  Promise.resolve(res.data)
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
    return Promise.reject(error)
  }
)

// 通用下载方法
export function download(url, params, filename, config) {
  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob',
    ...config
  }).then(async (data) => {
    const isBlob = blobValidate(data);
    if (isBlob) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      ElMessage.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    ElMessage.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

export default service

前端做幂等性校验:

分析当前的会话信息，

const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
  cache.session.setJSON('sessionObj', requestObj)
} else {
  const s_url = sessionObj.url;                // 请求地址
  const s_data = sessionObj.data;              // 请求数据
  const s_time = sessionObj.time;              // 请求时间
  const interval = 10000;                       // 间隔时间(ms)，小于此时间视为重复提交

  //当前会话请求的数据相同 并且时间查小于一定的时间
  if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
    const message = '数据正在处理，请勿重复提交';
    console.warn(`[${s_url}]: ` + message)
    return Promise.reject(new Error(message))
  } else {
    cache.session.setJSON('sessionObj', requestObj)
  }

请求拦截器的代码

post和get数据直接提交对象就可以了，拦截器里面可以自动修改。

service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false   //istoken是否需要添加
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  if (getToken() && !isToken) {  //有token 并且 isToken是true  //设置请求头
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?' + tansParams(config.params);
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  //没有重复提交
  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
    const requestObj = {
      url: config.url,
      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
      time: new Date().getTime()
    }
    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
    if (requestSize >= limitSize) {
      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
      return config;
    }

    const sessionObj = cache.session.getJSON('sessionObj')
    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
      cache.session.setJSON('sessionObj', requestObj) //需要进行缓存
    } else {
      const s_url = sessionObj.url;                // 请求地址
      const s_data = sessionObj.data;              // 请求数据
      const s_time = sessionObj.time;              // 请求时间
      const interval = 10000;                       // 间隔时间(ms)，小于此时间视为重复提交
      //当前会话请求的数据相同 并且时间查小于一定的时间
      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
        const message = '数据正在处理，请勿重复提交';
        console.warn(`[${s_url}]: ` + message)
        return Promise.reject(new Error(message))
      } else {
        cache.session.setJSON('sessionObj', requestObj)
      }
    }
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

对于get请求拼接参数

if (config.method === 'get' && config.params) {
  console.log('get请求映射params参数:' + config.url)
  let url = config.url + '?' + tansParams(config.params);
  url = url.slice(0, -1); //将最后一个参数去除
  config.params = {};
  config.url = url;
  console.log('get请求映射params参数之后:' + config.url)
}

原文地址：https://blog.csdn.net/ngczx/article/details/142641782

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Linux上安装Jenkins并展示allure报告
下一篇：技术成神之路：设计模式（十八）适配器模式

【理论】负载均衡
【理论】负载均衡
阅读更多2024-10-05
Qt 3D、QtQuick、QtQuick 3D 和 QML 的关系
Qt 3D是 Qt 框架中的一个模块，专门用于处理三维图形渲染和场景管理。它提供了构建 3D 应用所需的全面 API，包括渲染、动画、物理引擎集成、骨骼动画、粒子系统等功能。通过Qt 3D，开发者可以
阅读更多2024-10-05
Node.js 中如何进行 JWT(JSON Web Tokens)身份验证和授权
是一种用于安全传输信息的开放标准，它通常用于身份验证和授权。在中，你可以使用库如来创建和验证 JWT。JWT 允许你在服务器和客户端之间安全地传递信息，而无需存储会话状态。这使得 JWT 非常适合构建
阅读更多2024-10-05
【RabbitMQ】RabbitMQ学习
根据routing key ，会发送给 binding Key 符合的对列。一个交换机，将消息转发到于其绑定的所有对列，每个消费者都能享有这些消息。将消息转发给和带有通配符的 binding key
阅读更多2024-10-05
PostgreSQL常用数值处理函数简介
这些数值处理函数提供了丰富的数值计算功能，从简单的数学操作到更高级的科学计算，满足了大多数数据库操作中的数值处理需求。
阅读更多2024-10-05
RabbitMQ篇（死信交换机）
当一个队列中的消息满足下列情况之一时，可以成为死信（dead letter）消费者使用basic.reject或者basic.nack声明消费失败，并且消息的requeue参数设置为false消息是一
阅读更多2024-10-05
C++ 多态：重塑编程效率与灵活性
多态的概念、定义、实现、虚函数重写、抽象类、多态的原理
阅读更多2024-10-05
Linux
r就是包括删除子目录 -i就是询问是否删除 -f就是强制。如何 i和f同时用，谁在后面谁先生效。删除一个空目录：rmdir a 或者 rm a如果目录不为空：rm a -r删除一个目录下面的所有
阅读更多2024-10-05
前端练习小项目 —— 让图片变得更 “色”
前端练习小项目 —— 让图片变得更 “色”
阅读更多2024-10-05
最新版本SkyWalking【10.1.0】部署
基于当前最新版10.1.0搭建skyWalking。
阅读更多2024-10-05

若依--Request.js

相关文章