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) ——链式调用的返回值与传值 ...
随机推荐
- 当Tomcat遇上Netty
故事背景 嘀嘀嘀~,生产事故,内存泄漏! 昨天下午,突然收到运维的消息,分部某系统生产环境内存泄漏了,帮忙排查一下. 排查过程 第一步,要日志 分部给到的异常日志大概是这样(鉴于公司规定禁止截图禁止拍 ...
- 让.NetCore程序跑在任何有docker的地方
一.分别在Windows/Mac/Centos上安装Docker Windows上下载地址:https://docs.docker.com/docker-for-windows/install/(wi ...
- 「雕爷学编程」Arduino动手做（27）——BMP280气压传感器
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- 4.3 Go for
4.3 Go for Go的for循环是一个循环控制结构,可以执行循环次数. 语法 package main import "fmt" func main() { //创建方式一, ...
- 使用Flutter开发的抖音国际版
简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热更新,太方便实时调整U ...
- mysql小白系列_02 mysql源码安装标准化
问题: 1.为什么数据目录和日志目录需要分开? 2.如何标准化配置多实例?(例如:一台物理主机上部署3306与3307两个实例) 3.详细描述MySQL编译安装的过程(截图安装步骤) 1.为什么数据目 ...
- 使用包时，报 xxx.default is not a function
最近做了一个导出功能,代码如下 import request from 'request-promise-native'; export default class Form { // 导出 @po ...
- 如何快速全面掌握Kafka？这篇文章总结了
Kafka 是目前主流的分布式消息引擎及流处理平台,经常用做企业的消息总线.实时数据管道,本文挑选了 Kafka 的几个核心话题,帮助大家快速掌握 Kafka,包括: Kafka 体系架构 Kafka ...
- rfind（）的使用
今天学了一个新函数 rfind 使用: str=123/456 str.rfind('/',1,6) 返回的是从1到6找最后一个/的位置
- solr学习（笔记） windows10+jdk1.8+tomcat8环境部署
一:准备环境 1.1 »tomcat8.5下载地址:https://tomcat.apache.org/download-80.cgi 1.2 solr各版本下载地址:http://archive.a ...