分类：Axios

2020
10-10

Vue axios获取token临时令牌封装案例

前言为什么非要写这个博客呢？因为这件事让我有一种蛋蛋的优疼。剩下的都别问，反正问我也不会说。因为流程图我都不想（懒得）画。开发架构前端页面：Vue网络请求：Axios;方式：vueaddaxios缓存方案全局变量：Vuex本地缓存：LocalStorage技术依赖你猜？背景公司开发一个嵌入App的Web页面，安全方面使用老套路：App通过URL传参给前端（包含签名），前端把参数透传给H5后端验签，完事儿之后前端再决定用户是否合法。另外定义了N个J... 继续阅读 >

2020
10-10

vue全局使用axios的操作

在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入importVueResourcefrom'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。仔细看看文档，就知道axios是一个基于promise的HTTP库，axios并没有install方法，所以是不能使用vue.use()方法的。☞查看vue插件那么... 继续阅读 >

2020
10-10

Vue.js使用axios动态获取response里的data数据操作

今天开发时，使用axios返回的response中data有多个数据：如果是获取cn里的数据的，可以用：response.data.cn但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key:假设need是需要获取的某个keyconstdkey=this.need;response.data.dkey这样发现获取不到数据，这是因为vue.js把dkey当成data里的某一个key了，类似于上面的"cn"。折腾了很久才突然想起，这个data其实类似一个数组，我们可以... 继续阅读 >

2020
10-10

Vue axios 跨域请求无法带上cookie的解决

在main.js设置//携带cookieaxios.defaults.withCredentials=true补充知识：VUEaxios请求跨域时没有带上cookie或者每次cookie都改变这两天用VUE写管理后端时，碰到一个奇葩问题：我本地使用dev配置开发的时候请求可以带上cookie信息 打包出来部署在服务器上请求就没带上cookie信息。然后自己慢慢排查，联合后端同事，排查这个cookie问题，前端也配置了axios.defaults.withCredentials=true;后端也配置了跨域cookie，... 继续阅读 >

2020
10-10

解决vue中axios设置超时(超过5分钟)没反应的问题

（chrome环境）在做项目的时候，由于做大数据可视化界面，后台接口查询数据往往会比较久（上百万的数据量），导致vue项目axios请求超时timeout设置就比较大。开始设置超时未3分钟时没有问题（这里我设置超时弹窗了），可设置超时未6分钟时，却在五分钟左右弹出请求超时，但明明设置tiemout=6x60x1000。于是通过资料查询，了解到Chrome浏览器，默认请求超时为五分钟，所以导致上诉现象产生，可如何在vue中修改浏览器超时？直接上代... 继续阅读 >

2020
10-10

在vue中axios设置timeout超时的操作

