回调地狱挖坑 - async/await???

之前写了Promise解决回调地狱的问题,现在来看看async/await来解决回调地狱问题,听大佬说这个是Promise的升级版
我们先看一组函数:

function Test() {
    setTimeout(function () {
      let name = '测试'
      console.log(name)
    }, 1000)
  }
  function Test2() {
    let name = Test()
    console.log('我后执行')
  }
  Test2()

展示结果:

我们发现先执行了Test2()后才执行Test()
我们再用async/await改一下看看:

function Test() {
    setTimeout(function () {
      let name = '测试'
      console.log(name)
    }, 1000)
  }
  async function Test2() {
    await Test()
    console.log('我后执行')
  }
  Test2()

展示结果:

结果没有变,不是说async/await可以解决异步回调吗?开始查资料,看看async和await到底是什么鬼?
通过打印Test(),我们看下结果:

async function Test() {
    await setTimeout(function () {
      let name = '测试'
      return name
    }, 1000)
  }
console.log(Test())

结果展示:

我们发现async返回了一个Promise对象,所以这样我们可以通过then来获取结果值,现在获取结果看一下:

Test()
    .then(res => {
        console.log(res)
    })

展示结果:

我们发现结果是undefined,???,await等待究竟是什么?我们现在再写一个

function Test() {
    return new Promise(resolve => {
      setTimeout(function () {
        let name = '测试'
        resolve(name)
      }, 1000)
    })
  }
  async function Test2() {
    await Test()
      .then(res => {
        console.log(res)
      })
    console.log('我后执行')
  }
  Test2()

结果展示:

我们发现当await后面返回一个Promise对象时,能够打印出来结果,而且,是先打印await后面的的值,再执行后面数据,当然,await后面其他返回值也没关系,只是会立即执行,不过那样就没有意义了…
await必须是在async函数里面,是根函数,即使async函数里面有个函数,在这个函数里面写await也是没有效果的
async/await
async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
await只能用在async函数之中,用在普通函数中会报错。
await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中
看下下面的代码:

function first() {
    return new Promise(resolve => {
      setTimeout(function () {
        let num = 0
        resolve(num)
      },10000)
    })
  }
  function second(data) {
    return new Promise(resolve => {
      setTimeout(function () {
        data++
        resolve(data)
      })
    },5000)
  }
  function third(data) {
    return new Promise(resolve => {
      setTimeout(function () {
        data++
        resolve(data)
      }, data)
    },1000)
  }
  async function Test() {
    try {
      let s1 = await first()
      console.log(s1)
      let s2 = await second(s1)
      console.log(s2)
      let s3 = await third(s2)
      console.log(s3,s2,s1)
    }
    catch (err) {
      console.log(err)
    }
  }
  Test()

展示结果:是同时打印出来的,等待了10s,并不会逐一打印

猜你喜欢

转载自www.cnblogs.com/zjh-study/p/10650046.html
今日推荐