2020.9.24陈悦玲

JavaScript中的解决异步操作的promise

  1. 什么是promise?
    话不多说,我们直接来看下面的案例
setTimeout(function(){
    console.log("第一个");
},3000)
setTimeout(function(){
    console.log("第二个");
},2000)
setTimeout(function(){
    console.log("第三个");
},1000)

//最后会输出 第三个、第二个、第一个

我们会发现我们的定时器从下往上进行执行了,这算是由于我们的js运行机制是单线程

咱们来解决异步:第一种:回调函数

//接力跑:第一个人开枪就跑,2s后,第二个人开始跑,再2s后,第三个人开始跑,2s后,比赛结束
function one(next){
    console.log("开始比赛")
    console.log("one start run")
    setTimeout(function(){
        next()
    },2000)
}
function two(next){
    console.log("one end")
    console.log("two start run")
    setTimeout(function(){
        next()
    },2000)
}
function three(){
    console.log("two end")
    console.log("three start run")
    setTimeout(function(){
        console.log("比赛结束")
    },2000)
}
one(function(){
    two(function(){
        three()
    })
})

以上便是 回调地狱 (callback hell)

第二种:promise
promis的实例

//通过new创建promise的实例化对象
//在promise的传递参数中,有两个参数
//resolve 当resolve 执行成功后,会找到then中的第一个参数
//reject 当reject 执行成功后,会找到then中的第二个参数
var pro = new Promise(resolve,reject)=>{
    setTimeout(function(){
        if(false){
            resolve("我是陈小玲玲")
        }else{
            reject("我是大镁铝")
        }
    },1000)
})
//resolve就是我们程序成功后调用的方法
//then里面的第一个参数就是我们成功后要调用的函数
//reject就是我们程序失败后调用的方法
//then里面的第二个参数就是我们失败后要调用的函数
pro.then(function(data){
    console.log("ok");
    console.log(data)
},function(err){
    console.log("no");
    console.log(err)
})

用then和catch//一般习惯用then收成功 用catch收失败

var pro = new Promise(resolve,reject)=>{
    setTimeout(function(){
        if(false){
            resolve("我是陈小玲玲")
        }else{
            reject("我是大镁铝")
        }
    },1000)
})
pro.then(function(data){
    console.log("ok");
    console.log(data)
}.catch(err){
    console.log("no");
    console.log(err)
}))

案例:

function one(){
    return new Promise(
        function(next){
        console.log("开始比赛")
        console.log("one start run")
        setTimeout(function(){
            next()
        },2000)
    })
}

function two(){
    return new Promise(
        function(next){
        console.log("one end")
        console.log("two start run")
        setTimeout(function(){
            next()
        },2000)
    })
}

function three(){
    return new Promise(
        function(next){
        console.log("two end")
        console.log("three start run")
        setTimeout(function(){
            console.log("three end")
            console.log("比赛结束")
        },2000)
    })
}
one().then(two).then(three)

不知道大家看懂了没有 用promise就是让他按照顺序向下执行 不会存在异步执行

  • 前后两个异步任务进行传参
function f1(){
      return new Promise(function(){
        var dao="到";
        console.log(`陈小玲玲说${dao}`);
        //当陈小玲玲答完之后,陈大玲玲答到
        setTimeout(() => {
          f2(dao)
        }, 3000);
      })
    }
    function f2(say){
      console.log(`陈大玲玲说${say}`)
    }
    f1().then(f2)
}
  • promise.all 方法

等待最后一个执行完成后才输出

var p1 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p1")
        }, 2000);
      })
      var p2 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p2")
        }, 3000);
      })
      var p3 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p3")
        }, 1000);
      })
      promise.all([p1,p2,p3]).then(function(data){
        console.log(data)
      })
      //输出[“我是p1”,“我是p2”,“我是p3”]
      //只有当最慢(后)的那个执行完成之后,才会执行all 然后执行then 执行输出
  • promise.race 方法

只要有一个执行了就立即返回

 var p1 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p1")
        }, 2000);
      })
      var p2 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p2")
        }, 3000);
      })
      var p3 = new Promise((resovle,reject)=>{
        setTimeout(() => {
          resovle("我是p3")
        }, 1000);
      })
      promise.race([p1,p2,p3]).then(function(data){
        console.log(data)
      })
      //输出:我是p3
  • promise的参数其实就是一个函数,函数由两个回调函数resovle,reject
  • promise的三个状态:pending(挂起/等待)、fulfilled(成功)、rejected(失败)
  • 三个状态的切换:执行new promise()时,异步任务执行完成之前,promise对象处于pending状态

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1