在做vue项目的时候，由于数据量查询比较大，所以前台调用接口数据的时候，往往要等很久，所以需要设置个超时，当超过设置时间就让向页面返回一个状态，让使用者不用一直等。通过官网api查询，对其超时讲解不是很多，但其和Jquery中请求非常类似Jquery请求方式$.ajax({url:'接口地址',type:'get',//请求方式get或postdata:{},//请求所传的参数dataType:'json',//返回的数据格式timeout:4000,//设置时间超时，单位毫秒s... 继续阅读 >

2020
10-09

Vue中 axios delete请求参数操作

vue中axios的delete和post,put在传值上有点区别post和put有三个参数，url,data和config，所以在使用这两个时，可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数：url和config，data在config中，所以需要写成axios.delete(api,{data:{id:1}})如果是服务端将参数当作Java对象来封装接收则参数格式为：{data:param}varparam={id:1,name:'zhangsan'}this.$axios.delete("/ehrReferralObjPro",{data... 继续阅读 >

2020
10-09

Vue使用axios引起的后台session不同操作

新项目前端用的Vue全家桶，使用axios代替ajax请求后台接口，在调整注册接口的时候，发现在session里取不到验证码，排查后才知道获取验证码和注册两个请求的session不同，sessionId不一样。现在调整一下Vue的配置，修改main.js文件，添加如下两行代码importaxiosfrom'axios'axios.defaults.withCredentials=true;修改后importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importElementUIfrom'elemen... 继续阅读 >

2020
10-09

解决在Vue中使用axios POST请求变成OPTIONS的问题

POST请求变成OPTIONS及报错信息（跨域）主要解决方案：使用qs.stringify1、安装qsnpminstallqs--save2、axios配置和使用在接口请求页面引入安装好的qs，如下图：引入完成之后使用qs改变传递的参数data，如下：这样就可以了，post请求的时候就不会再出现OPTIONS了补充知识：axios发起请求，为什么先发送options请求，再发送get/post请求引起原因1，跨域；2，请求头非默认情况。默认请求头如下AcceptAccept-LanguageContent-Lang... 继续阅读 >

2020
10-09

vue axios封装httpjs,接口公用配置拦截操作

做一下记录，在vue项目中配置公用的请求https,(1)位置，在src中新建src/utils/http.jsimportaxiosfrom'axios'//引用axiosimport{MessageBox,Message}from'element-ui'importQsfrom'qs'//引入数据格式化importrouterfrom'@/router'//axios配置axios.defaults.timeout=50000//设置接口响应时间//axios.defaults.baseURL='https://easy-mock.com/mock/'//这是调用数据接口,公共接口url+调用接口名let... 继续阅读 >

2020
10-09

封装 axios+promise通用请求函数操作

我就废话不多说了，大家还是直接看代码吧~importaxiosfrom"axios";importbaseUrlfrom"../../setBaseUrl";axios.defaults.baseURL=baseUrl;import{Loading,Message}from"element-ui";constloadingOptions={lock:true,text:"拼命加载中",spinner:"el-icon-loading",background:"rgba(0,0,0,0.7)"};if(localStorage.token){axios.defaults.headers.common["x-token"]=localStorage.token;}constHtt... 继续阅读 >

2020
10-08

VUE使用axios调用后台API接口的方法

引言    Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。我们都知道VUE更多是注重前段用户界面的渲染合操作，但是如果想到实现前后端之间的交互调用后台API，就需要借助其他组件，如今天要讲到的Axios，下边就重点讲解axios在vue中的使用。 ... 继续阅读 >

2020
10-08

vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入vueｘ来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台api接口是使用webpack-server模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数... 继续阅读 >

2020
10-08

在vue-cli3中使用axios获取本地json操作

在vue-cli3中，公共文件夹由static变成了public先把要访问的json放到public文件夹下使用axios的get方法获取，不能用post，不然会报404axios.get(`./china-main-city/100000.json`).then((data)=>{console.log(data)})补充知识：两个不同的路由，引入相同的组件从不同的按钮进入到详情页,两个不同的路由,相同的组件主要是从不同按钮进入不同路由的页面,内容一致,但是title不一样,怎么写index.jsconstbusinessDet... 继续阅读 >

2020
10-08

VUE项目axios请求头更改Content-Type操作

我就废话不多说了，大家还是直接看代码吧~consthttpServer=(opts,data)=>{consttoken=localStorage.getItem('token')constPUBLIC=`?token=${token}`lethttpDefaultOpts=''varhost=`${process.env.HOST}`varprot=`${process.env.PORT}`varbase=host+(prot?":"+prot:"")if(opts.method==='post'){httpDefaultOpts={method:opts.method,url:`${base}${opts.url}${PUBLIC}`,h... 继续阅读 >

2020
10-08

vue+axios全局添加请求头和参数操作

走登录的接口都会返回一个token值，然后存起来方便之后调接口的时候给后台传过去，传给后台的方式有两种：（具体使用哪种需要和后台商量）1、放在请求头中2、放在接口的参数中1、放在请求头中下面代码是从本地cookie中拿tokenVueCookie：一个用于处理浏览器cookies的简单Vue.js插件.//在封装axios的文件中添加拦截器//添加请求拦截器，在请求头中加tokenservice.interceptors.request.use(config=>{//判断本地的cookie中是... 继续阅读 >