Promise是JS中一种异步编程的解决方案, Promise用来解决回调地狱的问题

Promise的优势是使用一种同步的方式来实现异步编程

Promise是一个构造函数,它是一个容器,里边封装了异步操作

const p=new Promise((resolve,reject)=>{
  resolve(data)         // 异步操作成功就调用resolve;
  
})

promise使用

.then方法有两个参数,第一个是成功的回调,第二个是失败的回调

promise对象有.then方法,可以用来传递回调函数

p.then(function(){
  console.log('异步操作成功了',data)
})

promise调用的回调函数  方式1

const p=new Promise((resolve,reject)=>{
resolve('出错了')
})
 p.then(
function(data){ console.log(
'异步操作成功了',data)})
.
catch(function(err){console.log('异步操作失败了',err) })

promise调用的回调函数  方式2

const p=new Promise((resolve,reject)=>{
  reject('出错了')
})
p.then(
  function(data){ console.log('异步操作成功了',data) },
function(err){ console.log(
'异步操作失败了',err) })

 

使用promise方法封装ajax请求

function ajax(option){
return new Promise((resolve,reject)=>{
  let xhr=new XMLHttpRequest()
  xhr.open(option.type,option.url)
  xhr.send(null)
  xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
      if(xhr.status===200){
        resolve(xhr.response|ext)
      }else{
        reject()
      }
    }
  }
})
}

使用promise封装一个方法

function timeout(time){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
  resolve()
    },time)
  })
}
timeout(5000).then(function(){
  console.log('5s后执行的操作')
})

.then的连写方法,需要在回调函数中,返回一个新的promise对象

function timeout(time){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
  resolve()
    },time)
  })
}
timeout(1000).then(function(){
  console.log('1s后执行的操作')
  return  timeout(1000)
}).then(function(){
  console.log('2s后执行的操作')
  return  timeout(1000)
}).then(function(){
  console.log('3s后执行的操作')
} 
)

promise的静态方法

promise.all 在所有的promise异步操作完成之后,执行某个任务,就可以使用

function timeout(time){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      console.log(time+'异步操作完成了')
  resolve()
    },time)
  })
}
 let arr=[timeout(1000),timeout(3000),timeout(5000)]
Promise.all(arr).then(function(){
  console.log('所有的异步操作完成了')
})

promise.race 在第一个promise异步操作完成之后,就执行某个任务

function timeout(time){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      console.log(time+'异步操作完成了')
  resolve()
    },time)
  })
}
 let arr=[timeout(1000),timeout(3000),timeout(5000)]
Promise.race(arr).then(function(){
  console.log('某个的异步操作先完成了')
})

 

posted on 2019-09-29 15:56  宅到深夜  阅读(233)  评论(0)    收藏  举报