ES6优雅的异步操作Promise()
一、Promise()的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 使用setTimeout
// setTimeout(()=>{
// console.log("Hello word");
// },1000) // 2. promise的使用
// promise的参数-> 函数(resolve，reject)
// resolve，reject本身他们就是函数
// new Promise((resolve,reject) =>{
// setTimeout(()=>{
// console.log("Hello word");
// },1000)
// }) // 3. 异步操作的时候使用promise对这个异步操作进行封装
// new -> 构造函数(1.保存一些状态信息 2. 执行传入的函数 )
// 在执行传入的回调函数时，会传入两个函数，resolve，reject 他们本身又是函数
new Promise((resolve,reject)=>{
setTimeout(()=>{
// 成功的时候调用resolve
// resolve('Hello Word') // 失败的时候调用reject
reject('error message') // 失败的时候调用reject
},1000)
}).then((data) =>{
console.log(data);
console.log(data);
console.log(data);
console.log(data); }).catch((err)=>{
console.log(err);
console.log(err);
console.log(err);
console.log(err);
}) </script>
</body>
</html>
基本使用
二、Promise((resolve,reject)=>{reject()}).then(success=>{},err=>{})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
new Promise((resolve, reject)=>{
setTimeout(()=>{
reject('error');
// resolve("Hello"); },1000)
}).then(
data =>{console.log(data);}
,
err =>{console.log(err);
alert(err, 'reject')
})
//只写一个then(success=>{},err=>{})
</script>
</body>
</html>
.then()
三、Promise()链式操作和简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
// 需求
// 网络请求: aaa -> 自己处理(10行)
// 处理： aaa111 -> 自己处理(10行)
// 处理： aaa111222 -> 自己处理 // new Promise((resolve,reject) => {
// setTimeout(()=>{
// resolve('aaa')
// },1000)
// }).then(res => {
// // 1. 自己处理10行代码
// console.log(res,"第一层的10行处理代码");
//
// // 2. 对结果进行第二次处理
// return new Promise((resolve)=>{
// resolve(res + '111')
// })
// }).then(res =>{
// console.log(res,'第二层的10行处理代码');
//
// return new Promise(resolve => {
// resolve(res + '222')
// })
// }).then(res=>{
// console.log(res,'第三层的10行处理代码');
// }) //没有异步的时候可以简写
// 简写（省略new Promise()完整过程，直接return Promise.resolve(res + '111')）
// new Promise((resolve,reject) => {
// setTimeout(()=>{
// resolve('aaa')
// },1000)
// }).then(res => {
// // 1. 自己处理10行代码
// console.log(res,"第一层的10行处理代码");
//
// // 2. 对结果进行第二次处理
// return Promise.resolve(res + '111')
//
// }).then(res =>{
// console.log(res,'第二层的10行处理代码');
//
// return Promise.resolve(res + '222')
// }).then(res=>{
// console.log(res,'第三层的10行处理代码');
// }) // 极简写（再省略Promise，直接return res + '111'）
// new Promise((resolve,reject) => {
// setTimeout(()=>{
// resolve('aaa')
// },1000)
// }).then(res => {
// // 1. 自己处理10行代码
// console.log(res,"第一层的10行处理代码");
//
// // 2. 对结果进行第二次处理
// return res + '111'
//
// }).then(res =>{
// console.log(res,'第二层的10行处理代码');
//
// return res + '222'
// }).then(res=>{
// console.log(res,'第三层的10行处理代码');
// }) // 加异常简写
new Promise((resolve,reject) => {
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res => {
// 1. 自己处理10行代码
console.log(res,"第一层的10行处理代码"); // 2. 异常处理写法
// return Promise.reject('error message')
throw "error msg" }).then(res =>{
console.log(res,'第二层的10行处理代码'); return Promise.resolve(res + '222')
}).then(res=>{
// 不会处理这条，被异常跳过了
console.log(res,'第三层的10行处理代码');
}).catch(err=>{
console.log(err);
})
</script>
</body>
</html>
链式操作
四、Promise.all()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
//两个异步都完成的时候调.then()
// .then(results=>{
// console.log(results); results是一个数组，
// console.log(results[0]); 第一个Promise的结果
// console.log(results[1]); 第二个Promise的结果
// }) Promise.all([ // all里面传入的是一个可迭代对象
new Promise ((resolve, reject) =>{
setTimeout(() =>{
resolve("result1")
console.log("2秒")
},2000)
}), new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('result2')
console.log("1秒")
},1000)
})
]).then(results=>{
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
</script>
</body>
</html>
.all
ES6优雅的异步操作Promise()的更多相关文章
- ES6新特性之 promise
新的ES6中引入了promise的概念,目的是让回调更为优雅.层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用.于是Promise就应 ...
- javascript ES6 新特性之 Promise，ES7 async / await
es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...
- es6学习3：promise
promise含义: 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Pro ...
- 石川es6课程---12、Promise
石川es6课程---12.Promise 一.总结 一句话总结: 用同步的方式来书写异步代码,让异步书写变的特别简单 用同步的方式来书写异步代码Promise 让异步操作写起来,像在写同步操作的流程, ...
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
- ES6异步操作Promise
什么是Promise Promise是异步编程的一种解决方案,说白了就是一个构造函数,带有all,reject,resolve这几个方法,圆形上有then,catch等方法 Promise的特点 对象 ...
- ES6学习笔记之Promise
入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及 ...
- ES6系列_14之promise对象的简单使用
1.产生原因 在前端开发中,最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢.究其原因是因为层层回调会造成所谓的“回调地狱 (callbac ...
- ES6入门八：Promise异步编程与模拟实现源码
Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...
随机推荐
- Docker之从零开始制作docker镜像
以前学习docker是直接docker pull命令直接拉取Linux中已有镜像,并创建容器,添加应用程序,但是docker镜像一开始是怎么来的呢?下面将从零开始介绍整个docker镜像的制作过程(初 ...
- 2020版Adobe全家桶介绍及免费下载安装
前言 Adobe公司创建于1982年,是世界领先的数字媒体和在线营销解决方案供应商.公司总部位于美国加利福尼亚州圣何塞.Adobe 的 客户包括世界各地的企业.知识工作者.创意人士和设计者.OEM合作 ...
- 9.5 Go 依赖管理
9.5 Go 依赖管理 godep是解决包依赖的管理工具,目前最主流的一种,原理是扫描记录版本控制的信息. A. 所有的第三方包都放在$GOPATH的src目录下. B. 如果不同程序依赖的版本不一样 ...
- 3.1Go变量
3.1 Go变量 变量是对内存中数据存储空间的表示,如同门牌号对应着房间,同样的,变量名字对应变量的值. 变量:本质就是一块内存空间.用于存储某个数值.该数值在运行时可以改变. 变量使用步骤 1.声明 ...
- MongoDB启动闪退问题完美解决
如果你看到这篇文章,说明你也遇到了启动MongoDB闪退的情况.由于只是学习MongoDB,所以很多人不想使用MongoDB的安装版,而使用免安装版.但是在启动mongod.exe 的时候,就会出现闪 ...
- C语言qsort()函数的实现
#include <stdio.h> void qsort(void * base, int num, int width, int (*comp)(const void *, const ...
- Robot Framework（3）- 基本概念
如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 在 RF ...
- 转 document.compatMode介绍
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的 ...
- [转]前人挖坑，后人填坑—如何把那些bug挖掘出来
当我们放下一个项目转投下一个时,手头的东西就要转交给他人处理,或者..不再有人处理,可代码还在那里,搞不好你就引用了别人的东西,保不准哪天别人的代码里就爆出了个大 bug,当然这里的“别人”也可能是 ...
- pandas手册
https://www.dataquest.io/blog/large_files/pandas-cheat-sheet.pdf