一、当看见这个标题时,你可能第一时间以为我是个傻子吧,for循环不就是等循环结束了再向下执行吗?
答:话不要说的太绝对哦,比如,循环里面包的是异步操作,像axios等,这种情况下,for循环的执行顺序就有问题了,它不会等异步结束后在执行,而是直接开始向下执行。
二、我怎么发现的?
答:好不容易走通vue前端直传文件到阿里云(第一篇文章有实现说明),我老大又让我实现多文件上传,为了功能更丝滑,所以不得不尝试,一尝试就出问题了,因为elemen-ui的upload自定义上传,上传几次调用几次方法,这样的话,每个文件上传返回的结果都要存到数据库,存数据库也需要调用axios,所以就起冲突了,没等我阿里云返回图片路径,就直接存数据库了,情况就是这个么个情况!
三、解决方法
答:将element-ui的upload自定义上传事件获取到的值存到一个新数组,这样的话,不管执行几次,都只会存到一个数组里,然后再用for循环遍历这个数组,实现多个文件的上传,将上传文的返回结果存放到要提交数据库的那个数组里,(
这个for循环是重点,也是本文核心
)
,
这样的话,就可以一次axios请求直接将包含文件路径的数组提交到数据库,不对,好像我说跑题了,言归正传,看代码吧还是:
//运用es6的方法,按这个方法就能等所有异步结束之后,再向下执行
// 接收上传图片的信息,循环遍历
async aliPublish(items){
for(let i = 0;i<items.length;i++){
let objName = getFileNameID() + getFileName(items[i].file.name);
let result = await client.put(`pics/${objName}`, items[i].file)
// console.log(result,'res')
if(result.res.status == 200){
self.form.images.push(result.url)
} else {
self.$message.error('图片上传失败!')
return
// 等待循环结束,开始发布
self.StartPublish()
我这么胡咧咧也不知道有没有帮到各位,没办法,语文不好,不懂得可以私信我,我看见就回,不为别的,只是记录一下经历!让我们不断学习,不断进步!
通过clearTimeout来清除定时器,for循环执行结束之后执行setTimeout中的内容。因为执行的方法可能数据还没有彻底更新完,所以需要在彻底执行完for循环后执行方法。
首先for循环属于一个循环体,不是函数,所以没有函数作用域,里面的执行条件所处的作用域和外部所属同一个。
for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
1、break,只结束当前循环结构的循环,比如两个for循环,单个循环结构,后续的循环语句不再执行
2、continue,只结束满足条件的循环,后续循环继续执行
知识点:async 是“异步”的简写,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成,并且await 只能出现在 async 函数中,否则会报错。async作用:当调用一个 async 函数时,会返回一个 Promise 对象。当这个 async 函数返回一个值时,Promise 的 resolve 方法会负责传递
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。
ES6 Promise 先拉出来遛遛
复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?...
forEach的异步问题,要等forEach里的接口返回结果放到数组中再进行下一步请求数据
this.ipList=[]
this.checkedList.forEach(item=>{
api.selectCode({code:item}).then(res=>{
if(res.data.reply.returnCode.type!="S") return this.$message.error
break语句:表示出停止,直接跳出for循环,直接到for循环后面的代码,此处跳到了return 0;如果a==1只执行一次,a++每次都执行,那么可不可以把a==1放在循环外,a++放在循环体中呢,continue语句: 跳过当前循环,执行下一次循环。这里是跳过5,然后其余正常继续。表达式1:设置初始条件,只执行一次,可以为多个变量设置初始值。表达式2:循环条件表达式,判断是否集训循环。表达式3:执行循环体后再执行。将表达式1和表达式3移除,""内的分号也不能去掉。