• async await 初步学习


    最近项目涉及到一个需求,两个异步请求,第二个请求需要等到第一个异步请求里的数据返回后才能发送,于是这里初步用到了async / await 。现在记录下

    async/await 语法可以更舒适的与promise协同工作。

    async 被放置在一个函数的前面(函数前面的async一词意味着这个函数总是返回一个promise,如果代码中有return <非promise>语句,JavaScript会自动把返回的这个value值包装成promise的resolved值。)

    async function f() {
      return 1
    
    }
    console.log(32,f()) //返回的是一个Promise对象
     

     关键词await可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。

    // 只能在async函数内部使用
    let value = await promise

    async function f() {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => resolve('done!'), 1000)
        })
        let result = await promise // 直到promise返回一个resolve值(*)
        alert(result) // 'done!' 
    }
    f()
    
    

    await 字面上使得JavaScript等待,直到promise处理完成,

    这里再加入一个新用上的知识点  try / catch 

    如果一个promise正常resolve,那么 await 返回这个结果,但是在reject的情况下会抛出一个错误,就好像在那一行有一个throw语句一样。

    在真实的使用场景中,promise在reject抛出错误之前可能需要一段时间,所以 await 将会等待,然后才抛出一个错误。
    我们可以使用try-catch语句捕获错误,就像在正常抛出中处理异常一样:

    async function f() {
        try {
            let response = await fetch('http://no-such-url')
        } catch (err) {
            alet(err) // TypeError: failed to fetch
        }
    }
    f()

    如果我们不使用try-catch,然后async函数f()的调用产生的promise变成reject状态的话,我们可以添加.catch去处理它:

    async function f() {
        let response = await fetch('http://no-such-url')
    }
    // f()变成了一个rejected的promise
    f().catch(alert) // TypeError: failed to fetch

    放在一个函数前的async有两个作用:
    1.使函数总是返回一个promise
    2.允许在这其中使用await

    promise前面的await关键字能够使JavaScript等待,直到promise处理结束。然后:

    1.如果它是一个错误,异常就产生了,就像在那个地方调用了throw error一样。
    2.否则,它会返回一个结果,我们可以将它分配给一个值

    该资源来自于https://segmentfault.com/a/1190000013292562?utm_source=channel-newest

  • 相关阅读:
    在C++中,子类重载一个操作符时,如何调用父类被重载的操作符函数
    基于AT89C51单片机的贪吃蛇电子游戏(仿真)
    七种机器内部排序的原理与C语言实现,并计算它们的比较次数与移动次数。
    使用java反射机制编写Student类并保存
    SqlServer2012导入Oracle详细案例
    TableLayoutPanel 的使用
    windows 10 & Office 2016 安装
    用过的手机集合
    windows 7 语言切换 Vistalizator
    ALV报表的颜色设计(行、列、单元格)
  • 原文地址:https://www.cnblogs.com/feijiediyimei/p/10943143.html
Copyright © 2020-2023  润新知