• async await 使用笔记


      JavaScript的网络请求是异步的,即网络请求不会阻塞当前 js 代码的继续执行,而是通过回调的方式,在网络请求的代码块中注入回调函数,当网络请求完成,会触发相应的事件,通过触发事件来执行注册的回调函数。回调的执行时间是不确定的,因此会影响程序的执行逻辑,另一方面,如果回调依赖过多,或导致很深的回调嵌套,使代码的可读性和可维护性降低。

      async await 是 es7 中的新语法,基于 promise,使异步调用扁平化。

      async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法异步执行完成。

    1 async function asyncFunctionName(){
    2 
    3     const response =await fetch(url,options);
    4 
    5     const result =await response.text();
    6 
    7     return JSON.parse( result );
    8 }

      asyncFunction 返回的返回值会通过 Promise.resolve()封装成 Promise 对象,通过 Promise.then()来获取return 的返回值。

      await 等待的是一个实际返回值,同时await 不仅仅用于等待 Promise对象,它可以用于等待任何表达式的返回,因此await后面实际是可以接普通函数的调用或者直接量的。如果await 等到的不是一个promise对象,那await 表达式后面的运算结果就是它等到的值;如果await 等到的是一个promise对象,await 就会阻塞当前 js 的继续执行,等着 promise 对象 reslove,得到 resolve 的值,作为await 表达式的运算结果。

      因为await 会阻塞代码的运行,所以await 必须放在async 函数体中,而async 函数的调用不会造成阻塞,它内部所有的阻塞都被封装在一个 promise 对象中异步执行。

      async await的优势对比promise在于处理then链。在async函数体中,可以把对异步返回值得处理程序放在 await 后面,程序会依次执行,可以像写同步代码一样写异步回调。

      注意点:await 等待的promise 对象,运行时可能会reject ,所以最好将await 放在 try{ } catch 代码块中。

      

     async ()=>{
        try{
            const response =  await  felch(url,options); 
        }catch(err=>{
            console.log(err)
        })
    }
    
    // 对比 promise 链式调用
        
        promise.then().catch() 

     

  • 相关阅读:
    从JavaScript的事件循环到Promise
    Vuex初识
    npm常用命令及版本号浅析
    npm install 时--save-dev和--save的区别
    Json-Server模拟数据接口开发
    基于Express+Socket.io+MongoDB的即时聊天系统的设计与实现
    fileInput实战总结
    找工作总结
    nodejs-基本语法
    初识nodejs
  • 原文地址:https://www.cnblogs.com/wust-hy/p/10500826.html
Copyright © 2020-2023  润新知