ES6 |
您所在的位置：网站首页 › promise详解 › ES6 |
ES6
|
一、什么是Promise
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。 二、为什么要使用promise最重要也是最主要的一个场景就是ajax和axios请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，但是我们下一步要执行的代码依赖于上一次请求返回值，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。 三、promise的好处1.可以避免多层异步调用嵌套问题(回调地狱) 2.Promise 对象提供了简洁的API，使得控制异步操作更加容易（js执行机制导致的异步问题）这两点在我ES6专栏的相关文章有很详细的介绍，这里就不展开了 四、promise的三种状态Promise对象有三种状态，他们分别是： 1.pending: 等待中，或者进行中，表示还没有得到结果 2.resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行 3.rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆 五、promise的用法 1.promise的实例方法①then()得到异步任务的正确结果 ②catch()获取异常信息 ③finally()成功与否都会执行(尚且不是正式标准) 注意：then方法可以接受两个函数，第一个函数为promise状态为成功的回调函数，第二个函数为promise状态为失败的回调函数（可以不写，一般用catch方法捕获promise状态为失败的异常信息） 2.promise的对象方法(p1,p2,p3为promise的实例对象)①Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果 Promise.all( [p1,p2,p3] ) .then ( (result) => {consoleog (result) })②Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果 Promise.race ( [p1,p2,p3] ).then ( (result)=>{ console. log (result) }) 六、promise的特点 1.在Promise对象的构造函数中，将一个函数作为第一个参数。 2.而Promise对象的构造函数的第一个参数中的这个函数，就是用来处理Promise的状态变化，这个函数的第一个参数表示promise的状态为成功，第二个参数表示promise的状态为失败，这两个参数（名字可以自己命名）都为一个函数，他们的作用分别是将promise状态修改为resolved(成功)和rejected（失败）。function fn(flag) { //构造函数 return new Promise(function(resolve, reject) { if (flag === true) { resolve('promise状态为成功！') }; if (flag === false) { reject('promise状态失败！') }; }) } console.log(fn(true)); 控制台运行：
function fn(flag) { return new Promise(function(resolve, reject) { if (flag === true) { resolve('promise状态为成功！') }; if (flag === false) { reject('promise状态失败！') }; }).then(function(res) { console.log(res); }, function(err) { console.log(err); }) } fn(true) fn(false) 控制台运行：
控制台运行：
③ 当then()函数内部返回的是Promise类型的对象时，then（）函数的返回的Promise对象的状态值为这个Promise对象的状态值，成功值也是如此，返回的该promise对象会调用下一个then方法。 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('用户数据'); }) }); let result = p.then(value => { return new Promise((resolve, reject) => { resolve('ok') }) }, reason => { console.log(reason) }) console.log(result); result.then(function(res) { console.log(res); })控制台运行：
④当then()函数内部果抛出异常，则then（）函数的返回值状态也是rejected const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('用户数据'); }) }); let result = p.then(value => { throw 123 }, reason => { console.log(reason) }) console.log(result);控制台运行：
6.Promise.catch（）方法 ①catch（）函数只有一个回调函数，意味着如果Promise对象状态为失败就会调用catch（）方法并且调用回调 //catch（）函数只有一个回调函数，意味着如果Promise对象状态为失败就会调用catch（）方法并且调用回调函数 const p = new Promise((resolve, reject) => { setTimeout(()=>{ reject('出错啦') },1000) }) p.catch(reason => { console.log(reason) })控制台运行：
|
【本文地址】
今日新闻 |
推荐新闻 |