1. Promise 是什么?
1.1概念
- 从语法上来说: Promise 是一个构造函数
- 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/
失败的结果值
1.2.promise 的状态改变
- pending 变为 resolved
- pending 变为 rejected
说明: 只有这 2 种, 且一个 promise 对象只能改变一次
无论变为成功还是失败, 都会有一个结果数据
成功的结果数据一般称为 value, 失败的结果数据一般称为 reason
1.3 promise 的基本流程
1.4promise基本使用
- 1.基本编码流程
.then((res)=>{})回调里的参数res,是resolve()返回的值
// 1.创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
// 2.在执行器函数中启动异步任务
setTimeout(() => {
const time = Date.now();
if (time % 2 === 1) {
resolve("成功的值" + time);
} else {
reject("失败的值" + time)
}
}, 2000);
})
p.then((value) => { //3.成功的回调函数resolve()
console.log("成功的value", value);
}, (reason) => { //4.失败的回调函数reject()
console.log("失败的reason", reason);
})
//成功的value 成功的值1634534302647
- 2.使用 promise 封装 ajax 异步请求
function promiseAjax(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
const { status, response } = xhr;
// 请求成功,调用resolve()
if (status >= 200 && status < 300) {
resolve(JSON.parse(response));
} else { //请求失败,调用reject()
reject(new Error("请求失败:status" + status))
}
};
xhr.open("GET", url);
xhr.send()
})
};
// 调用promiseAjax
promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video').then(
data => {
console.log("显示成功数据" + data);
},
error => {
console.log(error.message);
}
)
2.如何使用 Promise?
2.1 API
1. Promise 构造函数
Promise (excutor) {}
executor 函数: 执行器 (resolve, reject) => {}
说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行
2. Promise.then ()
Promise.prototype.then ((onResolved, onRejected) => {})
(1) onResolved 函数: 成功的回调函数 (value) => {}
(2) onRejected 函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
返回一个新的 promise 对象
let p = new Promise((resolve, reject) => {
// 同步调用
console.log("111");
// reject('error');
resolve('success')
});
console.log("2222");
p.then((res) => {
console.log(res);
},(err) => {
console.log(err);
})
3.Promise.catch()
Promise.prototype.catch ((onRejected) => {})
onRejected 函数: 失败的回调函数 (reason) => {}
// 状态为reject,执行p.catch
p.catch((reason) => {
console.log(reason);
})
4.resolve()
Promise.resolve 方法: (value) => {}
返回一个成功/失败的 promise 对象
//1.如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
let p1 = Promise.resolve(100);
console.log(p1); //Promise { 100 }
// 2.如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
resolve("ok");
// reject("error");
}));
p2.then((value) => {
console.log(value); // "ok"
}, (reason) => {
console.log(reason);
})
5.reject()
Promise.reject 方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的 promise 对象
let p = Promise.reject("123");
console.log(p); //Promise { <rejected> '123' }
6.Promise.all ()
Promise.all 方法: (promises) => {}
promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败
let p1 = new Promise((resolve, reject) => {
resolve("ok");
});
// let p2 = Promise.resolve('success');
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('Oh Yeah');
const result = Promise.all([p1, p2, p3]);
console.log(result);
7.Promise.race()
Promise.race 方法: (promises) => {}
promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(console.log("ok"))
}, 5000);
})
let p2 = Promise.resolve("seccess");
let p3 = Promise.reject("error");
const result = Promise.race([p1, p2, p3]);
console.log(result); //5s后 ok
3.Promise几个关键问题
1.如何改变 promise 的状态?
- 调用resolve(),pending 就会变为 resolved
- 调用reject(),pending 就会变为 rejected
- 抛出异常: 如果当前是 pending 就会变为 rejected
2.一个 promise 指定多个成功/失败回调函数, 都会调用吗?
- 当 promise 改变为对应状态时都会调用
3.promise.then()返回的新 promise 的结果状态由什么决定?
- 由 then()指定的回调函数执行的结果决定
4.promise 如何串连多个操作任务?
- then的链式调用
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
}, 2000);
})
p.then((value) => {
return new Promise((resolve, reject) => {
resolve("ok");
})
}).then((value) => {
console.log(value); //ok
}).then((value) => {
console.log(value); //undefined
})
5.promise 异常传透?
- (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
- (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
// reject("error");
}, 2000);
})
p.then(value => {
// console.log(1111);
throw ("失败啦");
}).then(value => {
console.log(2222);
}).then(value => {
console.log(3333);
}).catch(reason => {
console.log(reason);
})
6.中断 promise 链?
- (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
- (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ok");
}, 2000);
})
p.then(value => {
console.log(1111);
// 返回一个pending状态的Promise
return new Promise(() => { })
}).then(value => {
console.log(2222);
}).then(value => {
console.log(3333);
}).catch(reason => {
console.log(reason);
})
4.手写Promise
class Promise {
//构造方法
constructor(executor) {
//添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
//声明属性
this.callbacks = [];
//保存实例对象的 this 的值
const self = this;// self _this that
//resolve 函数
function resolve(data) {
//判断状态
if (self.PromiseState !== 'pending') return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = 'fulfilled';// resolved
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
//调用成功的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onResolved(data);
});
});
}
//reject 函数
function reject(data) {
//判断状态
if (self.PromiseState !== 'pending') return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = 'rejected';//
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
//执行失败的回调
setTimeout(() => {
self.callbacks.forEach(item => {
item.onRejected(data);
});
});
}
try {
//同步调用『执行器函数』
executor(resolve, reject);
} catch (e) {
//修改 promise 对象状态为『失败』
reject(e);
}
}
//then 方法封装
then(onResolved, onRejected) {
const self = this;
//判断回调函数参数
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== 'function') {
onResolved = value => value;
//value => { return value};
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type) {
try {
//获取回调函数的执行结果
let result = type(self.PromiseResult);
//判断
if (result instanceof Promise) {
//如果是 Promise 类型的对象
result.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
//结果的对象状态为『成功』
resolve(result);
}
} catch (e) {
reject(e);
}
}
//调用回调函数 PromiseState
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolved);
});
}
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected);
});
}
//判断 pending 状态
if (this.PromiseState === 'pending') {
//保存回调函数
this.callbacks.push({
onResolved: function () {
callback(onResolved);
},
onRejected: function () {
callback(onRejected);
}
});
}
})
}
//catch 方法
catch(onRejected) {
return this.then(undefined, onRejected);
}
//添加 resolve 方法
static resolve(value) {
//返回promise对象
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
//状态设置为成功
resolve(value);
}
});
}
//添加 reject 方法
static reject(reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
}
//添加 all 方法
static all(promises) {
//返回结果为promise对象
return new Promise((resolve, reject) => {
//声明变量
let count = 0;
let arr = [];
//遍历
for (let i = 0; i < promises.length; i++) {
//
promises[i].then(v => {
//得知对象的状态是成功
//每个promise对象 都成功
count++;
//将当前promise对象成功的结果 存入到数组中
arr[i] = v;
//判断
if (count === promises.length) {
//修改状态
resolve(arr);
}
}, r => {
reject(r);
});
}
});
}
//添加 race 方法
static race(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
//修改返回对象的状态为 『成功』
resolve(v);
}, r => {
//修改返回对象的状态为 『失败』
reject(r);
})
}
});
}
}