Promise
一、解决问题
我们知道Promise
是javaScript中异步编程的一种解决方法。在介绍Promise
前,我们思考下Promise
的诞生解决了哪些问题呢?
ES6之前,我们使用回调函数和事件处理异步操作,用来解决javaScript单线程运行时可能导致的UI渲染阻塞的问题
事件:对象的某个属性是一个函数,当发生某种行为时,运行该函数
callback回调函数:运行某个函数以实现某个功能的时候,传入一个函数作为参数,在某个特定条件下触发该函数
但是,使用回调函数也带来几个问题:
- 回调函数放在参数的位置,嵌套回调造成回调地狱
- 回调函数的代码和开始任务代码不在同一事件循环中,异步同步任务不能联系
- 处理并行任务棘手,请求之间互不依赖
二、解决方案——异步模型
-
ECMA将异步操作分为三个状态:
pedding
——等待状态(未决阶段),表示事件还在进行中resolved
——已经处理(已决阶段),表示事件产生预期的结果rejected
——已拒绝(已决阶段),表示事件产生偏离预期的结果我们使用网络请求解释三种状态,请求的过程是pedding状态,请求结果状态码为200为resolved状态,请求结果状态码是500为rejected状态
-
pedding
状态具有一定控制走向的能力resolve方法
——将事件推向resolved状态,并且可以传递一些数据reject方法
——将事件推向rejected状态,并且附带一些错误信息只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
-
一旦状态更改,不再变化。任何时候都可以获得结果
-
事件到达已决阶段需要进行后续处理
thenable函数
——作为resolved
状态的后续处理catchable函数
——作为rejected
状态的后续处理
三、基本用法
Promise
是一个容器,保存着在某个未来结束的异步操作的结果
let promise = new Promise((resolve, reject) => {
/*
1.函数内部代码立即执行,不可取消
2.放置ajax请求等异步操作的位置
3.通过调用resolve函数将Promise推向已决的resolved状态
4.通过调用rejected将Promise推向已决的rejected状态
*/
if(/*异步操作成功*/) {
resolve(data)
} else {
reject(error)
}
})
promise.then((res) => {
/*
1.thenable函数,进入resolved状态立即执行
2.当前为pedding状态,加入任务队列
*/
console.log("回调成功")
}).catch((error) => {
/*
1.catchable函数,进入rejected状态立即执行
2.当前为pedding状态,加入任务队列
*/
console.log("回调失败")
})
四、Promise 链式调用
promise
实例,每次then
方法或者catch
方法结束后都会返回一个新的Promise
实例
如果前一个promise
实例的状态是 resolved
并且then()
的回调函数没有出错,将回调函数的返回值作为下一个then
回调函数的参数
const myPromise = new Promise((resolve, reject) => {
resolve('helloWorld');
})
myPromise.then(res => {
console.log(res); // 'helloWorld'
return 1;
}).then(res => {
console.log(res); // 输出1
})
如果前一个promise
实例的状态是 resolved
但是then()
的回调函数发生错误,将抛出的错误信息作为下一个catch
回调函数的参数
const myPromise = new Promise((resolve, reject) => {
resolve('helloWorld');
})
myPromise.then(res => {
console.log(res); // 'helloWorld'
throw new Error("test")
return 1;
}).then(res => {
console.log("data:",res);
}, error => {
console.log("error:", error) //error: Error: "test"
})
如果前一个promise
实例的状态是 rejected
但是then()
的没有处理错误的回调函数,将抛出的错误信息作为下一个catch
回调函数的参数
const myPromise = new Promise((resolve, reject) => {
reject('helloWorld');
})
myPromise.then(res => {
console.log('helloWorld');
//上方触发了reject, 没有相对应的处理catchable函数
//错误直接抛给下一个Promise并触发下一个Promise的rejected状态
}).catch(error => {
console.log("error:",error); //error: helloWorld
})
如果在 then 中使用
return
,那么 return 的值也会Promise.resove()
包装
五、Promise API
(一) Promise.prototype.then()
then()
方法的作用是为 Promise
实例添加状态改变时的回调函数,
接收两个参数,resolved
状态的回调函数和rejected
状态的回调函数。第二个参数可选
then
方法返回的是一个新的Promise
实例,实现链式调用
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
//将上一个回调函数结果作为参数传入第二个回调函数
});
(二)Promise.prototype.catch()
catch()
方法用于指定发生错误时的回调函数,
异步操作抛出错误,状态变为rejected
,立即调用catch()
,并且可以捕获 promise
实例中抛出的错误
在创建Promise实例传入的函数参数中, 如果代码报错, 则会立即触发reject方法
const promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.catch(function(error) {
console.log(error);
});
// Error test
(三) Promise.prototype.finally()
finally()
方法用于指定Promise 对象都会执行的操作,不管最后状态如何
finally
方法的回调函数不接受任何参数
romise
.then(result => {···})
.catch(error => {···})
.finally(() => {···})
(四) Promise.all()
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定,分成两种情况
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数
需要同时等待多个Promise异步操作完成以后再做某件事的话可以用到Promise.all()
const getGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
}, 1000)
})
const getSecGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random() > 0.5) {
resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
} else {
reject("2打了你一巴掌")
}
}, 1000)
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
}, 1000)
})
Promise.all([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
console.log(resp);
}).catch(error => {
console.log(error);
})
(五) Promise.race()
Promise.race()
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。率先改变的 Promise 实例的返回值,就传递给p的回调函数
let intervalTime = () => Math.random() * 2000
const getGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
}, intervalTime())
})
const getSecGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
}, intervalTime())
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
}, intervalTime())
})
Promise.race([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
console.log(resp);
}).catch(error => {
console.log(error);
})
(六)Promise.resolve()
Promise.resolve()
方法将现有对象转为 Promise 对象
Promise.resolve()
方法允许调用时不带参数,直接返回一个resolved
状态的 Promise 对象
(七)Promise.reject()
Promise.reject(reason)
方法也会返回一个新的 Promise 实例,该实例的状态为rejected
六、常见使用
(一)嵌套任务处理
//多个异步任务之间存在依赖性的
getJson("url")
.then(n => {getJson(n[0].url)})
.then(m => {getJson(m[0].url)})
.then(w => {getJson(w[0].url)})
.catch((error => {console.log("异常错误")}))
then
方法返回一个promise
对象,连续调用then
方法就能链式调用promise
- 多个异步任务中可能出现错误,只需要调用一个
catch
方法并向其传入错误处理的回调函数
(二)并行处理任务
// 并行处理多个异步任务
Promise.all([getJson(url), getJson(url), getJson(url)])
.then((resule) => {
// 如果三个请求都响应成功
if (result[0] == 1 && result[1] == 1 && result[2] == 1) {
console.log("请求成功");
}
})
.catch((error) => {
console.log("异常错误");
});
七、实现 Promise
参考文档
https://blog.csdn.net/weixin_44238796/article/details/103159716