资讯专栏INFORMATION COLUMN

js异步编程-async,await以及不可以取代的Promise

JinB / 1968人阅读

摘要:带来了和,让的异步编程更加方便。但是他们是取代不了的。其中状态是这种情况下,看出状态是。并报错,不想报错红错,可以使用将报错信息到。,简介是用来表示函数是异步的,出现,会返回一个对象,就可以使用方法,方便的添加回调函数了。

ES7带来了async和await,让js的异步编程更加方便。

async和await的简单语法实验

async和await是Promise的语法糖,让书写更加方便。但是他们是取代不了Promise的。他们是建立在promise机制上的。
简单语法试验:
(1)
正常情况下,可以看出也打印出来一个Promise。其中Promise状态是‘resolved’;

(2)
这种情况下,看出Promise状态是"rejected"。并报错,不想报错“红错”,可以使用try...catch

(3)
将报错信息catch到。

async,await简介

async
async是用来表示函数是异步的,出现async,会返回一个Promise对象,就可以使用then方法,方便的添加回调函数了。是语法更加简洁。

await
必须出现在async中,不可多带带使用;
await后面可以跟任何js表达式,也就是awati可以等很多类型的东西,但主要是等Promise对象被状态被resolved。

小示例

注意:reject("123"),需要try,catch才能将信息拿出来。
例子:
(1)resolve正常情况下可以拿出。

(2)reject拿不出

(3)reject需要用try,catch获取信息

不要将并发请求发成了阻塞式同步

如:

function aa(second){

return new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("request done"+Math.random());
    },second);
})

}

async function bugDemo(){

await aa(1000);
await aa(1000);
await aa(1000);
console.log("clear the loading~");

}

bugDemo();

不阻塞的写法
function aa(second){

return new Promise((resolve,reject) => {
    setTimeout(() => {
       console.log("request done"+Math.random());
    },second);
})

}
async function bugDemo(){

let a =aa(1000);
let b =aa(1000);
let c =aa(1000);
await Promise.all([a,b,c])
console.log("clear the loading~");

}
bugDemo();

注意:await只能在async函数的上下文中。
async function forDemo(){

   let arr = [1,2,3,4,5];
   for(let i=0;i

await arr[i];
}
}
这个是正常的,不会报错。

async function forBugDemo(){
let arr = [1,2,3,4,5];
arr.forEach(item => {
await item;
});
}
这个会报错

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108294.html

相关文章

  • JS 异步(callback→Promiseasync/await)

    摘要:异步编程三座大山原型原型链作用域闭包同步异步。异步操作执行完毕后,再执行该回调函数,确保回调在异步操作之后执行。回调函数本身是我们约定俗成的一种叫法,我们定义它,但是并不会自己去执行它,它最终被其他人执行了。 JS异步编程 JS三座大山:原型原型链、作用域闭包、同步异步。之前有写过自己对闭包的理解,今天来总结一下JS中的异步。 思考(案例来自stackoverflow): functi...

    gougoujiang 评论0 收藏0
  • ES6系列文章 异步神器async-await

    摘要:有两个陌生的关键字,同时函数执行结果似乎返回了一个对象。用来表示函数是异步的,定义的函数会返回一个对象,可以使用方法添加回调函数。如果的是对象会造成异步函数停止执行并且等待的解决如果等的是正常的表达式则立即执行。 视频讲解 关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-a...

    miqt 评论0 收藏0
  • 以图表和示例角度解读async/await

    摘要:在中,表示抽象的非阻塞异步执行。在完成之后安排代码的唯一方式是通过方法绑定回调函数。下图描述了该示例的计算过程方法中绑定的回调函数只有当成功的时候才会调用。为了处理失败的,需要通过绑定另一个回调函数。 介绍 ES7中,async/await 语法使异步promise的协调变得很简单。如果你需要以特定顺序异步获取来自多个数据库或API的数据,可以使用杂乱的promise或回调函数。asy...

    sutaking 评论0 收藏0
  • ES6 系列之我们来聊聊 Async

    摘要:标准引入了函数,使得异步操作变得更加方便。在异步处理上,函数就是函数的语法糖。在实际项目中,错误处理逻辑可能会很复杂,这会导致冗余的代码。的出现使得就可以捕获同步和异步的错误。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。 async ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 在异步处理上,async 函数就是 Generator 函数的语法糖。 ...

    Songlcy 评论0 收藏0
  • [翻译] Async/Await 使你代码更简洁

    摘要:取而代之,利用事件循环体系,使用了一种类似语法的工作方式一旦非阻塞的异步操作完成之后,就可以让开发者分配的回调函数被触发。第一个尝试嵌套的回调函数下面是使用嵌套的回调函数的实现方法这可能对于任何使用者来说再熟悉不过了。 写在文章前 这篇文章翻译自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,这是一篇写于2017年八月的文章,并由某专栏提名为17年十大...

    hightopo 评论0 收藏0

发表评论

0条评论

JinB

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<