3-3 Promise静态方法

36 阅读2分钟

Promise的强大之处不仅仅是可以解决回调地狱的问题,还可以处理多个并发的请求

Promise是对于异步状态进行一个管理,是可以用来解决异步的问题的

Promise.resolve()

用来展示成功的状态

let p1 = Promise.resolve('success')
console.log(p1)
p1.then(res => {
  console.log(res)
})

Promise.reject()

用来展示失败的状态

let p2 = Promise.reject('fail')
console.log(p2)
p2.catch(err => {
  console.log(p2)
})

实例

function foo(flag){
  if(flag){
    reject new Promise(resolve => {
      // 异步操作   ...
      resolve('success')
    })
  } else {
    // return 'fail'
    return Promise.resolve('fail')
    // return Promise.reject('err fail')
  }
}
foo(true).then(res => {
  console.log(res)  // success
})

foo(false).then(res => {
  console.log(res)  // fail
}, err => {
  console.log(err) // err fail
})

当这三个异步操作执行结束之后再执行下一步

let p1 = new Promise((resolve, reject) => {
  setTimeout(()=>{
    console.log(1)
    resolve('1成功')
  }, 1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(()=>{
    console.log(2)
    resolve('2成功')
    // reject('2失败')
  }, 2000)
})

let p3 = new Promise((resolve, reject) => {
  setTimeout(()=>{
    console.log(3)
    resolve('3成功')
  }, 3000)
})

Promise.all()

  • 后面是一个数组,数组里面的每一个内容都是一个Promise对象,表示的是里面所有的内容都执行成功的时候它才会执行
Promise.all([p1, p2, p3]).then(res => {
  console.log(res)  // ['1成功', '2成功', '3成功']
}, err => {
  conosle.log(err) // Promise.all() 只要有一个失败的,它就认为整个都是失败的
})

Promise.race()

  • 跟Promise.all()的区别是 当下面的进程有一个是完成的,它就认为整个都完成了
Promise.race([p1, p2, p3]).then(res => {
  console.log(res)  // 1成功 
}, err => {
  conosle.log(err) // 只要有一个失败的,就认为整个都是失败的
})
  • Promise.all() 实例:
const imgArr = ['1.jpg', '2,jpg', '3.jpg']
let promiseArr = []
imgArr.forEach(item => {
  promiseArr.push(new Promise((resolve, reject) => {
    // 图片上传的操作
    resolve()
  }))
})
Promise.all(promiseArr).then(res => {
  // 插入数据库的操作
  console.log('图片全部上传完成')
})
  • Promise.race() 实例
function getImg(){
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = function(){
      resolve(img)
    }
    img.src = 'xxx.jpg'
  })
}
function timeout(){
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      reject('图片请求超时')
    },2000)
  })
}
Promise.race([getImg(), timeout()]).then(res => {
  console.log(res)
}).catch(err=> {
  console.log(err)
})
  • 如果图片地址是个正确的地址的话,那么getImg就会先执行输出,如果图片地址错误的话就会执行下面的输出,达到一个超时或者计时的目的