了解JavaScript中的Promise

学习记录，加深印象

1. 回调函数

JavaScript是单线程，因此JavaScript中的浏览器事件、网络操作需要异步执行，而异步执行可以用回调函数实现

 function callback() {console.log('Done');}console.log('before setTimeout()');setTimeout(callback, 1000); // 1秒钟后调用callback函数console.log('after setTimeout()');

callback回调函数，作为JundgeNum的参数

 function JundgeNum(num,callback){if(num<0)return setTimeout(callback,1000,1)setTimeout(callback,1000,null,num)   //null，num表示callback的一二参数}JundgeNum(2,function(err,succ){if(err)console.log('数字小于0')else                     //当callback中err参数为null时console.log('成功，数字为'+succ)})console.log('test')//test//成功，数字为2    (1秒后出现)

将callback的两个参数(err,succ)拆开为两个函数来看,分别作为JundgeNum的两个参数

    function JundgeNum(num,succ,err){if(num<0)return setTimeout(err, 1000)setTimeout(succ, 1000)}JundgeNum(1,function(){console.log('成功，数字大于0')        },function(){console.log('err数字小于0')})console.log('test')//test//成功，数字大于0

2.回调地狱

回调套回调,当回调嵌套很深时，就称为回调地狱

    function JundgeNum(num,succ,err){if(num<0)return setTimeout(err, 1000,num)setTimeout(succ, 1000,num)}JundgeNum(2,function(num){console.log(num) JundgeNum(4,function(num){console.log(num)JundgeNum(3,function(num){console.log(num)JundgeNum(5,function(num){console.log(num)             })                })             })})//4//16//9//25

3.Promise

Promise是一个构造函数，因此我们可以new Promise得到一个Promise的实例对象
在Promise上，有两个函数，resolve(成功之后的回调函数)，reject(失败之后的回调函数)
在Promise构造函数的Prototype属性上，有一个.then()方法，也就是说，只要是Promise构造函数创建的实例，都可以访问到.then()方法
我们可以在new出来的Promise实例上，调用.then()方法，预先为这个异步操作，指定成功 (resolve)和失败(reject)回调函数

    function JundgeNum(num){return promise=new Promise(function(resolve,reject){if(num<0) return setTimeout(reject,1000)setTimeout(resolve,1000,num*num)})}JundgeNum(-1).then(function(num){console.log(num)       //预先指定成功resolve函数},function(){console.log('小于0')        //预先指定失败reject函数})//小于0

在上一个.then中,返回一个新的promise实例，可以继续用下一个.then处理

    function JundgeNum(num){return promise=new Promise(function(resolve,reject){setTimeout(resolve,1000,num)})}var p=JundgeNum(2)p.then(function(num){console.log(num)return JundgeNum(num*num)}).then(function(num){console.log(num)return JundgeNum(num*num)}).then(function(num){console.log(num)})//2//4//16

Promise单纯的为了解决回调地狱的问题，并不能帮我们减少代码量

廖雪峰官方网站例子

// 0.5秒后返回input*input的计算结果:
function multiply(input) {return new Promise(function (resolve, reject) {console.log('calculating ' + input + ' x ' + input + '...');setTimeout(resolve, 500, input * input);});
}// 0.5秒后返回input+input的计算结果:
function add(input) {return new Promise(function (resolve, reject) {console.log('calculating ' + input + ' + ' + input + '...');setTimeout(resolve, 500, input + input);});
}var p = new Promise(function (resolve, reject) {console.log('start new Promise...');resolve(2);
});p.then(multiply).then(add).then(multiply).then(add).then(function (result) {console.log('Got value: ' + result);
});

Promie中捕获异常的两种方式

如果前面的Promise执行失败，但不想让后续的Promise操作被终止，可以为每个Promise指定失败的回调

    function JundgeNum(num){return promise=new Promise(function(resolve,reject){if(num>0||num===0)return setTimeout(resolve,1000,num)setTimeout(reject,1000,num)})}var p=JundgeNum(0)p.then(function(num){console.log(num)return JundgeNum(num-1)},function(err){console.log(err+'!!数值为负')return JundgeNum(err-1)}).then(function(num){console.log(num)return JundgeNum(num-1)},function(err){console.log(err+'!!数值为负')return JundgeNum(err-1)}).then(function(num){console.log(num)},function(err){console.log(err+'!!数值为负')})//0//-1!!数值为负//-2!!数值为负

如果后续的promise执行依赖于前面promsie执行的结果，因此前面失败了后面没有执行下去的意义，则立即终止所有的Promise执行，这时可用.catch()

    function JundgeNum(num){return promise=new Promise(function(resolve,reject){if(num>0||num===0)return setTimeout(resolve,1000,num)setTimeout(reject,1000,num)})}var p=JundgeNum(0)p.then(function(num){console.log(num)return JundgeNum(num-1)}).then(function(num){console.log(num)return JundgeNum(num-1)}).then(function(num){console.log(num)}).catch(function(err){console.log(err+'!!数值为负')})//0//-1!!数值为负

catch的作用:如果前面有任何的Promise执行失败，则立即终止所有Promise的执行，并马上进入catch去处理Promise中抛出的异常

了解JavaScript中的Promise相关推荐

Javascript中的Promise用法
Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案「回调函数和事件」更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 P ...
JavaScript中使Promise模式进行异步编程
Promises 其中的一种模式就是promise,它代表了一种潜在地.长时间运行但不必返回完成操作的结果.与阻塞并长时间等待运行计算完成不同,这种模式返回一个代表承诺(promised)结果的对象. ...
【译】JavaScript中的Promises
你有没有在JavaScript中遇到过promises并想知道它们是什么?它们为什么会被称为promises呢?它们是否和你以任何方式对另一个人做出的承诺有关呢? 此外,你为什么要使用promises ...
浅析JaveScript中的Promise对象暮雨清秋
前言本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法.并在文末会附上一份符合PromiseA+规范的Promise对象的完整实现. 注:本文中的相关概念均基 ...
JavaScript中异步/等待的用法和理解
昨天更新的是"JavaScript中的Promise使用详解",其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出.今天就说一说"JavaS ...
JavaScript异步编程【中】 -- Promise 详细解析
文章内容输出来源:拉勾教育大前端高薪训练营前言在ES6中,新增加了一种异步编程的解决方案Promise,它是一种规范,是一套处理JavaScript异步的机制. Promise的含义简单来说, ...
javascript中的异步调用，promise对象，async/await用法
原生javascript中的的回调函数即callback 就是通过回调函数来通知主程序对于io 密集的非常好用:eg. file,DB读写,网络访问异步: javascript就是个单线程语言, ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
Javascript 在循环中使用Promise对象
先看一个生成Promise对象的方法 function createPromise() {var promise;promise = new Promise(function(resolve, rej ...

了解JavaScript中的Promise

1. 回调函数

2.回调地狱

3.Promise

Promie中捕获异常的两种方式

catch的作用:如果前面有任何的Promise执行失败，则立即终止所有Promise的执行，并马上进入catch去处理Promise中抛出的异常

了解JavaScript中的Promise相关推荐

最新文章

热门文章