一、介绍
1.概念：Promise是es6中新增的一个内置构造函数，它的参数是一个函数，这个函数又有两个参数resolve和reject，resolve和reject也都是函数
resolve(成功结果) 触发.then()小括号里函数体执行
reject(失败结果) 触发.catch()小括号里函数体执行
2.作用：主要是用来优化异步代码(异步解决方案)
3.优点：链式操作降低了编码难度，代码的可读性更高
二、基本语法
const p = new Promise((resolve, reject) => {
resolve(1)
//reject(2)
})
p.then(res => {
console.log('成功啦', res);
}).catch(err => {
console.log('出错啦', err);
}).finally(() => {
console.log('不管成功还是失败,这里都会执行~');
})
三、状态
1.pending 初始化状态 准备中
new出一个实例化Promise对象后就是准备状态
2.resolved/fulfilled 成功
当Promise内代码执行了resolve, 会导致所在的Promise对象 变成 resolved/fulfilled成功状态
3.rejected 失败
当Promise内代码执行了reject, 会导致所在的Promise对象 变成 rejected失败状态
四、值
1.resolve(值），这个值会自动传递给then
2.reject(值)，这个值会自动传递给catch
五、实例方法
1.then（）
（1）概念：then是实例状态发生改变时执行的回调函数
（2）参数：参数1resolved状态的回调函数 ；参数2 rejected状态的回调函数
（3）返回值：新的实例化Promise
//p是一个Promise对象
p.then(函数1[,函数2])
当p的状态从pending变成了resolved，函数1会执行
当p的状态从pending变成了rejected，函数2会执行
一般第二个参数可以省略不写
注意：then()的返回值是一个新promise对象，这个新promise对象的状态和值如何确定？
var p1 = new Promise(()=>{});
var p2 = p1.then(function ok(){}, function err(){});
// p1 p2都是一个promise对象。
console.log(p1 === p2); // false
情况1.如果p1的状态是pending，那么p2的状态也是pending 还在准备中就没有值
情况2.如果p1的状态是resolved ，then里面会执行ok这个函数，那么p2的返回值和状态由ok这个函数来决定
2.1如果ok返回值是一个promise对象，则p2的状态和值都以这个promise对象为准
2.2如果ok返回值不是promise对象，则p2的状态是resolved，值就是ok函数的return值
2.3如果ok这个函数内部发生了错误，则p2的状态是rejected，值就是这个错误对象
情况3.如果p1的状态是rejected，then会去执行err这个函数，则p2的状态由err的返回值决定
2.1如果err返回值是一个promise对象，则p2的状态和值都以这个promise对象为准
2.2如果err返回值不是promise对象，则p2的状态是resolved，值就是err函数的return值
2.3如果err这个函数内部发生了错误，则p2的状态是rejected，值就是这个错误对象
代码感受一下：
var p1 = new Promise(()=>{});
var p2 = p1.then(function f_ok(){}, function f_err(){}); // p2也是一个promise对象。
console.dir(p1); // pending
console.dir(p2); // pending
var p1 = new Promise((resolve,reject)=>{ resolve()});
var p2 = p1.then(function f_ok(){
var temp = new Promise((resolve,reject)=>{ resolve({a:1}) });
return temp;
}, function f_err(){});
console.dir(p2); // resolved, {a:1}
var p1 = new Promise((resolve,reject)=>{ resolve()});
var p2 = p1.then(function f_ok(){
console.log(abc); // 这里故意犯错
}, function f_err(){});
console.dir(p2);
2.catch（）
一般来说，使用catch 方法代替then()第二个参数
返回值：也是一个新的promise对象
作用：捕获promise抛出的错误
3.finally（）
不管 Promise 对象最后状态如何，finally()方法里面的代码都会执行
六、静态方法
1.all()
作用: 合并多个Promise对象, 等待所有成功后, 返回结果
参数: 是一个由多个Promise对象组成的数组
返回值: 返回的结果是个数组, 值是Promise对象按顺序排列的成功结果
p1,p2,p3全成功,p则成功,返回数组
p1,p2,p3只要有一个不成功,p就失败,返回的是第一个失败的promise的返回值
const p = Promise.race([p1, p2, p3]);
2.allSettled()
参数和作用和all()方法一样
返回值: 是一个数组 无论p1,p2,p3是否成功 都逐一对应返回p1,p2,p3的状态和值
3.race()
作用: 发起并行多个Promise对象, 等待只要任何一个有结果(成功|失败), 返回结果执行then
参数: 是一个由多个Promise对象组成的数组
返回值:第一个有结果的promise对象的结果
简单来说 谁先成功或失败就返回谁的值
4.resolve()
创建一个状态为resolved的promise对象
5.reject()
创建一个状态为rejected的promise对象
七、真实面试题：
让sleep 的功能与setTimeout一样：就是等2000毫秒之后再执行then中的回调函数
function sleep(time) {
// 请写出你的代码
return new Promise((resolve, reject) => {
setTimeout(resolve, time)
})
}
sleep(2000).then(() => {
console.log("后续操作")
})
console.log(2);
八、封装自己的ajax请求
function myAjax({ url, method = "GET" }) {
const xhr = new XMLHttpRequest()
xhr.open(method, url)
xhr.send()
const p = new Promise((resolve, reject) => {
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 400) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
})
})
return p
}
//测试-----------------------------------------------------------------------
myAjax({
url: '',
// method: ''
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
