JS笔记 async 与 await

ES6–async 与 await

async函数：

1. 函数的返回值为 Promise 对象

2. promise对象的结果由async函数执行的返回值决定

   async function fn1(){
       return 1
   }
   const result = fn1()
   console.log(result)
   /* output: 
       Promise {<fulfilled>: 1}
       __proto__: Promise
       [[PromiseState]]: "fulfilled"
       [[PromiseResult]]: 1
   */
   

await表达式:

1. await右侧的表达式一般为promise对象, 但也可以是其他的值

2. 如果表达式 是promise 对象, await返回的是promise成功的值

   function fn2(){
       return new Promise((resolve, reject)=>{
           setTimeout(()=>{
               reject(2)
           },1000)
       })
   }
   
   function fn4(){
       return 4
   }
   
   async function fn3() {
       try{
           const value = await fn2()      // await右侧表达式为Promise对象, 得到的结果是 Promise 成功的value
       	const value2 = await fn4()      //右侧表达式不是Promise, 得到的结果就是本身
       }catch(error) {
           console.log('得到失败的结果',error)
       }
   }
   

注意:

1. await 必须写在async函数中
2. 如果await的promise失败了, 就会抛出异常, 需要通过try … catch 来捕获处理

真正意义上解决异步回调问题，以同步流程表达异步操作

本质：Generator语法糖

特点：
不用向Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
返回的总是Promise对象，可以用then方法进行下一步操作
async取代Generator函数的星号*，await取代yield
语义上更明确，使用简单

async function foo(){
        return new Promise(resolve=>{
            // setTimeout(function(){
            //     resolve();
            // },2000);
            setTimeout(resolve,2000);//与上面等价,resolve就是函数
        })
    }
     async function test(){
         console.log("开始执行",new Date().toTimeString());
         await foo();
         console.log("执行完毕",new Date().toTimeString());
     }
     test();
     //async里面的返回值
     function test2(){
         return 'XXX';
     }
     async function asyncPrint(){
        //  let result = await test2();
        let result = await Promise.resolve('promise');
         console.log(result);
     }
     asyncPrint();

 // 例子
//获取新闻内容
     async function getNews(url){
       
        return new Promise((resolve,reject)=>{
            $.ajax({
                        method:'GET',
                        url,
                        // success:function(data){
                        //     resolve();
                        // },
                        success:data=>resolve(data),
                        // error:function(error){
                        //     reject();
                        // }
                        // error:error=>reject(error)
                        error:error=>resolve(false)
                    });
        });
     }
     async function sendXml(){
        let result = await getNews('address url');
        if(!result){
            alert('暂时没有新的内容');
        }
         await getNews('address url'+result.commentUrl);
     }
     sendXml();

JS异步之宏队列与微队列

• JS中用来存储待执行回调函数的队列包含2个不同的特定队列
• 宏队列: 用来保存待执行的宏任务(回调),比如:定时器回调 / DOM时间回调 / ajax回调
• 微队列: 用来保存待执行的宏任务(回调),比如:Promise的回调 / MutationObserver的回调
• JS执行时会区别这两个队列
  • JS引擎首先必须先执行所有的初始化同步任务代码
  • 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行