js实现简单轮询

业务场景:

前端上传图片文件, 后台异步调用第三方上传文件接口返回文件id, 并存入redis中, 前端上传成功后轮询去调用接口查看文件id是否存入缓存中, 获取到则赋值,获取不到继续轮询,超过一定轮询时间后报错结束轮询

 以上截图展示文件上传成后开始轮询调用查询文件id接口,效果实现。

代码实现（主要展示前端代码）：

1.我是上传图片的业务所以先展示上传组件代码

 提供代码CV

<div class="avatar-uploader-box">
                <el-upload class="avatar-uploader" action="/mall/file/uploadGetFileId?dir=mall/shopInfo/"
                  :before-upload="beforeAvatarUpload"
                  :show-file-list="false"
                  :accept="accept"
                  :headers="{ 'Authorization': headers.Authorization }"
                  :on-success="handleReceiverCertSuccess"
                  v-loading.fullscreen.lock="tableLoading"
                  element-loading-text="拼命上传中,请等待..."
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0,0,0,0.8)">
                  <img v-if="subjectInfo.receiverCert" :src="subjectInfo.receiverCert" class="avatar">
                  <span v-else class="el-icon-plus avatar-uploader-icon"></span>
                </el-upload>
              </div>

2.展示文件上传成功后钩子函数里的代码

 

js代码逻辑解释(建议看图片就行, 下面文字用来增加文本索引用的):

2.1因为我的上传图片组件可以支持修改, 所以为了避免影响后面的赋值判断所有只要是上传就先清空.

2.2定义一个轮询终结时间, 如果15秒后未获取到结果则结束轮询

2.3定义轮询任务, 固定写发setInterval()函数传入两个参数, 一个是需要轮询执行的代码逻辑, 另外一个是间隔时间,我这里是2秒执行一次, 返回值是这个timeId是这个任务Id,业务逻辑是查看文件Id是否返回, 已经返回直接该任务, 没有的话继续调用后台接口获取, 调用之前之前判断是否超过设定时间, 超过后则通过this.$set方法将原来上传成功的文件路径去除, 表示改文件上传失败, 需要重新上传

2.4通过clearInterval(timeId)将这个轮询任务结束

2.5调用获取文件