vue中使用Promise.all发送多个请求

描述:要求两个请求同时有返回结果时再进行相关处理

方法一:

	getPromise1() {
      return this.$http.get("http://localhost:8080/hello.json").then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    getPromise2() {
       return this.$http.get("http://localhost:8080/hello2.json").then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    getAllPromis() {
      this.$http.all([this.getPromise1(),this.getPromise2()]).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },

vue中使用Promise.all发送多个请求_第1张图片

方法二

    getPromise1() {
      return this.$http.get("http://localhost:8080/hello.json")
    },
    getPromise2() {
       return this.$http.get("http://localhost:8080/hello2.json")
    },
    getAllPromis() {
      this.$http.all([this.getPromise1,this.getPromise2]).then(res=>{
        res.map(item=>{
          item().then(res=>{
            let {data} = res
            console.log(data)
          }).catch(err=>{
            console.log(err)
          })
        })
      })
    },

注意:以上两种写法其中任何一个请求错误也不会影响其他的请求,其他的请求仍然可以请求到成功的数据
以上方法返回的数据是单独的对象,因为每一个请求返回的都是一个promise,在每一个请求里面都去.then().catch会优先去走自身的,所以在all()里面打印出来是[undefined, undefined]
vue中使用Promise.all发送多个请求_第2张图片
如果想打印出来的数据是在一个数组对象,请看以下代码

 getAllPromis() {
  this.$http.all([this.getPromise1(),this.getPromise2()]).then(res=>{
     console.log(res)
   }).catch(err=>{
     console.log(err)
   })
   },
   getPromise1() {
     return this.$http.get("http://localhost:8080/hello.json")
   },
   getPromise2() {
     return this.$http.get("http://localhost:8080/hello2.json")
   },

vue中使用Promise.all发送多个请求_第3张图片

你可能感兴趣的:(vue,前端开发,vue)