1.什么是Promise
是一种异步编程解决方案,Promise是一个容器,保存着将来才会执行的代码;从语法角度来说Promise是一个对象,可以用来获取异步操作的消息。异步操作,同步解决,避免了层层嵌套的回调函数,可以链式调用降低了操作难度
2.Promise用法
实例化:
1.参数:Promise构造函数接收一个函数作为参数,也就是回调函数;该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数,reject作为失败的回调函数。
promise(function(resolve,reject))
2.三种异步操作的状态:
pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。
实例方法:
then(res=>{}) 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
参数:回调函数,回调函数的参数为resolve函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用catch(err=>{}) 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
参数:回调函数,回调函数的参数为reject函数传递过来的值
返回值:返回一个新的Promise实例对象,因此可以使用链式调用finally()无论异步操作执行成功失败与否,都会执行该回调
参数:回调函数
返回值:返回一个新的Promise实例对象3.例子:
let promise = new Promise((resolve, reject) => { if (3 > 2) { resolve('success') } else { reject('error') } }) console.log(promise, '承诺对象'); // 实例方法 成员方法 // resolve由then方法提供 reject由catch提供方法提供 // then 一个参数:请求成功的回调 两个参数:一个成功、一个失败 // 1、then含一个参数 promise.then( // 执行成功回调函数 (res) => { console.log(res, '请求成功'); } ).catch( // 执行失败的回调函数 (err) => { console.log(err, '请求失败'); } ).finally( () => { console.log('最终执行'); } ) // 2、then含两个参数 // promise.then(res => { // console.log(res, '请求成功'); // }, err => { // console.log(err, '请求失败'); // })
3.使用Promise封装ajax
需求:当我们需要发送多个请求时,可以采用工厂模式将ajax封装起来
// 创建多个承诺对象的实例 function promise(method, url, obj) { return new Promise((reslove, reject) => { // 封装ajax let xhr = new XMLHttpRequest() // 打开一个连接 xhr.open(method, url) // 发送请求 xhr.send() // 接收响应 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { // 代表请求成功 reslove(xhr.responseText) } else { // 代表请求失败 reject(xhr.responseText) } } } }) } let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles') let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll') // 1、实例方法 p1.then(res => { console.log(res, '响应1'); }) p2.then(res => { console.log(res, '响应2'); })
4.Promise的静态方法
定义:静态方法只能由构造函数本身去调用
Promise.all([p1,p2])
参数:数组,数组中的元素为Promise实例
返回值:Promise实例,当p1,p2状态都为fulfilled时候,该实例的状态才为fulfilled,此时p1,p2的返回值组成一个数组,传递给该实例的回调函数;只要p1,p2的返回值有一个变为rejected,该实例状态为rejected;
Promise.race([p1,p2]) 赛跑返回先请求成功的实例
参数:数组,数组中的元素为Promise实例 返回值:Promise实例,当p1,p2之中有一个实例率先改变状态,该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给该实例的回调函数。
Promise.any([p1,p2])
参数:数组,数组中的元素为Promise实例 返回值:Promise实例,只要p1,p2状态有一个变为fulfilled,该实例的状态为fulfilled;p1,p2状态都变为rejected,该实例状态才为rejected
静态方法的例子:
// 创建多个承诺对象的实例 function promise(method, url, obj) { return new Promise((reslove, reject) => { // 封装ajax let xhr = new XMLHttpRequest() // 打开一个连接 xhr.open(method, url) // 发送请求 xhr.send() // 接收响应 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { // 代表请求成功 reslove(xhr.responseText) } else { // 代表请求失败 reject(xhr.responseText) } } } }) } let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles') let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll') // console.log(p1); // console.log(p2); // 2、静态方法 只能由构造函数本身去调用 // 2.1 all-只有请求全部成功才返回 参数由实例组成的数组 返回值:返回promise实例 // let res = Promise.all([p1, p2]) // 2.2 any-任意一个实例状态成功则返回成功实例 参数由实例组成的数组 返回值:返回promise实例 // let res = Promise.any([p1, p2]) // 2.3 race-返回先成功的实例 参数由实例组成的数组 返回值:返回promise实例 // let res = Promise.race([p1, p2]) // 2.4 allSettle- /*all和allSettle的区别 1.返回的处理格式问题 array:[{},{}] 2.all 实例 pendding */ // let res = Promise.allSettled([p1, p2]) console.log(res); res.then(res => { console.log(res, '请求成功'); })