javaScript异步编程--笔记
1、异步编程–单线程
JS执行环境中负责执行代码的线程只有一个，排队等待执行。
特点总结如下：
- 同步模式与异步模式
- 事件循环与消息队列
- 异步编程的几种方式
- Promise 异步方案、宏任务/微任务队列
- Generator异步方案、Async/Await语法糖
2、同步模式
大多数是同步执行，并不是同时执行，而是排队，按顺序执行。
缺点，如果耗时比较长的话，会造成阻塞，会出现卡死的现象。
3、异步模式
不会去等待这个任务的结束才开始下一个任务。
难点，代码的执行顺序混乱。
消息队列，逐步执行
执行顺序图
备注：js是单线程的，但浏览器不是单线程的。有一个线程去监控倒计时，当倒计时结束之后，负责把这个任务放入消息队列。
4、回调函数
所有异步编程方案的根基。
由调用者定义，交给执行者执行的函数。
5、Promise概述
原始的回调地狱问题
6、Promise基本用法
const promise = new Promise(function(resolve,reject){
//这里用于 兑现 承诺
resolve(100);//承诺达成
//reject(new Error('promise rejected'));// 承诺失败
});
promise.then(function(val){
console.log('resolved',val);
},function(error){
console.log('rejected',error);
})；
console.log('end');//end先输出，因为即使Promise里边没有时间延迟，但也需要放进消息队列执行，所以end先输出
7、Promise使用案例
function ajax(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
if( this.status == 200 ){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}；
xhr.send();
})
}
ajax('/api/user.json').then(function(res){
console.log(res);
},function(error){
console.log(error);
})
8、Promise链式调用
then方法之后返回的也是一个promise对象。
每一个then方法实际上都是在为上一个then返回的promise对象添加状态明确之后的回调。
依次执行。
使用链式调用去代替之前的回调嵌套。
总结：
- Promise对象的then方法会返回一个全新的Promise对象
- 后面的then方法就是在为上一个then返回的Promise注册回调
- 前面then方法中回调函数的返回值会作为后面then方法回调的参数
- 如果回调中返回的是Promise，那后面then方法的回调会等待它的结束
9、Promise异常处理
function ajax(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){
if( this.status == 200 ){
resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}；
xhr.send();
})
}
// 异常或者失败，用catch方法捕获错误
ajax('/api/user.json').then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
})
在全局对象中注册，捕获Promise错误。
浏览器环境：
window.addEventListener('unhandledrejection',event=>{
const {
reason,promise } = event;
console.log(reason,promise);
// reason Promise失败原因，一般是一个错误对象
// promise 出现异常的Promise对象
event.preventDefault();
},false);
node环境下：
最好的做法是，在代码中明确捕获每一个可能的异常
10、Promise静态方法
// Promise.resolve()
Promise.resolve('foo') //将字符串转换为Promise对象
.then(function(val){
console.log(val);//foo。
});
// 传入一个含有then方法的对象，转换为Promise，常用于Promise之前出现的库，转换为现在的Promise
Promise.resolve({
then:function(onFulfilled,onRejected){
onFulfilled('foo')
}
})
.then(function(val){
console.log(val);//foo。
});
//Promise.reject();
Promise.reject(new Error('rejected'))
.catch(function(err){
console.log(err);
})
11、Promise并行执行
Promise.all();
只有当里边任务全部完成， 才会成功结束
promise.race();
只会等待第一个结束的任务
12、Promise执行时序
回调队列中的任务称之为 宏任务
宏任务执行过程中可以临时加上一些额外需求
可以选择作为一个新的宏任务进到队列中排队
也可以作为当前任务的 微任务
直接在当然任务结束过后立即执行
Promise的回调会作为微任务执行。
微任务的作用，提高整体的响应能力。
绝大多数异步调用会作为宏任务进行调用
特殊的：
Promise & MutationObserver 作为微任务
nodejs里边的 process.nextTick 。
举例：
一个人去银行柜台办理存款业务。办理完存款业务之后。你又想办理信用卡。一般情况下，为了提供工作效率，业务员会顺带帮你一块办理。这就是宏任务里边的微任务。
程序也一样，为了提高执行效率，才有了微任务。
13、Generator 异步方案
Generator配合 Promise 的异步方案
执行递归
try catch获取错误
github: https://github.com/tj/co
14、Async /Await 语法糖
语言层面的异步编程标准。内部执行顺序，从上往下。不需要再配合CO这样的执行器
await 只能出现在 async 函数的内部
