vue如何循环请求一个接口

 更新时间:2023年07月19日 16:59:18   作者:迷彩湃  
这篇文章主要介绍了vue如何循环请求一个接口问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue循环请求一个接口

最近在做一个项目时需要批量生成某些数据,这里就用到了循环请求一个接口,也是第一次使用这种方式。

可以利用 forEach 循环进行请求一个接口。

是根据时间段去批量生成的。

 packageSubmit(){
        const than=this
        than.timeSection.forEach((item,index)=>{ //循环请求的数据
          console.log(item)
          than.packageDatil.forEach((item2,i)=>{ // 循环请求的数据
            allSubmit({stationid:this.stationid,packageid:this.fromData.package, //接口携带上参数 这里最好利用计算属性处理一下,不然显得很长
          PlanDate:item,PlanTimeStart:item2.plantime,PlanTimeend: item2.timespan+item2.plantime-0,PlanNum: item2.plannum}).then(res=>{
            console.log(res)
            if(res.data.success==1){
              Toast('处理成功~')
              setTimeout(() => {
                //  this.$router.push({name:'schedul_set'})
              }, 0);
            }else if(res.data.success==0){
                Toast(res.data.msg)
            }
          }).catch(err=>{
            console.log('处理失败')
          })
          })

vue循环请求同一个接口,等接口返回数据之后在进行下次循环

async 方法名() {
      for (let i = 0; i < this.mlList.length; i++) {
        for (let j = 0; j < this.mlList[i].child.length; j++) {
          const res = await postapplicationJson(
            {
              id: this.$route.params.id,
              catalogID: value,
              parentID: this.mlList[i].id,
              childID: this.mlList[i].child[j].id
            },
            '/goods/across/syncCatalogAndGoods'
          )
          if (res.code == 1001) {
            this.loading = false
            this.$set(this.mlList[i].child[j], 'msg', '克隆成功')
          } else {
            this.$set(this.mlList[i].child[j], 'msg', res.msg)
            this.loading = false
          }
        }
      }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    这篇文章给大家介绍了Vue+Element UI el-tree树只能选择子节点并且支持检索的文章,通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • vue.js 嵌套循环、if判断、动态删除的实例

    vue.js 嵌套循环、if判断、动态删除的实例

    下面小编就为大家分享一篇vue.js 嵌套循环、if判断、动态删除的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3基础组件开发detePicker日期选择组件示例

    vue3基础组件开发detePicker日期选择组件示例

    这篇文章主要为大家介绍了vue3基础组件开发-detePicker(日期选择组件)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue element-ul实现展开和收起功能的实例代码

    vue element-ul实现展开和收起功能的实例代码

    这篇文章主要介绍了vue element-ul实现展开和收起功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • npm踩坑问题实战记录

    npm踩坑问题实战记录

    这篇文章主要给大家介绍了关于npm踩坑问题的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue3使用KeepAlive不生效的解决方法

    Vue3使用KeepAlive不生效的解决方法

    使用arco-design-pro的vue3后台框架, 切换路由时, 组件包裹的keepAlive不生效, 切换tab后组件状态会刷新, 并重新获取接口, 导致页面切换时闪烁,所以本文给大家介绍了Vue3使用KeepAlive不生效的解决方法,需要的朋友可以参考下
    2024-11-11
  • Vue动态获取数据后控件不可编辑问题

    Vue动态获取数据后控件不可编辑问题

    这篇文章主要介绍了Vue动态获取数据后控件不可编辑问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • uniapp 获取系统信息的方法小结

    uniapp 获取系统信息的方法小结

    uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息,系统信息返回的内容非常多,各操作系统、各家小程序、各浏览器对它们的定义也不相同
    2022-11-11
  • vue中子组件调用兄弟组件方法

    vue中子组件调用兄弟组件方法

    这篇文章主要介绍了vue中子组件调用兄弟组件方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论