笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑
|
1 2 3 |
在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 |
这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出在我的格式上面 其实是支持两种调用方式：1 字符 2 函数体（文章解决方式） 解决方法如下： 1、定义一个_this暂存this 2、再改变变量的值，则生效啦 3、方法中将this存在变量_this中，此时执行setTimeout函数时，setTimeout函数内的_this就会访问到这个变量，就会得到当前对象。
|
1 |
|
1 |
注意⚠️: 当在vue中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。拓展知识：解决vue在setTimeout内修改this失效的问题 要想setTimeout指向正确的值，可以使用如下方法： 1、使用箭头函数
|
1 2 3 4 5 6 7 8 9 |
export default { methods: { start: function () { setTimeout(() => { this.end()//娃娃消失 }, 4000); } } } |
此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。 码字不易，对大家有用最佳 from:https://blog.csdn.net/qq_27295403/article/details/83375574
View Details概述 我正在开发的项目前端和后端是完全独立的，通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务。昨天发现，我前端执行 post 请求，后台 springmvc 的 @RequestMapping 接收不到对应的请求参数。开始我以为是我 proxy 配置有问题，导致 post 参数不能传到后台。然而，并不是这样… proxy 配置如下： 前端代码： java 后台代码： Request Payload VS Form Data 前端请求 我看了前端发起的请求，请求正文并不是我熟悉的 Form Data，而是 Request Payload。如图注意下面两个请求的 Content-Type 的区别。 Request Payload 请求 Form Data 请求 了解这两个的区别之前，我们先回顾下 HTTP 请求报文格式： Request Payload 大概格式如下，请求头部的 Content-Type: application/json，并且请求正文是一个 json 格式的字符串 Form Data 大概格式如下，请求头部的 Content-Type: application/x-www-form-urlencoded，并且请求正文是类似 get 请求 url 的请求参数 后台处理 对于 Request Payload 请求， 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容 对于 Form Data 请求，无需任何注解，springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean，且通过 request.getParameter(…) 能获取请求参数 解决方案 综上，我在前端选择使用 Form Data 的方式来发起请求，使用 qs 库将 json 对象转化为字符串 (如 {name:’dahuang',age: 11} 转化为 name=dahuang&age=11)。 之前我以为 axios 会自动根据你的请求正文格式来选择发起 Form Data 还是 Request Payload 请求，但是执行 delete 操作时，如图的 Content-Type 却是 text/plain […]
View Details一般使用axios进行数据请求就是要使用异步请求，因为项目需求，需要同步请求，所以async+await了解一下: async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用 基本用法就是这样的：
|
1 2 3 4 5 |
methods: { async funA(){ var res = await axios.post('') //这里的res就是axios请求回来的结果 } } |
我这边是用在项目里的 common.js
|
1 2 3 |
async addImg(file, config) { return await axios.post(path.addImage, file, config); } |
vue页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
methods:{ async upload() { var self = this; var formData; for (let i = 0; i < this.imgList.length; i++) { const img = this.imgList[i]; formData = new FormData(); formData.append("file", img); formData.append("type", "goods_grade"); console.log(formData.getAll("file")); await this.$api.common .addImg(formData, { headers: { "Content-Type": "multipart/form-data" } }) .then(res => { if (res.data.code == 200) { this.$message({ type: "success", message: "添加成功" }); this.uploadSuccess = true; this.childrenImgs.push(res.data.result); this.$emit("change", this.childrenImgs); } else { this.$message({ type: "warning", message: res.data.message }); } }); } } } |
注意事项 如果同步请求是封装在其他函数中，那么每一个函数都需要做成异步函数。如下所示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
methods: { fun1: async function () { await axios.get('url) }, fun2: async function () { ... await this.fun1() ... }, fun3: async function () { ... await this.fun2() ... }, } |
from:https://blog.csdn.net/liuy_1314/article/details/98483792
View Details