promise，async await，try catch的问题整理

promise

1.回调地狱

var sayhello = function (name, callback) {
  setTimeout(function () {
    console.log(name);
    callback();
  }, 1000);
}
sayhello("first", function () {
  sayhello("second", function () {
    sayhello("third", function () {
      console.log("end");
    });
  });
});
//输出： first second third  end
一般回调超过五层，人类就无法理解这个代码
回调地狱：回调套回调套回调套回调

2.promise 用法

function say(num){
    return new Promise(function(resolve,reject){
        if(num===1){
            resolve()
        }else{
            reject()
        }
    })
}

say(1)
  .then(()=>{console.log('success fn')},
    ()=>{console.log('fail fn')})

随机筛子函数
function fn(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
       let n = parseInt(Math.random()*6+1,10) // 1~6
       resolve(n)
    },3000)
  })
}
fn()
  .then(
    (x)=>{console.log('筛子的点数:'+x)},
    ()=>{console.log('摇色子失败')})

---

async await (ES8)

• async 和 promise 有关，可以和promise结合在一起用
• async 会返回一个隐式的promise
• async 可以让异步代码更像同步代码

随机筛子函数
function fn(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
       let n = parseInt(Math.random()*6+1,10) // 1~6
       resolve(n)
    },3000)
  })
}
async function test(){
  let n = await fn()
  console.log(n)
}
test()  ** 3s之后随机打出一个1~6 数字

不使用 async和await  会打印出 undefined

---

try catch

function fn(isBig){
    return new Promise((resolve,reject)=>{
        console.log('开始掷骰子，请等待...')
        setTimeout(()=>{
            let n = parseInt(Math.random()*6+1,10)
            if(n>3){
                if(isBig==='大'){
                    resolve(n)
                }else{
                    reject(n)
                }
            }else{
                if(isBig==='小'){
                    resolve(n)
                }else{
                    reject(n)
                }
            }
        },1000)
    })
}

async function test(){
    try{
        let n = await fn('大')
        console.log('赌对了',n)
    }catch(error){
        console.log('赌错了',error)
    }
}

test()

思考：为什么需要async await?
promise 格式优美还可以连环调用

fn('大').then(f1,f2).then(f3,f4)

因为更像是标准的同步函数

链式调用

先调用p函数，
.要么调用f1;要么调用f2
.f1,f2都没报错，都会执行f3
.f1或f2报错了，会执行f4

总结：
promise 完全不知道顺序，对大脑要求高
async await try catch 就两个分支，看起来比较明显

同时调用两个函数 Promise.all

发现await的局限性了，await只能接一个promise 不能接两个promise

1.promise 调用两个函数的办法
//接受一个数组，数组每个函数会返回一个promise
function fn(isBig){
    return new Promise((resolve,reject)=>{
        console.log('开始掷骰子，请等待...')
        setTimeout(()=>{
            let n = parseInt(Math.random()*6+1,10)
            if(n>3){
                if(isBig==='大'){
                    resolve(n)
                }else{
                    console.log('error')
                    reject(n)
                }
            }else{
                if(isBig==='小'){
                    resolve(n)
                }else{
                    console.log('error')
                    reject(n)
                }
            }
        },1000)
    })
}

Promise.all([fn('大'),fn('大')])
  .then((x)=>{console.log(x)},(y)=>{console.log(y)}) // 前面成功函数会在所有情况都成功的情况下才会执行；后面函数只要任何一个出错

2.await
async function test(){
  try{
     let n = await Promise.all([fn('大'),fn('大')])
     console.log('赌对了',n)
   }catch(error){
     console.log('赌错了',error)
   }
}

test()

Promise.race

Promise.race和Promise.all正好相反
Promise.all是两个都成功，才算成功
Promise.race两个只要有一个成功了，就算成功

感觉：await 像是promise 的语法糖，让promise更好用一点，更同步一点
async 就是为了标记函数，async function 实际是一个声明，声明函数是异步函数
function 也是一个声明，声明同步函数