单线程和异步
为什么是单线程
什么是进程？
进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）
什么是线程？
线程：是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
浏览器是多进程的
放在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。 所以，浏览器是一个多进程的。
大家都在说js是单线程的，但是为什么要设计成单线程？
这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。 为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
js是单线程语言，只能同时做一件事，js引擎线程会影响和UI渲染线程（dom解析渲染，同步的js执行完会触发dom渲染）遇到网络请求、图片资源请求、定时任务不能让网页整个卡住，且网络请求的过程cpu是空闲的，所以需要异步，异步不会阻塞代码执行，继续执行下面的代码，等异步请求完成了再用callback方法去执行依赖这个异步结果的操作，因为异步需要调用回调函数，所以有了eventloop
应用场景
网络请求、图片资源请求、定时任务
callback hell回调地狱和 promise
promise解决callback hell回调地狱的问题
eventLoop 事件循环/事件轮询
1、js是单线程运行的
2、异步要基于回调来实现
3、event loop就是异步回调的实现原理
4、事件循环由宏任务和在执行宏任务期间产生的所有微任务组成。完成当下的宏任务后，会立刻执行所有在此期间入队的微任务。
这种设计是为了给紧急任务一个插队的机会，否则新入队的任务永远被放在队尾。区分了微任务和宏任务后，本轮循环中的微任务实际上就是在插队，这样微任务中所做的状态修改，在下一轮事件循环中也能得到同步。
5、浏览器的事件循环
浏览器的事件循环由一个宏任务队列+多个微任务队列组成。
首先，执行第一个宏任务：全局Script脚本。产生的的宏任务和微任务进入各自的队列中。执行完Script后，把当前的微任务队列清空。完成一次事件循环。
接着再取出一个宏任务，同样把在此期间产生的回调入队。再把当前的微任务队列清空。以此往复。
宏任务队列只有一个，而每一个宏任务都有一个自己的微任务队列，每轮循环都是由一个宏任务+多个微任务组成
6、node11.x 之前，其事件循环的规则就如上文所述：先取出完一整个宏任务队列中全部任务，然后执行一个微任务队列。
但在11.x 之后，node端的事件循环变得和浏览器类似：先执行一个宏任务，然后是一个微任务队列。但依然保留了宏任务队列和微任务队列的优先级。
JS如何执行
1、从前到后，一行一行执行（函数先执行声明不执行内部，到调用的时候再执行内部）
2、如果某一行执行报错，则停止下面代码的执行（抛出异常会继续往下执行）（alert会阻止后面的代码执行和dom渲染）
3、先把同步代码执行完，再执行异步
event loop
1、同步代码，一行一行放在call stack中执行
2、遇到异步，会先“纪录”下，等待时机（浏览器操作 定时、网络请求 DOM事件等）
3、时机到了，就移到callback queue
时机 （1）、每次call stack清空及同步任务完成 （2）是否有微任务，如果有微任务先执行微任务（3）检查DOM树逻辑是否有变化，如果有变化更新页面重新渲染DOM（4）是否有宏任务
4、如 call stack为空（同步代码执行完）event loop开始工作
5、轮询查找callback queue， 如有则移动到 call stack执行
6、然后继续轮询查找（永动机一样）
7、dom事件也使用回调，基于eventloop
宏任务和微任务
1、宏任务： settimeout setInterval、ajax、DOM事件 是由浏览器规定的
2、微任务： Promise async/await 是由ES6语法规定的 ，微任务仅来自于我们的代码。它们通常是由 promise 创建的：对 .then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await 的“幕后”，因为它是 promise 处理的另一种形式。
3、微任务在DOM渲染前，宏任务在DOM渲染后
4、
图解
先把console.log('hi')放到call stack中执行，执行结束出栈
再把settimeout放到call stack中执行， 则是会把timer cb1异步函数放到web api中
settimeout执行结束出栈
console.log('bye')进栈
console.log('bye')执行结束出栈，此时栈里空闲，尝试dom渲染，触发eventloop
Promise
ES6 Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象
Promise是一个容器，里面保存着某个未来才会结束的事件的结果 从语法上说，Promise是一个对象，从它可以获取异步操作的消息
用Promise构造函数创建一个promise实例,promise的实例才有then、catch等方法，才可以在then、catch等方法中捕获自己想要的结果
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。他们是两个函数，由js引擎提供，不用自己部署
resolve函数的作用是 将Promise实例的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去,在promise实例的then中捕获结果。
const setDelay = (millisecond) =>{
return new Promise((resolve, reject)=>{
if(typeof millisecond!=='number'){
reject(new Error('参数必须是数字'))
}
setTimeout(()=>{
resolve(`我延迟了${millisecond}毫秒后输出的`)
// return resolve(`我延迟了${millisecond}毫秒后输出的`) 这样写和上面的结果是一样的，resolve(...)的返回值是undefined
},millisecond)
})
}
setDelay('3000').then((result)=>{
console.log('result',result)
}).catch((error)=>{
console.log('error',error)
})
1、Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2、pending-> fulfilled 或者 pending-> rejected
3、变化不可逆
4、resolve触发后续then的回调函数(把resolve（xxx）的xxx传给回调函数的参数)，reject触发后续catch的回调函数
4、then正常返回fulfilled状态的promise（只要不报错 无论是否return都会返回fulfilled，如果return xx resolve出值了相当于resolve(xx) 否则为undefined 相当于resolve(undefined)），里面有报错返回rejected
fetchCurrentUser(context) {
console.log('actions,,,,,,,fetchCurrentUser,,,,,,');
// 把then里的结果返回出去是promise（fulfilled） 这么写就可以把异步执行完 在处理接下来的事件
return http.get('/user/current')
.then(res => {
if (res.data.code === 0) {
console.log('获取用户信息成功', res);
context.commit('fetchCurrentUser', res.data)
// return res.data;
}
}).catch(error => {
console.log('获取用户信息失败', error);
})
},
fetchCurrentUser().then(xxxx)
// ！！！then里return promise 可以等return的promise异步有了结果之后再执行下面的then
http.get(api.userInfo, {
token,
}).then(response => {
const user = response.obj
if (user) {
return http.invokeApi(api.auth.user.create)({ // 注意then，没有then不会等这个请求回来再执行下面的then
empAccount: user.useraccount,
}).then(({ data }) => context.commit(SET_USER_INFO, data))
} else {
context.dispatch(LOAD_ACCOUNT_INFO, '')
}
}).then(() => {
return utils.configClient.getItem('default-menus').then((data) => { 注意then
DEFAULT_MENUS = data || [];
})
}).then(() => {
......
}
5、catch正常返回fulfilled（只要不报错 无论是否return都会返回fulfilled），里面有报错返回rejected
async/await
// async 说明函数里面的东西是异步的，但他可以用await让异步的内容 按 同步的顺序执行
// 在async里的await函数，可以把代码执行暂停在该行上，直到await的异步代码返回结果 再接着执行下面的代码
const func = async ()=>{
const a = await setDelay(4000); // await等待一个Promise实例，上面的setDelay函数，返回一个promise实例，
// 且setDelay函数中有resolve改变promise的状态以及抛出结果，a就是这个结果
console.log('aaaa',a)
}
func();
// await Promise.all[] 等待多个Promise
1、解决异步回调地狱 callback hell
2、Promise then catch 链式调用，但也是基于回调函数
3、async/await是同步语法 语法糖，彻底消灭回调函数 和 promise并不互斥而是相辅相成
4、执行async函数，返回的是Promise对象，用普通的函数返回promise也行（一样的效果），可以用await去等待这个函数
5、await相当于Promise的then (相当于 Promise.resolve(xx).then((xx)=>{})，await到的结果就是xx)。
await Promise.resolve(100)的结果是100，如果等待的Promise是rejected，那么await then后面的不执行，要用try catch捕获异常
6、try catch可以捕获异常，代替了Promise的catch
// 捕获异常
async function asyncPrint(ms) {
try {
console.log('start');
await timeout(ms); //这里返回了错误
console.log('end'); //所以这句代码不会被执行了
} catch(err) {
console.log(err); //这里捕捉到错误error
}
或
async function asyncPrint(ms) {
console.log('start');
await timeout(ms)
console.log('end'); //这句代码不会被执行了
}
asyncPrint(1000).catch(err => {
console.log(err)； // 从这里捕捉到错误
});
// 只要async函数内部不报错返回fulfilled状态的promise，!!!!!!
// 如果async函数内部return xx 相当于 return Promise.resovle(xxx),
// 不return相当于return Promise.resovle(undefined)
async function f1(){
console.log(100); //1 只要async函数内部不报错返回fulfilled状态的promise
};
!(async function f2(){
const a = f1();
console.log('a',a)//2 a Promise {<fulfilled>: undefined}
const b = await f1();
console.log('b',b); // b undefined
})();
async function f1(){
return 100; //1 如果async函数内部return xx 相当于 return Promise.resovle(xxx)
};
!(async function f2(){
const a = f1(); // 执行f1() 返回promise
console.log('a',a)//2 a Promise {<fulfilled>: 100}
const b = await f1(); // 等待f1执行的resolve的结果 100
console.log('b',b); // b 100
})();
// 如果报错返回rejected的Promise
async function f1(){
throw new Error();
// 或者 都会报错 都是rejected
console.log(c)
};
!(async function f2(){
const a = f1();
console.log('a',a) // Promise {<rejected>: Error
const b = await f1();
console.log('b',b); // 报错 走不到这里 因为这里是then ！！！
})();
async function f1(){
console.log(c)
};
!(async function f2(){
try {
const b = await f1();
console.log('b',b);
} catch(error){
console.log('error',error) // 抛出异常不会阻塞代码执行
}
})();
// async 函数执行完就会返回Promise, onload里的东西最后执行，所以下面这种写法无用
async function f1(){
const image = document.createElement('img');
image.onload = () =>{
console.log('onload!!!!')
return image
}
image.onerror = () =>{
console.log('onerror!!!!')
throw new Error('image load failed')
}
console.log('123');
image.src = 'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0bd5426d172d~tplv-t2oaga2asx-image.image'
return image
};
!(async function f2(){
try {
const a = f1();
console.log('a',a);
const b = await f1();
console.log('b',b); // async直接返回promise这里直接执行，后来才执行onload！！！
} catch(error){
console.log('error',error)
}
})();
123
a Promise {<fulfilled>: img}
123
b <img src="https://user-gold-cdn.xitu.io/2020/6/20/172d0bd5426d172d?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1">
onload!!!!
// 下面合理
async function f1(){
const promise = new Promise((resolve, reject)=>{
const image = document.createElement('img');
image.onload = () =>{
console.log('onload!!!');
resolve(image)
}
image.onerror = () =>{
console.log('onerror!!!');
reject(image)
}
console.log('123');
image.src = 'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/6/20/172d0bd5426d172d~tplv-t2oaga2asx-image.image'
})
console.log('456')
return promise
};
!(async function f2(){
try {
const a = f1();
console.log('a',a);
const b = await f1();
console.log('b',b); // 在load之后执行
} catch(error){
console.log('error',error)
}
})();
123
456
a Promise {<pending>}__proto__: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: img
123
456
onload!!!
b <img src="https://user-gold-cdn.xitu.io/2020/6/20/172d0bd5426d172d?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1">
for ...in 和 for...of
1、for ...in 以及 forEach是同步遍历 执行完一起调回调
2、for of 是异步遍历 一个异步执行完，在开始另一个异步
