• 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

  • 相关阅读:
    sqlite3中给表添加列
    webpack打包后服务端__dirname失效问题
    nodejs查看本机hosts文件域名对应ip
    vscode远程调试node服务端
    git 删除错误commit
    npm安装模块没有权限解决办法
    node gyp编译所需要的环境
    npm和yarn的淘宝镜像添加
    笨办法学Python 笔记
    梯度下降法优化线性回归算法参数
  • 原文地址:https://www.cnblogs.com/feijiediyimei/p/10943143.html
Copyright © 2020-2023  润新知