vue项目封装axios请求

目录:
在这里插入图片描述

一,src/utils/request.js

import axios from 'axios'
import { getToken } from '@/utils/auth'
import store from '@/store'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,withCredentials: true,timeout: 5000,// headers:{ //     "Access-Control-Allow-Origin": '*',//     "Access-Control-Allow-Headers": 'Origin, Content-Type, X-Auth-Token',//     "Access-Control-Allow-Methods": "POST, GET, PUT, OPTIONS, DELETE" ,// },
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentif(store.getters.token == null){// 首次登录--固定头部内容config.headers.client_id = 'jeecp'config.headers.client_secret = 'webApp'}else{config.headers.Authorization = 'Bearer '+ token}// if(config.method == 'post' || config.method == 'put'){// 在每个请求中加 parkId// config.data['parkId'] = Cookies.get('parkId')// console.log(config)// }return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.data// return resif(res.code != 0){Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})// 报错--根据 code 处理console.log("请求报错啦: ", res)}else{// 成功return res}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

二,src/utils/api.js

import request from '@/utils/request'
import store from '../store'// post
export function getMessage(page, size, data) {return request({url: store.getters.gateway2 + '/admin/info_management/v1/page_information/' + page + '/' + size,method: 'post',data})
}export function getNoApprove(page, size, type, title, startTime, endTime) {return request({url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size,method: 'get',params: {type,title,startTime,endTime,issue: 1,examined: 0}})
}export function getMessageByIdToApprove(data, infoId) {return request({url: store.getters.gateway2 + '/admin/info_management/v1/confirm/',method: 'put',data,params:{infoId}})
}export function delUploadImg(url) {return request({url: store.getters.gateway2 + '/upload/delFile',method: 'delete',url})
}

注意

传的参数类型:

1,url
url: store.getters.gateway2 + '/informationAudit/list/' + page + '/' + size
2,params
params:{infoId
}
3,query
data,

三,调用接口

import { addMessage } from '@/api/message'addMessage(this.formData).then(res => {console.log("add", res)if(res.code === 0){this.$message({type: 'succees',message: '添加成功!'});}else{this.$message({type: 'error',message: '请求出错!'});}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自定义函数_python3基础07函数(自定义)

"pythonic生物人"的第43篇分享。详细介绍python中:自定义函数的构建;参数传递;模块中调用函数。目录0、楔子1、自定义函数格式2、编写函数说明文档3、函数参数函数形参和实参区别位置实参关键字实参默认实参让实参可选传递任意数量…

v-for中用elementUI实现分页

html 分页的内容 <el-aside style"width:49%;" v-for"(item, key, index) in AirInfor.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key"index"><p style"margin-bottom: 10px;"><span>区域&a…

curl -windows下接口通讯

1&#xff0c;下载curl -----url命令传输工具2&#xff0c;配置curl环境变量3&#xff0c;在cmd环境中使用举例&#xff1a;curl -G http://xxxxxxx.com&#xff1f;参数使用&#xff1a;curl -G "www.baidu.com" 最原始的批量通讯返回可以将通讯命令保存为bat格式文…

centos7建站php_centos7搭建php服务器

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":6,"count":6}]},"card":[{"des":"云服务器 ECS(Elastic Compute Service)是一…

vue项目实现登录(sessionStorage 存储 token)

前提参考&#xff1a;vue项目封装axios 思路&#xff1a; // 1, 前端校验&#xff0c;校验成功后向后台传用户名和密码&#xff08;每次请求接口都要传 token&#xff09; // 2&#xff0c; 后端收到请求&#xff0c;验证用户名和密码&#xff0c;验证成功&#xff0c;生成 to…

sqlserver 存储过程 C#调用 实现从数据库Get数据

在最近的项目中我想建立一个EFDBfirst的模型但是失败了&#xff0c;生成的edmx中没有实体类和表结构&#xff0c;到处需求解决方案&#xff0c;未果。 问题请见&#xff1a;https://q.cnblogs.com/q/102743/ 后来使用本文写的这个方法 /// 1.在sqlserver中建立存储过程 在一个d…

TIBCO BusinessWorks 6和Container Edition与BW5的比较

[本文已于一段时间前发布在TIBCO博客上 。 我还在适当的地方添加了有关BusinessWorks Container Edition&#xff08;BW CE&#xff09;的一些信息。 下面定义的大多数特性对于BW6和BW CE均适用。 TIBCO ActiveMatrix BusinessWorks 6&#xff08;BW6&#xff09;是一个现代化…

修改jwt过期时间_PostgreSQL如何修改用户过期时间

生产环境中&#xff0c;有时候需要设置一个有时效的临时帐户&#xff0c;供一段时间内&#xff0c;某些需要的使用&#xff0c;过期帐号自己禁用&#xff0c;但有时候因为更多的需求&#xff0c;需要对这种有过期时间的帐号进行延长过期时间&#xff0c;这时候就需要使用命令行…

vue使用echarts图表

https://www.jianshu.com/p/2894b781063b 1、安装 npm install echarts // npm install echarts --save2、引入 echarts import * as echarts from echarts;3、写一个div容器用来承载图表: <div id"teamLeader"></div>4、写一个方法&#xff0c;&am…

云计算入门

根据美国国家标准与技术研究院定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&#xff0c; 进入可配置的计算资源共享池&#xff08;资源包括网络&#xff0c;服务器&#xff0c;存储&#xff0c;应用软件&#xff0c…

20180105随笔

过滤器的执行过程&#xff1a;// 目标资源执行前执行chain.doFilter(request, response);// 目标资源执行后执行文件上传的前提&#xff1a;1.表单的method方法必须是post2.表单的enctype类型必须是&#xff1a;multipart/form-data3.表单中input的上传输入域为&#xff1a;<…

怎么自定义字体_自定义字体@fontface的常见应用

前言font-face允许网页自带字体&#xff0c;从而消除对用户电脑字体的依赖。基本用法如下&#xff1a;font-face { font-family: "family-name"; /* 字体名 */ src: url("family-name.eot"); /* IE9 */ src: url("family-name.eot?#iefix&q…

vue项目中使用mock(一)

一&#xff0c;安装 npm install mockjs --save-dev npm install json5 --save-dev npm install axios --save 二&#xff0c;每个文件内容 目录&#xff1a; 流程&#xff1a; Home.vue执行getUserInforList() 调用main.js中全局变量$api 调用/utils/api下的getUserInfo…

快速搭建redis单机版和redis集群版

单机版 第一步&#xff1a;需要安装redis所需的C语言环境&#xff0c;若虚拟机联网&#xff0c;则执行 yum install gcc-c 第二步&#xff1a;redis的源码包上传到linux系统 第三步&#xff1a;解压缩redis tar zxf redis的压缩文件 第四步&#xff1a;编译 &#xff0c;进入…

使用RxJava和Completable并行执行阻止任务

借助RxJava 1.1.1中引入的Completable抽象&#xff0c;如何并行执行阻止“仅副作用”&#xff08;也称为void&#xff09;任务的并行执行变得更加容易。 “ 正如您可能已经注意到&#xff0c;阅读我的博客时&#xff0c;我主要专注于软件Craft.io和自动代码测试。 但是&#x…

svn 回退到指定版本无法提交_SVN终端演练-版本回退

1. 版本回退概念以及原因?概念: 是指将代码(本地代码或者服务器代码), 回退到之前记录的某一特定版本原因: 如果代码做错了, 想返回之前某个状态重做;2. 修改了,但未提交的情况下, 回退代码方案1: (大力推荐)svn revert (作用:返回到上次提交后版本对应的最原始的状态)方案2: …

vue-awesome-swiper缩略图无法联动的问题

一&#xff0c;安装 npm install vue-awesome-swiper --save // npm install vue-awesome-swiper3.x --save我安装的版本是 “swiper”: “^6.6.1”, “vue-awesome-swiper”: “^3.1.3”, 在使用vue-awesome-swiper组件的时候&#xff0c;缩略图无法和大图实现联动&#xff…

个人博客13

今天的任务依旧为美化界面。 昨天的任务为美化界面。 遇到的问题为页面的布局&#xff0c;以及颜色的搭配。转载于:https://www.cnblogs.com/qilin20/p/8232942.html

tcp wireshark 过滤syn_使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

TCP 三次握手 示意图Wireshark 抓包注意事项为了演示一个TCP三次握手建立连接的过程&#xff0c;我们通过 Chrome 访问一个网页。已知 HTTP 协议就是建立在TCP链接上的通过 Cmd 的 ping 命令获取 这个网站对应的 IP地址 183.136.236.13确定 这个IP 有一个非常重要的好处&#x…

Python 基础函数

1.输入输出函数 input() 打印输出的内容后&#xff0c;接收输入用户输入的内容&#xff0c;默认为“字符串”类型 print() 打印输出的内容 2.类型转换函数 int() 转为整数 str() 转为字符串 3.类型判断函数 string.isdigit() 判断string是否为数字格式&#xff0c;返回布尔值 4…