ES6 promise学习
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
1.promise是一构造函数,既然是构造函数,那么我们就可以用 new Promise()得到一个promise实列。
2.在promise上,有来给个函数,分别叫做resolve(成功之后的回调函数)和 reject(失败之后的的回调函数)
3.在promise构造函数的protype属性上,有一个.then()方法,也就是说,只要是promise构造函数创建的实例,都可以访问到.then()方法。
4.Promise表示一个异步操作;每当我们new一个promise的实例,这个实力,好表示一个具体的异步操作;
5.既然promise创建的实例,是一个异步操作,那么,这个异步操作的结果,只有两种状态
5.1状态1:异步执行成功了,需要在内部调用成功的回调函数resolve把结果返回调用者
5.2状态2:异步执行失败了,需要在内部调用失败的回调函数reject把结果返回调用者
5.3由于promise的实例是一个异步操作,所以,内部拿到操作的结果后,无法使用return把操作的结果返回调研组,这时候,只能使用回调函数的形式,来把成功或失败的的结果,返回调用者。
function getFilePath(fpath){
var promise=new Promise(function(resolve,reject){
fs.readFile(fpath,'utf8',(err,dataStr)=>{ // 这里面使用return不能返回值, 只能调用回调
if(err) return reject(err);
resolve(dataStr)
})
})
return promise;
}
var p=getFilePath('1.txt');
p.then(function(data){
console.log(data)
},function(err){
// console.log(data+'+++++');
console.log(err.message)
})
promise的正确使用方式
// 串联的方式
// 读取文件1
const fs=require('fs')
function getFilePath(fpath){
return new Promise(function(resolve,reject){
fs.readFile(fpath,'utf8',(err,dataStr)=>{ // 这里面使用return不能返回值, 只能调用回调
if(err) return reject(err);
resolve(dataStr)
})
})
}
// 先读取文件1,再读取文件2,文件3,
// 如果前面的promise的执行失败,我们不想让后续的promise操作被终止,可以为每个promise指定失败的回调
getFilePath('11.txt').then(function(data){
console.log(data);
// 读取文件2
return getFilePath('2.txt')
},function(err){ console.log('这是失败的结果'+err.message);
// return 一个新的promise,不耽误后面的执行
return getFilePath('2.txt')
}).then(function(data){
console.log(data);
// 读取文件3
return getFilePath('3.txt')
}).then(function(data){
console.log(data)
})
当我们有这样的需求,哪怕前面的promise执行失败了,但是不要影响后续promise的正常执行,此时,我们可以单独为每个promise,通过.then指定下一个失败的回调
2.有时候,我们有这样的需求,和上面的需求相反,如果后续的promise执行,依赖于前面promise执行结果,如果前面的失败了,则后面的就没有继续执行下去的意义了,此时,我们想要
实现,一旦有报错则立即终止所有的promise执行
const fs=require('fs')
function getFilePath(fpath){
return new Promise(function(resolve,reject){
fs.readFile(fpath,'utf8',(err,dataStr)=>{ // 这里面使用return不能返回值, 只能调用回调
if(err) return reject(err);
resolve(dataStr)
})
})
}
// 先读取文件1,再读取文件2,文件3,
// 如果前面的promise的执行失败,我们不想让后续的promise操作被终止,可以为每个promise指定失败的回调
getFilePath('1.txt').then(function(data){
console.log(data);
// 读取文件2
return getFilePath('12.txt')
}).then(function(data){
console.log(data);
// 读取文件3
return getFilePath('3.txt')
}).then(function(data){
console.log(data)
}).catch(function(err){
// catch作用:如果前面有任何的promise执行失败,即立即终止所有的promise的执行
// 并马上进入catch去处理promise中并抛出异常
console.log(err.message)
})
使用promisej结合ajax
<button type="button" value="获取数据" id="btn">"获取数据</button>
<script>
$(function(){
$('#btn').on('click',function(){
$.ajax({
url:'data.json',
type:'get',
dataType:'json', }).then(function(data){
console.log(data);
})
})
})
</script>
ES6 promise学习的更多相关文章
- ES6 promise学习笔记 -- 基本用法
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个Promise实例. const promise = new Promise(function(reso ...
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
- 解析ES6 Promise
ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...
- Promise学习
转自:http://www.cnblogs.com/lvdabao/p/es6-promise-1.html 去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被 ...
- ES6 Promise 接口
构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- ES6 Promise 全面总结
转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...
- ES6 Promise 异步操作
最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
随机推荐
- React 记录(4)
React文档:https://www.reactjscn.com/docs/components-and-props.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:/ ...
- React 记录(3)
React文档:https://www.reactjscn.com/docs/hello-world.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reactjs. ...
- 第十三节:HttpHander扩展及应用(自定义扩展名、图片防盗链)
一. 自定义扩展名 1. 前言 凡是实现了IHttpHandler接口的类均为Handler类,HttpHandler是一个HTTP请求的真正处理中心,在HttpHandler容器中,ASP.NET ...
- django - 总结 - redis缓存
八.redis 补充- 操作 - 增删改查 对字典,重新设计结构,增删改查. hmset keys hget scan_iter hgetall import redis import j ...
- StringBuffer/StringBuilder总结
- springboot上传文件 & 不配置虚拟路径访问服务器图片 & springboot配置日期的格式化方式 & Springboot配置日期转换器
1. Springboot上传文件 springboot的文件上传不用配置拦截器,其上传方法与SpringMVC一样 @RequestMapping("/uploadPicture&q ...
- 「luogu3313」[SDOI2014] 旅行
题目大意 :有 n 个城市连成一棵树, 每个城市有两个关键字, 一个是该城市的宗教, 另一个是城市的评级;旅行者要在城市间旅行, 他只会在和自己宗教相同的城市留宿;维护四个树上操作 { 1. “CC ...
- 【原创】大数据基础之Kudu(1)简介、安装、使用
kudu 1.7 官方:https://kudu.apache.org/ 一 简介 kudu有很多概念,有分布式文件系统(HDFS),有一致性算法(Zookeeper),有Table(Hive Tab ...
- 结构体重载运算符&srand&rand
先上代码,再按代码讲解 #include<stdio.h>#include<string.h>#include<stdlib.h>#include<time. ...
- js中循环对比(for循环,foreach,for in,for of ,map)
对空位的处理 for循环(不会忽略空位,标记undefined) var arr =[1,2,undefined,3,null,,7] for (let i=0;i<arr.length;i++ ...