浅谈Promise
来源:互联网 发布:服装零售收银软件 编辑:程序博客网 时间:2024/05/21 14:04
https://hzzly.github.io/2017/03/25/%E6%B5%85%E8%B0%88Promise/接触过promise的的都知道它的应用场景和用途,Promise可以用来避免异步操作函数里的嵌套回调(callback hell)问题,因为解决异步最直接的方法是回调嵌套,将后一个的操作放在前一个操作的异步回调里,但如果操作多了,就会有很多层的嵌套(回调地狱)。
12345678910
$.ajax(url1, <span class="function" style=""><span class="keyword" style="color:rgb(102,217,239)">function</span>(<span class="params" style="">data1</span>)</span>{</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> <span class="comment" style="color:rgb(117,113,94)">// do something...</span></div><div class="line" style="color:rgb(255,255,255); min-height:19px"> $.ajax(url2, <span class="function" style=""><span class="keyword" style="color:rgb(102,217,239)">function</span>(<span class="params" style="">data2</span>)</span>{</div><div class="line" style="color:rgb(255,255,255); min-height:19px"> <span class="comment" style="color:rgb(117,113,94)">// do something...</span></div><div class="line" style="color:rgb(255,255,255); min-height:19px"> $.ajax(url3, function(data3){// do something...done(data3); // 返回数据})});});
Promise学术点的描述:
promise代表一个异步操作的执行返回状态,这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。
这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回状态的 promise 对象来替代原返回状态。
Promise的表现
如果使用回调方法处理多个操作的异步场景,判断某个操作成功或失败的控制在于声明的匿名函数里面,使用Promise对象则可以重新定义异步执行的状态和控制逻辑。
promises的最重要的特点就是它把我们处理任何函数调用的成功或者失败的方式规范成了可预测的形式,特别是如果这个调用实际上的异步的。
Promise中有几个状态:
- pending: 初始状态。 非 fulfilled 或 rejected。
- resolved: 成功的操作。也有的成为fulfilled 。
- rejected: 失败的操作。
状态转换关系为:
pending->resolved(fulfilled),pending->rejected。
用法
说了这么多,直接上代码。
123456789101112131415
var promise = new Promise((resolve, reject) => {// do somthing, maybe asyncif (success){return resolve(res);} else {return reject(err);}});promise.then(res => {// do something... e.gconsole.log(res);}, err => {// deal the err.})
或封装成方法
1234567891011121314151617
function fetch(data) {return new Promise((resolve, reject) => {// do somthing, maybe asyncif (success){resolve(res);} else {reject(err);}})}fetch(data).then(res => {console.log(res)}, err => {// deal the err.})
异步嵌套回调
123456789101112131415161718192021222324252627
function loadAsync1(){return new Promise((resolve, reject) => {//异步操作setTimeout(() => {console.log('异步任务1');resolve('异步任务1传过来的值');}, 2000);});}function loadAsync2(data1){return new Promise((resolve, reject) => {//异步操作setTimeout(() => {console.log('异步任务2');resolve('异步任务2传过来的值');}, 2000);});}function loadAsync3(data2){return new Promise((resolve, reject) => {//异步操作setTimeout(() => {console.log('异步任务3');resolve('异步任务3传过来的值');}, 2000);});}
有返回值
12345678
loadAsync1().then(data1 => {return loadAsync2(data1)}).then(data2 => {return loadAsync3(data2)}).then(okFn, failFn)
没有返回值
12345678
loadAsync1().then(data1 => {loadAsync2(data1)}).then(data2 =>{loadAsync3(data2)}).then(res => console.log(res))
输出的值为:
异步任务1
异步任务1传过来的值
异步任务2
异步任务2传过来的值
异步任务3
异步任务3传过来的值
promise.all方法
Promise.all 可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。
12345678910111213141516
var p1 = new Promise((resolve) => {setTimeout(() => {resolve("第一个promise");}, 3000);});var p2 = new Promise((resolve) => {setTimeout(() => {resolve("第二个promise");}, 1000);});Promise.all([p1, p2]).then((result) => {console.log(result); // ["第一个promise", "第二个promise"]});
上面的代码中,all接收一个数组作为参数,p1,p2是并行执行的,等两个都执行完了,才会进入到then,all会把所有的结果放到一个数组中返回,所以我们打印出我们的结果为一个数组。
值得注意的是,虽然p2的执行顺序比p1快,但是all会按照参数里面的数组顺序来返回结果。all的使用场景类似于,玩游戏的时候,需要提前将游戏需要的资源提前准备好,才进行页面的初始化。
之后会有express操作mongondb的基于Promise的封装,敬请期待!
谢谢你请我吃糖果
- 浅谈Promise
- 浅谈Promise
- 浅谈ES6 Promise对象
- 浅谈ES6原生Promise
- 浅谈ES6的 promise API
- 浅谈Javascript中Promise对象的实现
- 浅谈Angular的 $q, defer, promise
- 浅谈Javascript中Promise对象的实现
- 浅谈JS异步编程——Promise
- 浅谈Angular的 $http, $q, defer, promise
- 浅谈Promise对象在ReactNative中的使用
- promise
- Promise
- Promise
- Promise
- Promise
- Promise
- Promise
- 用g++编译生成动态连接库*.so的方法及连接
- 大数运算
- Java基础教程4-Java中变量和类型
- softmax函数
- Post 提交,参数长度有限制吗?
- 浅谈Promise
- 华三交换机光口级联傻瓜交换机光口
- hdu2037 今年暑假不AC
- 对Controller的单元测试
- 使用hibernate5配置transaction时session.beginTransaction()报错
- 使用Python实现获取设备名及地址
- SQL Server
- ES6 新特性范例大全
- Ubuntu菜鸟入门—— 有道词典安装