async awit概述

async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。使用async / await关键字就可以在异步代码中使用普通的try / catch代码块。

await关键字只在async函数内有效。如果你在async函数体之外使用它，就会抛出语法错误 SyntaxError 。

async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。

async awit 示例

简单示例

//例如，如下代码:async function foo() {return 1
}
//等价于:function foo() {return Promise.resolve(1)
}

try cathc 示例

//例如，如下代码:const tryDemo = async () => {try {return '成功';} catch (error) {return '错误';}};
//等价于:const promiseDemo = () => {return new Promise((resolve, reject) => {if (1 < 2) {resolve('成功');} else {reject('失败');}});

Promise 概述

首先它是异步的。使用Promise可以让我们书写的代码，更具符合我们常人的逻辑。就像用电饭煲煮饭一样。第一步：要先把米倒入锅中；第二步：往锅中加水；第三步：关上盖子；第四步：插上电源：第五步：点击按钮开始煮饭。

基础用法

  /*** 将米倒入锅中* @returns*/const daomi = () => {return new Promise((resolve, reject) => {if (1 < 2) {resolve('将米倒入锅中---成功');} else {reject('将米倒入锅中---失败');}});};/*** 将水倒入锅中* @returns*/const daoshui = () => {return new Promise((resolve, reject) => {if (1 < 2) {resolve('将水倒入锅中--成功');} else {reject('将水倒入锅中--失败');}});};/*** 开始煮饭煮饭*/const zhufan = () => {//第一步 倒米daomi().then((res) => {console.log(res); //将米倒入锅中---成功//第二步 倒水daoshui().then((r) => {console.log(r); //倒水成功}).catch((e) => {console.log(e); //倒水失败});}).catch((err) => {console.log(err);//将米倒入锅中---失败});};

Promise.all 用法

概述

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。说人话就是，使用Promise.all你可以一次性获取多个异步操作的返回结果。

写法1

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function(id){return getJSON("/post/" + id + ".json");
});Promise.all(promises).then(function(posts) {// ...
}).catch(function(reason){// ...
});

写法2

    let fileList = [1, 2, 3, 4];let promiseArr: any[] = [];fileList.forEach((item, index) => {promiseArr.push(new Promise((resolve, reject) => {//注意：内部不能只能直接引用异步方法,过度封装异步方法，会导致Promis.all 无法获取到返回的集合setTimeout(() => {resolve(item); //代码正常执行！}, 1000);}));});Promise.all(promiseArr).then(res=>{console.log(res) // [1, 2, 3, 4]});

小技巧

    Promise.resolve("成功")Promise.reject("失败")

问题

Promise.all 数组里面的promise 是如何执行的呢？是并发执行呢？还是以队列的形式，必须要等前一个promise执行完成后，才会执行下一个？希望有大佬来回答下。

我的回答：JS引擎是基于事件驱动，采用的是单线程运行机制。即JS引擎会只会顺序的从任务列表中取任务，并执行。

参考

MDN async awit
菜鸟Promise

JavaScript线程机制

javascript async awit 和 Promise 概述相关推荐

前后端交互（Promise、fetch、axios、async/awit用法）
1.Promise概述 Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息. 1.2Promise的好处: 1.2.1. 可以避免多层异步调用嵌套 ...
promise 与async awit的写法
async awit 是 Generator 的一个语法糖如有不对,望指出
8张图让你一步步看清 async/await 和 promise 的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> **摘要:**面试必问原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序作者:ziwei3 ...
Async/Await替代Promise的6个理由
2019独角兽企业重金招聘Python工程师标准>>> 译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更 ...
[译]JavaScript async / await：好处、坑和正确用法
原文地址:JavaScript async/await: The Good Part, Pitfalls and How to Use ES7通过介绍async/await使得JavaScript的异 ...
promise用法_【JavaScript 教程】异步操作——Promise 对象
作者 | 阮一峰概述 Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口.它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操 ...
async awit 异步调用的理解及应用
async awit 异步调用的理解及应用 async 是"异步"的简写,而 await 可以认为是 async wait 的简写.所以应该很好理解 async 用于申明一个 fu ...
JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)--Promise对象引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
async/awiat和promise之间的区别
今天看到了一段代码 async function async1() {console.log('async1 start');await async2();console.log('async1 en ...

javascript async awit 和 Promise 概述

async awit概述

async awit 示例

简单示例

try cathc 示例

Promise 概述

基础用法

Promise.all 用法

小技巧

问题

参考

javascript async awit 和 Promise 概述相关推荐

最新文章

热门文章