// promise方法
let p1 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p1')
},4000)
})
let p2 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p2')
},200)
})
let p3 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p3')
},200)
})
// 想让p1完成后再执行P2再执行P3
// 数量太多只能循环嵌套
p1.then((res) => {
console.log(res);
p2.then((res) => {
console.log(res);
p3.then((res) => {
console.log(res);
})
})
}) // async await语法糖
let a1=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a1')
},4000)
})
}
let a2=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a2')
},40)
})
}
let a3=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a3')
},40)
})
}
// 想让a1完成后再执行a2再执行a3
//能避免回调
async function asy(){
await a1().then((res) => {console.log(res)});
await a2().then((res) => {console.log(res)});
await a3().then((res) => {console.log(res)});
}
asy();

一眼看懂promise async的区别的更多相关文章

  1. require和require.async的区别

    本文用seajs来讲解两种模块加载方式require和require.async的区别,类似java里的import,php里的include. <!DOCTYPE html> <h ...

  2. <script>标签里的defer和async属性 区别(待补充)

    defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...

  3. 理解Promise.all,Promise.all与Promise.race的区别,如何让Promise.all在rejected失败后依然返回resolved成功结果

     壹 ❀ 引 我在 es6入门4--promise详解 这篇文章中有详细介绍Promise对象的用法,文章主题更偏向于对于Promise概念的理解与各方法基本使用介绍:而世上一个比较有趣的问题就是,即 ...

  4. vue使用技巧:Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  5. url,href和src的区别,defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

  6. angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )

    Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...

  7. promise async await使用

    1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...

  8. 【一起来烧脑】读懂Promise知识体系

    知识体系 Promise基础语法,如何处理错误,简单介绍异步函数 内容 错误处理的两种方式: reject('错误信息').then(null, message => {}) throw new ...

  9. 一道题理解setTimeout,Promise,async/await以及宏任务与微任务

    今天看到这样一道面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2(); consol ...

随机推荐

  1. 【JZOJ4923】【NOIP2017提高组模拟12.17】巧克力狂欢

    题目描述 Alice和Bob有一棵树(无根.无向),在第i个点上有ai个巧克力.首先,两人个选择一个起点(不同的),获得点上的巧克力:接着两人轮流操作(Alice先),操作的定义是:在树上找一个两人都 ...

  2. Effective Modern C++:05右值引用、移动语义和完美转发

    移动语义使得编译器得以使用成本较低的移动操作,来代替成本较高的复制操作:完美转发使得人们可以撰写接收任意实参的函数模板,并将其转发到目标函数,目标函数会接收到与转发函数所接收到的完全相同的实参.右值引 ...

  3. Python之路,Day1 - Python基础1 --转自金角大王

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  4. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第五章:渲染流水线 学习目标 了解几个用以表达真实场景的标志和2D图像 ...

  5. php输入流简单小例子

    <form method="post" action="index.php/home/index/captchaTest"> <input n ...

  6. jq向元素附加数据

    --------data() 方法向被选元素附加数据,或者从被选元素获取数据.--------- --------removeData() 方法删除之前通过 data() 方法设置的数据.------ ...

  7. Mysterious Antiques in Sackler Museum(判断长方形)

    题目链接 参考博客Ritchie丶的博客 - UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形) 题意:大概意思就是判断四个矩形能不能 ...

  8. python世界里的局部变量和全局变量: 潜规则太重要了!!!

    python世界里的局部变量和全局变量: 潜规则太重要了!!! 先上代码: def fun(): def test_global(): ''' 内层和外层都需要声明为global, 才能彻底打通变量名 ...

  9. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...

  10. mysql通过TEXT字段进行关联的优化方案

    mysql如果通过超长的字段进行on关联,会导致效率很低,7k关联1.4k,结果为30+W的数据量,执行时间高达50秒. 将这个字段进行md5,然后再通过md5后的值进行关联,执行效率会大大优化,同样 ...