目录
2、async函数
异步编程
笔试题：
//笔试题 .catch调用的条件
var p1=new Promise(function(n1,n2) {
var re =new Error("hello")
n1(re)
})
p1.then(function (data) {
console.log(data) //这个会打印
})
.catch(function (e) { //当产生了错误数据==>n2调用 或者 创建错误，并且throw抛出错误，这个函数才会调用
console.log(e) //这个不会打印
})
任务队列和事件循环
setTimeout(() => {
console.log(0);
});
new Promise(resolve => {
console.log(1);
setTimeout(() => {
resolve();
var p1 = new Promise((n1, n2) => {
n1(20)
})
p1.then(() => console.log(2));
console.log(3);
setTimeout(()=>{console.log(9)},0)
});
new Promise((n1, n2) => {
n1(20)
}).then(() => console.log(4));
}).then(() => {
console.log(5);
var p2 = new Promise((n1, n2) => {
n1(20)
})
p2.then(() => console.log(8));
setTimeout(() => console.log(6));
});
console.log(7);
//1740352896es6 提供了一些构造函数：Map、Set、Promise 等等
1、promise对象
（1）概述
-
promise是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
-
Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。
-
Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。
-
Promise是一个构造函数，其原型上有then、catch方法，对象上有reject、resolve方法。
-
new promise 是一个特殊的对象，它内部的数据是自己产生的。取数据要 调用函数==>then方法 来取 （数组：保存了数据以后取数据用下标来取值；对象：用属性名取值；Map：用get方法来取值；set：用遍历器来取值。）
前期思想准备：
//回调的思想
//1、同步的设计思想
function createData(){
return parseInt((Math.random()*(90-50)+50))
}
var obj={
data:100,
tool:function(){
var data=createData()
this.data=data
}
}
obj.tool()
console.log(obj.data)
//2、异步的设计思想-回调函数
function createData(callback) {
callback(parseInt((Math.random() * (90 - 50) + 50)))
}
var obj = {
data: 100,
tool: function() {
createData((n) => {
this.data = n
})
}
}
obj.tool()
console.log(obj.data) //异步编程的思想
//阻塞异步
fn1(function(){console.log(1)})
//官方提供的非阻塞异步函数
setTimeOut(function(){console.log(2)})（2）promise使用
Promise函数不是异步函数非阻塞函数，它是一个同步函数，then函数是一个异步非阻塞函数
setTimeout()函数是一个非阻塞的异步函数
setTimeout(()=>{console.log(11)},3000) //第三秒时打印11
setTimeout(()=>{console.log(22)},4000) //第四秒时打印22
后端的fs.readFile()函数也是一个非阻塞的异步函数
es6 中的promise对象的then函数也是一个非阻塞的异步函数
//1.Promise是一个ES5已经出现了 ES6直接写入标准
//2.Promise是一个构造函数 创建了一个数据容器
// map set arr object 被动产生数据 给它添加数据
//Promise主动产生数据 不用给它添加数据 而是它自己产生数据
通过new关键字创建Promise对象
var p = new Promise(function(resolve, reject){//参数传回调函数，resolve和reject 都是函数 //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000); });参数说明：
resolve：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数
resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。
上面的代码中，直接通过new创建了Promise对象，并没有调用它，但是传进去的函数已经执行了。因此我们用Promise的时候一般是包含在一个函数中，在需要的时候去运行这个函数。
function runAsync(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); return p; } runAsync()
在我们包装好的函数最后，通过return返回了一个Promise对象。也就是说调用这个包装函数可以得到Promise的对象，接下来就可以使用Promise对象上的then与catch方法了。
runAsync().then(function(data){ console.log(data); //后面可以用传过来的数据做些其他操作 //...... });在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，函数的参数data将会拿到我们在runAsync中调用resolve时传的的参数。
此时then里面的函数就是回调函数，能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
自己封装回调函数
function runAsync(callback){ setTimeout(function(){ console.log('执行完成'); callback('随便什么数据'); }, 2000); } runAsync(function(data){ console.log(data); });效果与之前的是一样的。但如果有多层回调怎么办？如果callback也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个callback2，然后给callback传进去吧。而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。
p1数据容器取数据用then函数，then函数是一个异步函数
// then函数的返回值是 一个新的promise对象
// 是then传入的回调函数的返回值:
// 1.如果是一个promise对象 那么就是它
// 2.如果不是一个promise对象,那么就会把函数的结果包装为一个生成数据了的promise对象
var p1=new Promise(function(n1,n2) {
//n1 n2都是函数 ==> n1 和 n2 一样
n1(200) //p1数据容器内部产生了业务正确的数据：200。n1调用会触发p1对象内部产生数据
// n2(404) //p1数据容器内部产生了业务错误的数据：404。n2调用会触发p1对象内部产生数据
})
console.log(p1)
p1.then(function(data){ //取数据。可以多次取
console.log(data) //200
}) 
var p1=new Promise(function(n1,n2) {
n2(404)
n1(100) //这个不会调用，n1和n2谁先写，就调用谁，会面的就不会再调用了，就像return一样
})
console.log(p1)
p1.then(function(data){ //如果这个函数调用了，就会产生正确的数据
console.log(data) //这个不会运行。
},function(err){ 如果这个函数调用了，就会产生错误的数据
console.log(err) //404
}) （3）链式操作用法
从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。运行结果如下：
runAsync1、runAsync2、runAsync3三个函数定义：
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}
在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了。
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
})
.then(function(data){
console.log(data);
});执行结果如下：
//可以不用传then的第二个回调函数
//p1对象then函数的返回值 一定是Promise对象
// then的返回值看then的传入的回调函数参数 ，传入的回调函数的返回值是Promise对象，then的返回值就是它，反之就把返回值创建一个Promise对象作为返回值
var p1=new Promise(function(n1,n2) {
n1(200)
})
var re=p1.then(function(){
console.log(data) //200 这是p1的数据
return 100
})
//re 是一个新的Promise对象，这个新的Promise内部的数据是100
//取这个新的Promise中的数据
re.then(function(data) {
console.log(data) //100 这个re的数据
})
//以上代码就知道有链式调用==> p1.then().then().then()....
//返回值是一个Promise对象
var p1 = new Promise(function (n1, n2) {
n1(200)
})
var re = p1.then(function (data) {
console.log(data) //200
return new Promise(function (n1, n2) {
n1(500)
})
})
re.then(function (data) {
console.log(data) //500
})
//在链式调用的过程中，只要有一个捕获，把错误处理了，就不会报错
//下面第二个Promise捕获了错误，p1就不用去处理错误了
p1.then(function (data) {
console.log(data, 1)
})
.catch(function (e) { //这里的.catch是第二个Promise对象取.catch,不是p1
console.log(e)
})
（4）reject的用法
事实上，我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num); //执行成功
}
else{
reject('数字太大了'); //执行失败
}
}, 2000);
});
return p;
}
getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(error, data){
console.log('rejected');
console.log(error);
}
);getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。
运行getNumber并且在then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码，你会随机得到下面两种结果：
（5）catch的用法
对象内部产生了错误数据或者抛出（throw）了错误信息，catch方法传入的回调函数就会运行
我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
}).catch(function(reason){
console.log('rejected');
console.log(reason);
});效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});在resolve的回调中，我们使用了console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到这样的结果：
也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。
执行ajax请求的结构代码：
//catch方法：1、捕获Error抛出的错误 2、捕获n2的错误
var p1=new Promise(function(n1,n2) {
var re=new Error("hello")
//Error 打出是黑色的，抛出是红色的
throw re
// n2(100)
})
p1.catch(function (e) {
console.log(typeof e,e) //object Error: hello //捕获Error抛出的错误
// console.log(typeof e,e) //number 100 捕获n2的错误
}) //抛出的错误必须是捕获。产生的错误可以用then的第二个回调函数
var p1=new Promise(function(n1,n2) {
var re=new Error("hello")
throw re
})
p1.then(function(data) {
console.log(data,1)
},function(err) {
console.log(err,2)
}) //会报错
//p1对象中产生了错误数据，必须先处理，否则会报错==>Uncaught (in promise) 404
//处理错误的两种方式：
//1、catch方法用一个函数将错误数据接收了
//2、then方法的第二个回调函数
var p1=new Promise(function(n1,n2) {
n2(404)
})
p1.then(function(err){
console.log(err) //报错：Uncaught (in promise) 404 因为错误数据没处理
});
p1.catch(function (e) {
console.log(typeof e,e) //number 404 它可以正常运行
})
2、async函数
（1）async
async 是 ES7 才有的与异步操作有关的关键字，和Promise有很大的关联。
-
语法：
async function name(param) { statements }参数说明：
-
name: 函数名称。
-
param: 要传递给函数的参数的名称。
-
statements: 函数体语句。
-
-
返回值
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。
async function helloAsync(){ return "helloAsync"; } console.log(helloAsync()) // Promise {<resolved>: "helloAsync"} helloAsync().then(data => { console.log(data); // helloAsync })
（2）await
async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。
语法：
[return_value] = await expression;参数说明：
expression: 一个 Promise 对象或者任何要等待的值。
返回值
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果。
正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。
await针对所跟不同表达式的处理方式：
Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
非 Promise 对象：直接返回对应的值。
示例1： await后面是一个Promise对象(函数调用结果)：
function testAwait() {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log("返回一个promise对象");
resolve("返回数据")
}, 2000)
});
}
async function helloAsync() {
var a = await testAwait();
console.log(a);
console.log("helloAsync");
}
helloAsync();
//执行结果：
//返回一个promise对象
//demo.html:25 返回数据
//demo.html:26 helloAsync示例2：await后面是一个Promise对象：
async function haha(){
await new Promise(function(res,rej){
setTimeout(function(){
console.log(1)
res(123123)
},2000)
})
console.log(2);
}
haha()面试题——任务的队列分类和时间循环
任务指的是JS代码中的运行的代码 （任务：同步的任务 、 异步的任务）
（fn() 代表了fn任务的运行 脚本也是一个任务 计时器的运行也是一个任务 promise也是一个任务）
异步任务的队列优先级: 异步宏任务先执行 ==> 执行异步微任务
任务开启后:内部执行的时候可能会有新的任务
宏:脚本就是一个宏任务
脚本运行 执行第一个宏任务:
1. 先执行同步任务
2.添加新的宏任务到队列中 添加新的的异步微任务
3.执行异步微任务
事件循环....
（P1.then==>异步微任务 全局脚本和setTimeout==>异步宏任务 Promise==>同步任务）
console.log(4)
setTimeout(() => {
setTimeout(()=>{console.log(6)},0)
console.log(1)
var p2 = new Promise((n1, n2) => {
n1(1000)
})
p2.then(()=>{console.log(7)})
}, 0)
setTimeout(() => {
setTimeout(() => {console.log(2)}, 200)
var p3 = new Promise((n1, n2) => {
n1(1000)
})
p3.then(()=>{console.log(8)})
console.log(2)
}, 0)
var p1 = new Promise((n1, n2) => {
n1(1000)
})
p1.then(() => {console.log(3)})
console.log(5)
//453172862
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
