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状态