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) ——链式调用的返回值与传值 ...
随机推荐
- 【雕爷学编程】Arduino动手做（44）---类比霍尔传感器
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- python中的基础坑
v = [lambda :x for x in range(10)] print(v) #[lambda :x,lambda :x....]10个匿名函数 print(v[0]) #lambda :x ...
- MySQL事务隔离之MVCC版本控制
MVCC简介 MVCC是一种多版本并发控制机制. MVCC是为了解决什么问题? 大多数的MYSQL事务型存储引擎,如,InnoDB,Falcon以及PBXT都不使用一种简单的行锁机制.事实上,他们都和 ...
- python函数总结，你值得拥有
目录 函数总结 函数定义与结构 函数名的使用 函数的参数 名称空间与作用域 名称空间 作用域 函数嵌套 内置函数(globals( ),locals( )) global+nonlocal 可迭代对象 ...
- AIX 解除镜像再重建同步
扩展fs发现pv状态变成removed,用chpv -v -a hdisk即可,至于什么原因造成removed? 一.解除vg mirrorunmirrorvg vgname hdiskx hdisk ...
- Shone.Math开源系列2 — 实数类型（含分数和无理数）的实现
Shone.Math开源系列2 实数类型(含分数和无理数)的实现 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ShoneSharp. 摘要: ...
- js常用 方法 封装
// 监听滚动,用于列表页向下加载--------------------------------- function loadmore(callback) { $(window).scroll(fu ...
- springmvc数据处理-中文乱码
首先解决中文乱码 通过mvc过滤器解决,在web.xml中配置 <filter> <filter-name>CharacterEncodingFilter</filter ...
- Python-pygame案例AI贪吃蛇
# coding: utf-8 import pygame,sys,time,random from pygame.locals import * # 定义颜色变量 redColour = pygam ...
- 【LINQ标准查询操作符总结】之聚合操符
C# 中的LINQ 提供了两种操作方式,查询表达式和查询操作符,所有的查询表达式都有对应的查操作符类替代,查询表达式有点“类” SQL,在代码中写SQL,总觉得不够“优雅”,使用查询操作符就显得“优 ...