12-ES6之async 函数

async

async 是 ES7 才有的与异步操作有关的关键字,和 Promise , Generator 有很大关联的。

语法

async function name([param[, param[, ... param]]]) { statements }
  • name: 函数名称。
  • param: 要传递给函数的参数的名称。
  • statements: 函数体语句。

返回值

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。

await

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

语法

[return_value] = await expression;
  • expression: 一个 Promise 对象或者任何要等待的值。

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

await针对所跟不同表达式的处理方式:

  • Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
  • 非 Promise 对象:直接返回对应的值。
 <script>
        //promise承诺
        //相当于一个容器,保存着未来才会的结果事件(异步操作)的一个过程
        //各种异步都可以用同样方法进行处理axios

        //两个特点:对象的状态不受外接影响,处理异步操作,三个状态:Pending(进行),resolved(成功),rejected(失败)
        //一旦状态改变,不会再变,任务时候都可以得到这个结果
        //接受两个回调函数
        let pro=new Promise(function(resolved,rejected){
            //执行异步操作
            let res={
                code:201,
                data:{
                    name:"111"
                },
                error:"222"
            };
            setTimeout(()=>{
                if (res.code===200){
                    resolved(res.data)
                    }else{
                    rejected(res.error)
                    }
                    
            },1000)
        });
        pro.then((val)=>{
            console.log(val);
        }).catch((val)=>{
            console.log(val);
        })

        //all方法的应用
        let p1 =new Promise((resolved,rejected)=>{})
        let p2 =new Promise((resolved,rejected)=>{})
        let p3 =new Promise((resolved,rejected)=>{})
        let p4=Promise.all([p1,p2,p3])
        //上面3个都执行成功才执行
        p4.then(()=>{

        })
        //race()方法,某个异步请求设置超时时间
    </script>

  

原文地址:https://www.cnblogs.com/lixiang1013/p/13657794.html