Vue发送Get 和 Post 请求以及获取数据

news/2024/7/10 3:02:19 标签: java, vue

Vue发送Get 和 Post 请求

注意以下代码是请求处理request.js

request.js

url:请求服务器路径;value:需要发送给服务器的数据;method:请求方式;options的使用:导出Excel
export(data) {
return request(‘export’, data, ‘post’, {
responseType: ‘blob’
})
}
export(data) {
return request(‘export’, data, ‘get’, {
responseType: ‘blob’
})
}

javascript">// 适配器, 用于适配不同的请求方式, 默认请求方式为post请求
export const baseRequest = (url, value = {
   }, method = 'post', options = {
   }) => {
   
    // 拼接请求后端服务器接口的完整路径
    url = sysConfig.API_URL + url
    console.log(url)
    // 对 post、get 等方式进行分别处理
    if (method === 'post') {
   
       return service.post(url, value, options)
    } else if (method === 'get') {
   
       return service.get(url, {
    params: value, ...options })
    } else if (method === 'formdata') {
   
       // form-data表单提交的方式
       return service.post(url, qs.stringify(value), {
   
          headers: {
   
             'Content-Type': 'multipart/form-data'
          },
          ...options
       })
    } else {
   
       // 其他请求方式,例如:put、delete
       return service({
   
          method: method,
          url: url,
          data: value,
          ...options
       })
    }
} 

const service = axios.create({
   
    baseURL: '/api', // api base_url
    timeout: sysConfig.TIMEOUT // 请求超时时间
})  

// HTTP response 拦截器
service.interceptors.response.use(
    (response) => {
   
       // 配置了blob,不处理直接返回文件流
       if (response.config.responseType === 'blob') {
   
          if (response.status === 200) {
   
             return response
          } else {
   
             message.warning('文件下载失败或此文件不存在')
             return
          }
       }
       const data = response.data
       const code = data.code
       if (reloadCodes.includes(code)) {
   
          if (!loginBack.value) {
   
             error()
          }
          return
       }
       if (code !== 200) {
   
          const customErrorMessage = response.config.customErrorMessage
          message.error(customErrorMessage || data.msg)
          return Promise.reject(data)
          // 自定义错误提示,覆盖后端返回的message
          // 使用示例:
          // export function customerList (data) {
   
          //   return request('list', data, 'get', {
   
          //     customErrorMessage: '自定义错误消息提示'
          //   });
          // }
       } else {
   
          // 统一成功提示
          const responseUrl = response.config.url
          // 如果访问路径包含(注意是包含,不是一定得是这个单词&#

http://www.niftyadmin.cn/n/5366571.html

相关文章

Centos7.9安装SQLserver2017数据库

Centos7.9安装SQLserver2017数据库 一、安装前准备 挂载系统盘 安装依赖 yum install libatomic* -y 二、yum方式安装 # 配置 yum 源 wget -O /etc/yum.repos.d/mssql-server.repo https://packages.microsoft.com/config/rhel/7/mssql-server-2017.repoyum clean all yum…

力扣383-赎金信

赎金信 题目链接 解题思路 统计magazine中字符出现的字符,用哈希表保存遍历ransomNote,记录其中出现的字符,出现一次,哈希表删除对应的字符遍历哈希表,如果有的字符出现的次数为负数,则不能拼凑出目标字符…

OpenGL的着色器内存访问

着色器内存访问 Shader Memory Access 着色器在高度流水线化的系统中执行时,由于其读写操作的顺序在很大程度上未定义,可能会引发排序和同步问题。 着色器内存访问顺序: 对于顶点着色器和细分评估着色器,尽管对于应用程序指定的每…

Jgit Packfile is truncated解决方案

配置方式解决 这两个配置选项是用于提高 SSH 连接稳定性的 SSH 客户端配置参数,它们被添加到 SSH 配置文件(通常是 ~/.ssh/config)中。这些参数有助于在网络不稳定或者长时间无数据交换时保持 SSH 连接不被断开。下面是每个参数的具体作用&am…

docker compose安装minio

要使docker-compose管理的容器(如MinIO)在系统启动时自动启动,你需要使用Docker的重启策略。在你的docker-compose.yml文件中为MinIO服务添加restart策略即可实现这一目标。restart: always指令确保了在容器退出时总是重新启动容器&#xff0…

艺术创作和生活的关系

艺术出现在生产劳作中并体现出人们生活、工作、学习中,使人们在不受限制随意发挥缔造发明能力的体现,独立的精神活动领域在它逐渐演变进步的历程中越来越明显,也是一个人精神思想生活中很重要的一部分。艺术随着社会发展而发展。一件完美的艺…

10英寸安卓车载平板电脑丨ONERugged车载工业平板:解决农业工作效率

农业是人类社会的基石之一,而农业工作效率的提升一直是农民和农业专业人士关注的重要议题。随着技术的不断进步,车载工业平板成为了解决农业工作效率的创新解决方案。本文将探讨车载工业平板如何为农业带来巨大的改变,提高农民的工作效率和农…

Node.js+Express+Mysql服务添加环境变量

1、使用dotenv插件 1)安装插件:npm install dotenv-cli --save-dev 2)在项目根目录下添加对应的 .env 配置文件; // .env配置文件内容 MODEdevelopment, BASE_URLhttp://127.0.0.1:80813) 在启动命令中设置对应的加载文件&#…