vuejs学习5.4 ES6中的promise

promise的使用过程

//参数:函数(resolve, reject)
  //resolve, reject本身又是函数
  new Promise((resolve, reject)=>{
    //成功时调用resolve
    resolve()
  }).then( data =>{
    console.log('Hello world');
  })
new Promise((resolve, reject)=>{
    //失败时调用reject
    reject()
  }).then(data =>{
    console.log('Hello world');
  }).catch(err =>{
    console.log('err');
  })
new Promise((resolve, reject)=>{
    resolve()
  }).then(()=>{
    console.log('Hello world');
    return new Promise(((resolve, reject) => {
      resolve()
    }))
  }).then(()=>{
    console.log('Hello world');
  })

promise的三种状态

当开发中有异步操作时,就可以给异步操作包装一个promise,在异步操作之后有三种状态,
1,pending等待状态,比如正在进行网络请求,或者定时器没到时间
2,fulfill满足状态,当我们主动回调了resolve时,处于该状态,并且会回调.then()
3,reject拒绝状态,当我们回调了reject时,就处于该状态,并且会回调catch()

promise的链式调用

new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Hello ');
    },2000)
  }).then(res =>{
    console.log(res);
    return new Promise((resolve => {
      resolve(res+'world ')
    }))
  }).then(res=>{
    console.log(res);
  })

后面没有使用异步操作时可以简写

  new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Hello ');
    },2000)
  }).then(res =>{
    console.log(res);
    return Promise.resolve(res+'world ')
  }).then(res=>{
    console.log(res);
  })

可以继续简写

new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Hello ');
    },2000)
  }).then(res =>{
    console.log(res);
    return res+'world '
  }).then(res=>{
    console.log(res);
  })

reject简写

new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('Hello ');
    },2000)
  }).then(res =>{
    console.log(res);
    return Promise.reject(res+'world ')
  }).catch(res=>{
    console.log(res);
  })

all方法使用

Promise.all([
      new Promise(((resolve, reject) => {
        setTimeout(()=>{
          resolve('Hello1 ');
        },2000)
      })),
      new Promise(((resolve, reject) => {
        setTimeout(()=>{
          resolve('Hello2 ');
        },2000)
      }))
  ]).then(results =>{
    console.log(results);
  })

all方法:在内部多个异步请求全部完成后才会调用then(),可以实现多个请求完成才能实现的功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值