async/await用法

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

async/await用法

前端之神   2022-09-28 我要评论

async/await是什么

async/await 是ES7提出的基于Promise的解决异步的最终方案。

async

async是一个加在函数前的修饰符,被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then,返回值就是then方法传入的函数。

// async基础语法
async function fun0(){
    console.log(1);
    return 1;
}
fun0().then(val=>{
    console.log(val) // 1,1
})

async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

await

await 也是一个修饰符,只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象:可以获取Promise中返回的内容(resolve或reject的参数),且取到值后语句才会往下执行;

如果不是Promise对象:把这个非promise的东西当做await表达式的结果。

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('setTimeout')
        },3000)
    })
    let c = await function(){
        return 'function'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出: 1 "setTimeout" "function"
function log(time){
    setTimeout(function(){
        console.log(time);
        return 1;
    },time)
}
async function fun(){
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)
}
fun(); 
// 立即输出 undefined 1
// 1秒后输出 1000
// 2秒后输出 2000
// 3秒后输出 3000

async/await 的正确用法

// 使用async/await获取成功的结果

// 定义一个异步函数,3秒后才能获取到值(类似操作数据库)
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('获取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后输出:获取成功

附:async与await一些注意关键点小结

  • await关键字必须位于async函数内部
  • await关键字后面需要一个promise对象(不是的话就调用resolve转换它)
  • await关键字的返回结果就是其后面Promise执行的结果,可能是resolved或者rejected的值,注意最后执行完的是个值。
  • 不能在普通箭头函数中使用await关键字,需要在箭头函数前面添加async
  • await用来串行的执行异步操作,现实现并行可以考虑promise.all

async与await缺点

async函数中,如果有多个await关键字时,如果有一个await的状态变成了rejected,那么后面的操作都不会继续执行,promise也是同理有这样一个函数async

function getData()
{
let value=await get();
value++;
await set();//set完成后返回数据
return value;
}

直接调用

var value=getData();

是对于这个函数直接调用的时候并不是你想要的返回值,因为async方法返回的永远是一个promise,即使开发者返回的是一个常量,也会被自动调用的promise.resolve方法转换为一个promise。因此对于这种情况,上层调用方法也需要是async函数,采用如下方法

async function xxxx(){
var value=await getData();
return value;
}

对于这种调用,如果还存在更高层次的方法调用,那么从底层的异步操作开始,一直到最顶层一个不需要返回值的函数为止,全部的方法都要变成async。

总结

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们