Vue学习-Promise的使用

目录

• Promise的三种状态
• Promise的链式调用
• Promise.all的使用

Promise的三种状态

• pending：等待状态，如果正在进行网络请求，或者定时器没有到时间
• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝状态，当我们主动架回调了reject时，就处于该状态，并且会回调.catch()

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("成功了")
           reject("error message!")
     },1000)

}).then(data=>{
      console.log(data);
}).catch(error=>{
      console.log(error);
})

• 用一个then(函数1，函数2)的简单写法(没有catch函数),同上面效果一样。函数1是resolve的回调，函数2是reject的回调

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("成功了")
           reject("error message!")
     },1000)

}).then(data=>{
      console.log(data);
},err=>{
      console.log(err);
})

Promise的链式调用

• 第1次网络请求的结果，作为第2次网络请求的参数
  第2次网络请求的结果，作为第3次网络请求的参数

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("第1次成功了")
     },1000)

}).then(data=>{
      console.log(data)
      
      return new Promise((res,rej)=>{
            //发送第2次网络请求
            setTimeOut(function(){
                       resolve("第2次成功了")
               },1000)
      })
}).then(data=>{
      console.log(data)

      return new Promise((res,rej)=>{
            //发送第2次网络请求
            setTimeOut(function(){
                       resolve("第3次成功了")
               },1000)
      })
}).then(data=>{
       console.log(data)
 });

• 第1层请求后，第2层在第1层的结果上加aaa,第3层在第2层的结果上加bbb

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("第1次成功了")
     },1000)

}).then(data=>{
      console.log(data)
      
      return new Promise((res,rej)=>{
           resolve(data+"aaaa")
      })
}).then(data=>{
      console.log(data)

      return new Promise((res,rej)=>{
             resolve(data+"bbb")
      })
}).then(data=>{
       console.log(data)
 });

• 简写Promise.resolve

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("第1次成功了")
     },1000)

}).then(data=>{
      console.log(data)
      
      return Promise.resolve(data+"aaaa")
}).then(data=>{
      console.log(data)

      return  Promise.resolve(data+"bbb")
}).then(data=>{
       console.log(data)
 });

• 简写省略掉Promise.resolve，内部会封闭为一个Promise

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("第1次成功了")
     },1000)

}).then(data=>{
      console.log(data)
      
      return data+"aaaa"
}).then(data=>{
      console.log(data)

      return  data+"bbb"
}).then(data=>{
       console.log(data)
 });

• 简写Promise.reject或throw，内部会封闭为一个Promise

new Promise((resolve,reject)=>{
     
      //模拟网络请求
      setTimeOut(function(){
           resolve("第1次成功了")
     },1000)

}).then(data=>{
      console.log(data)
      
      //return Promise.reject(data+"error")
      throw data+"error"
}).then(data=>{
      console.log(data)

      return  data+"bbb"
}).then(data=>{
       console.log(data)
 }).catch(err=>{
       console.log(err)
});

Promise.all的使用

• 需求：2个请求后的结果都满足后，才继续往下执行
  Promise.all的第1个参数是一个Promise数组，里面可以放多个Promise.
  then方法的results也是一个数组，里面存放第个Promise的回调结果

     Promise.all([
      new Promise((resolve,reject)=>{
            $ajax({url:"url1",sucess:function(data){
                        resolve(data)
                  }})
        }),
      new Promise((resolve,reject)=>{
            $ajax({url:"url1",sucess:function(data){
                        resolve(data)
                  }})
        }),

      ]).then(results=>{
             //这里的results也是一个数组，results[0]是放的第1个Promise的结果 ，results[1]是放的第2个Promise的结果    
            console.log(results[0]);
            console.log(results[1]);
       });