异步编程的实现 —— Promise
需要明白
JavaScript是一门单线程语言，不支持多线程，是从上往下一行一行执行的同步任务，这就意味着没法使用多线程来同时处理多个任务，但是js中存在任务队列，当主程序执行完之后，会轮训任务队列依次执行，这也是我们学习的异步任务，使用Promise实现异步操作。
同步：同一时间只能做一个任务；
异步：同一时间做多个任务。
比如：定时器就是异步任务，当程序解读到定时器时，不管定时的时间有多短，它都会被系统抛到任务队列中等侯，等到主程序任务执行完毕，任务队列会依次把定时器再抛回主程序执行。
setTimeout(() => {
console.log("宏任务1");
}, 0)
console.log("主程序同步任务1");
Promise三种状态
pending：进行中
fulfilled：已成功
rejected：已失败
resolved：表示已定型。当状态有pending到fulfilled还是pengding到rejected，只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。
Promise的特点：
Promise：对象的状态不受外界影响。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
Promise：一旦状态改变，就不会再变，任何时候都可以得到这个结果
promise语法
Promise是一个构造函数，需要实例化。这个构造函数的参数是一个函数，该函数接收两个参数。
let p1 = new Promise((resolve, reject) => {
// 成功
resolve();
// 失败
// reject();
});
实例化对象之后，通过then方法分别指定resolved状态和rejected状态的回调函数。
参数1是resolved状态的回调函数；参数2是rejected状态的回调函数，这个参数是可选的，一般用catch方法捕获错误信息，后面会介绍的。
p1.then(result => result, resaon = resaon)
完整的链式操作：
let p1 = new Promise((resolve, reject) => {
// 成功
// resolve();
// 失败
reject();
}).then(success => {
console.log("成功的业务处理 1");
}, fail => {
console.log("失败拒绝的业务处理");
}).then(success => {
console.log("成功的业务处理 2");
}, fail => {
console.log("失败拒绝的业务处理");
});
第一个then方法是处理上面的Promise实例，同时返回一个新的Promise实例对象，第二个then方法是对该新Promise对象的处理，默认是resolved状态，所以是成功的。
Promise微任务队列
Promise的队列是微任务队列，定时器、函数等是宏任务队列。微任务队列同样是等主程序任务执行完成后再执行。
任务执行顺序
整个顺序是：主任务 、微任务队列、宏任务队列。
setTimeout(() => {
console.log("宏任务1");
}, 0)
console.log("主程序同步任务1");
new Promise((resolve, reject) => {
//这里面的代码是同步任务
console.log("Promise中的同步任务");
// 只有success和fail的执行是微任务，也就是对应着then方法的执行放到微任务队列中
// then方法的代码只有在接收到成功或失败的信号时才会执行
resolve(); // 它的位置不影响任务是主程序还是微任务 放到第一行显示还是一样的
}).then(result => {
console.log("成功微任务1");
}, reason => {
console.log("失败微任务2");
})
宏任务中存在微任务
注释里有很清楚的解释。
console.log("主1");
new Promise(resolve => {
// 程序走到这时,是主程序的同步任务
// 遇到定时器时,把它放入到宏任务当中,等到主程序和微任务执行完
setTimeout(() => {
console.log("setTimeout");
// 此时把任务成功失败的标志写在定时器里时就不同了
// 这就代表整个程序只有主任务和宏任务了,主任务执行完之后,开始执行宏任务setTimeout
// 整个定时器会被抛到主任务中,当定时器的所有任务执行完之后(输出setTimeout),才会把resolve抛给微任务
// 主程序执行完了,接着执行微任务 输出成功
resolve(); // 输出: 主1 setTimeout 成功
}, 0);
// resolve(); // 输出: 主1 成功 setTimeout
}).then(reslove => {
console.log("成功");
})
Promise.then()
then方法是处理Promise实例对象的两个状态的回调函数。
then方法实质上也是一个Promise对象，它执行过后返回一个新的Promise对象。
在多个then方法链式调用时，第二个then方法是对第一个then方法处理完Promise返回的新Promise对象的回调函数，依次类推。
let p1 = new Promise((resolve, reject) => {
// 成功
resolve("成功的业务处理 1");
});
let p2 = p1
.then( // 这个then是处理上一个promise
success => console.log(success),
fail => console.log(fail)
) // 下面的then方法默认是对成功状态处理,自动走成功的函数
.then(
success => console.log("success"),
fail => console.log(fail)
);
then返回值的处理
在then中也可以返回一个新的Promise实例对象，则其后面紧接着的then方法是对返回的新Promise的处理。
// Promise后面的then方法是对前面一个Promise的处理.
new Promise((resolve, reject) => {
reject("处理失败了");
})
.then(null, reson => {
console.log(reson);
// 返回了一个Promise,下面接着的then方法就是对这个返回的Promise做处理
return new Promise((resolve, reject) => {
// resolve("成功处理.....");
reject("失败了........")
}) // 处理上面的promise
.then(null,
reason=> {
console.log(reason);
// 下面没有then方法 这个新的Promise实例对象返回出去
return new Promise((resolve, reject) => {
reject("最终还是失败了");
});
});
})
// 是对最里面返回的Promise做处理. 一个Promise对应一个then. 下一个then是一个新的Promise
.then(
res => console.log(res),
reson => console.log("error: " + reson)
)
Promise.catch()
then方法的两个参数中的第二个参数是可选的，是Promise状态为rejected的回调函数，通常我们不使用它，使用catch() 方法捕获错误信息。
let p1 = new Promise((resolve, reject) => {
reject("失败了");
})
.then(success => {
console.log("成功的业务处理 1");
})
.catch(error => console.log(new Error(error)))
Promise.race()
该方法把多个Promise实例包装成一个新的Promise对象。
方法返回的实例的状态取决于 : 率先变换状态的那个Promise实例。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
// Promise.race()方法 返回的是参数实例状态率改变的那个
// 哪个返回的快 使用哪个
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("p1成功")
}, 5000)
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("request timeout"))
// resolve("p2的2秒")
}, 2000)
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("p3的3秒")
}, 3000)
});
const p = Promise.race([p1, p2, p3])
.then(result => console.log(result))
.catch(error => console.log(error));
最先状态改变的是p2，2秒。所以Promise.race() 返回的是p2的状态同时接收p2的返回值作为回调函数的参数。
Promise.finally()
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。
new Promise((resolve, reject) => {
reject("error")
}).finally(() => {
console.log("不管怎样 都会执行");
}).catch(error => error)
Promise.resolve()
把现有的对象变为Promise实例对象的方法。
参数的形式有四种：
- 参数是 Promise实例 ---- 返回实例本身
// 1. Promise实例
const promise = new Promise((resolve, reject) => {
resolve("promise实例本身");
}).then(res => console.log(res));
console.log(promise); // 返回实例本身
- 参数是带有then方法的对象，转换为Promise对象,并立即执行原始对象的then方法
const obj = {
then: function (resolve, reject) {
resolve("带then方法的对象");
}
};
const objPromise = Promise.resolve(obj)
.then(res => console.log(res))
// console.log(objPromise); // 返回Promise实例，并执行源对象的then方法
- 参数是不带the方法的对象或者原始值，返回一个新的Promise对象，并把对应的参数值传给回调函数,状态值为resolved
// 3.不带then方法的对象或者原始值
const originNum = Promise.resolve("hello");
originNum.then(res => console.log(res))
console.log(originNum);
// 4. 没有参数
const nullParams = Promise.resolve();
console.log(nullParams);
Promise.reject()
方法也会返回一个新的 Promise 实例，该实例的状态为rejected。
参数会原封不动的传给实例对象的rejected的回调函数。
const selfReject = Promise.reject("错误程序");
selfReject.then(null, reason => console.log(reason));
console.log(selfReject);
Promise.all()
把多个Promise实例包装成一个新的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的回调函数。
补充一点：若参数实例有自己的catch捕获错误,最终那个实例catch之后的对象是一个新的Promise对象,默认会走成功,
所以,最后带有自己的catch的实例返回状态是resolved
分别测试下这几种情况：
所以Promise实例对象全部返回resolved
const p1 = new Promise((resolve, reject) => {
resolve("p1成功");
});
const p2 = new Promise((resolve, reject) => {
resolve("p2成功"); //1
});
const p3 = new Promise((resolve, reject) => {
resolve("p3成功"); //1
});
const p = Promise.all([p1, p2, p3])
.then(result => {
console.log(result);
})
.catch(error => {
console.log(new Error(error));
})
三个Promise实例都是resolve，所以p结果的状态也是resolve，同时返回参数的返回值。
至少有一个Promise对象返回rejected
const p1 = new Promise((resolve, reject) => {
reject("p1失败"); // 2
});
const p2 = new Promise((resolve, reject) => {
// resolve("p2成功"); //1
reject("p2失败") // 2
// throw new Error("p2失败"); // 2
});
const p3 = new Promise((resolve, reject) => {
resolve("p3成功"); //1
});
const p = Promise.all([p1, p2, p3])
.then(result => {
console.log(result);
})
.catch(error => {
console.log(new Error(error));
})
其中有两个Promise实例的状态有pending变为rejected，则p就为rejected，同时这个实例的返回值返回给p的回调函数。
Promise实例对象中有的存在自己的catch方法
const p1 = new Promise((resolve, reject) => {
resolve("p1成功"); // 1
});
const p2 = new Promise((resolve, reject) => {
reject("p2失败") // 2
// throw new Error("p2失败"); // 2
})
.then(result => result)
.catch(error => error);
const p3 = new Promise((resolve, reject) => {
resolve("p3成功"); //1
});
const p = Promise.all([p1, p2, p3])
.then(result => {
console.log(result);
})
.catch(error => {
console.log(new Error(error));
})
这里要注意，p2有自己的catch方法捕获rejected，所以p接收的p2这个Promise实例，是p2调用catch方法之后返回的一个新的Promise实例对象，该实例对象默认为resolved，所以会走then方法的第一回调函数，故p最终也能接收到由三个resolved的返回值组成的数组。
Promise.allSettled()
方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。
方法最终的返回值是数组，每个成员对应一个传入Promise.allSettled()的 Promise 实例。每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时，对象有value属性，rejected时有reason属性，对应两种状态的返回值。
此方法能够保证传入的所有Promise操作结束.
因为这个方法会保证参数Promise实例对象全部完成后，不管是resolved还是rejected，方法才会返回，并且是fulfilled。
const p1 = new Promise((resolve, reject) => {
resolve("p1成功");
});
const p2 = new Promise((resolve, reject) => {
// resolve("p2成功"); //1
reject("p2 fail")
});
const p3 = new Promise((resolve, reject) => {
resolve("p3成功"); //1
});
const p = Promise.allSettled([p1, p2, p3]);
p.then(results => {
console.log(results);
});
记录每个对象的状态，以及对应状态的消息。
异步加载图片
封装异步加载图片的函数。
function loadImageAscy(src) {
return new Promise(function (resolve, reject) {
const img = new Image();
img.onload = function () {
resolve("加载成功");
}
img.onerror = function () {
reject(new Error("Couled not load images ar " + src));
}
img.src = src;
document.body.appendChild(img);
})
};
loadImageAscy("./bianhua.JPG").then(resolve => {
console.log(resolve);
});
emmmm，看了文档，看了视频，练习了这些方法。着实是有点多啊，还有的方法我没有写出来，我就挑出来感觉比较常用的几个。
加油！！！