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) ——链式调用的返回值与传值 ...
随机推荐
- flask之gevent-websocket的IO多路复用长连接通信
本节目录: (一)笔记总结: (二)gevent-websocket+flask+javascript实现WS即时通信 (1)无昵称群聊 (2)有昵称群聊 (3)私聊 三种通信模型简述: (1)轮询: ...
- redis的参数解释
include /path/to/local.conf 当有公用配置时,可以采用独立出公共配置文件然后引入的方式达到公共配置unixsocket /tmp/redis.sock 通过socket文件进 ...
- PAT-1135 Is It A Red-Black Tree（二叉查找树的创建和遍历）
There is a kind of balanced binary search tree named red-black tree in the data structure. It has th ...
- 【Redis】List常见应用场景
常用数据结构 Stack(栈) = LPUSH + LPOP ->FILO Queue(队列) = LPUSH + RPOP Blocking MQ(阻塞队列) = LPUSH + BRPOP ...
- ECharts使用教程
引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 scrip ...
- mybatis的多表联查
多对一连表查询简单记录
- ES[7.6.x]学习笔记（十一）与SpringBoot结合
在前面的章节中,我们把ES的基本功能都给大家介绍完了,从ES的搭建.创建索引.分词器.到数据的查询,大家发现,我们都是通过ES的API去进行调用,那么,我们在项目当中怎么去使用ES呢?这一节,我们就看 ...
- [ES6系列-01]Class：面向对象的“新仇旧恨”
[原创]CoderPower 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 这是公众号(码路工人有力量)开通后的第二篇,写得还是有待改进吧.这次准备写一个关于ES6基础的短文系列,努力尽快 ...
- windows环境下Kubernetes及Docker安装(那些坑)
k8s 和 Docker容器技术,当前非常流行的技术. 让人日狗的是, 这套技术栈对CN的donet 程序员不怎么友好.娓娓道来,1. 好多镜像都是需要梯子才能访问: 2. window程序员天生 ...
- [Objective-C] 019_UIVIewController
UIViewController是iOS程序中的一个重要组成部分,对应MVC设计模式的C,它管理着程序中的众多视图,何时加载视图,视图何时消,界面的旋转等. 1.UIViewController 创建 ...