回调函数和异步是js语言特性的两大最为突出的点,其中异步,就有我们学习的promise
ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。
1、函数构造Promise(excutor)
要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。
excutor:
- Promise构造函数接受一个执行器作为参数(excutor,其实就是一个回调函数),在Promise构造函数执行时,会立即执行传入的excutor。
- excutor函数被调用时,会传入resolve, reject两个函数作为参数;当resolve函数被调用,Promise状态变更为fulfilled(完成);当reject函数被调用,Promise状态变更为rejected(失败)
var promise = new Promise(function(resolve, reject) { //这里就是一个构造器
console.log("执行构造器")
// 异步处理
// 处理结束后、调用resolve 或 reject
});
2.Promise的状态
Promise 对象代表一个异步操作,有三种状态:
- pending: 初始状态。
- fulfilled: 操作成功完成。
- rejected: 操作失败。
- Promise英语翻译过来的意思就是「承诺」,这样就可以理解成,你承诺一件事情的三个阶段,承诺的开始,执行承诺失败,执行承诺成功。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
- 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
3.实际中的方法
.then
then方法本身会自动返回一个新的Promise对象(异步执行),onFulfilled 是用来接收promise成功的值,onRejected 是用来接收promise失败的原因,.then方法注册,当resolve(成功)/reject(失败)的回调函数。
- resolve(成功) onFulfilled会被调用
const promise = new Promise((resolve, reject) => {
resolve('fulfilled'); // 成功时:状态由 pending => fulfilled
});
promise.then(result => {
console.log(result); // 'fulfilled' ,此时的result便是上面的 resolve()传递过来的'fulfilled'
}, reason => { // onRejected 不会被调用
})
- reject(失败) onRejected会被调用
const promise = new Promise((resolve, reject) => {
reject('rejected'); // 失败时:状态由 pending => rejected
});
promise.then(result => { // onFulfilled 不会被调用
}, reason => { // onRejected
console.log(rejected); // 'rejected'
})
如果有两个.then,那么第一个回调函数的完成之后,会将返回的结果作为参数,传入第二个回调函数,如果前一个回调函数返回的Promise对象,这是一个回调函数就会等待该Promise对象有了结果,才会进行下一步。
const promise = new Promise((resolve, reject) => {
console.log("excutor函数会被立即执行");
resolve("状态变更为:fulfilled");
});
promise.then(
(res) => {
return new Promise((resolve, reject) => {
resolve("onFulfilled中返回的Promise");
});
},
(reason) => {
return new Promise((resolve, reject) => {
resolve("onRejected回调中也可以返回Promise");
});
}
).then((res) => {
console.log(res);//onFulfilled中返回的Promise
});
.catch
.catch方法是返回一个新的Promise对象(异步执行),给Promise添加onRejected回调
const promise = new Promise((resolve, reject) => {
reject(100);
});
promise
.catch((reason) => {
console.log(reason); //100
return 200; //catch函数返回值将作为新Promise的resolve结果
})
.then((res) => {
// 新Promise执行结果
console.log(res); //200
});