一，同步和异步的区别：
同步会阻塞代码执行，而异步不会。（比如alert是同步，setTimeout是异步）
二，前端使用异步的场景：
1，定时任务：setTimeout，setInterval
2，网络请求：ajax请求，动态<img>加载
3，事件绑定
三，什么是单线程，和异步有什么关系
1，什么是单线程：只有一个线程，同一时间只能做一件事情，从上到下执行
例：
// 循环执行期间，JS 执行和DOM渲染暂时卡顿
var i, sum = 0;
for(var i = 0; i < 1000000000; i++) {
sum += 1;
}
console.log(sum); // alert 不处理，JS 执行和DOM渲染暂时卡顿
alert('hello');
console.log(2);
2，为什么是单线程：避免DOM渲染的冲突：
(1)，浏览器需要渲染DOM
(2)，JS可以修改DOM结构
(3)，JS执行的时候，浏览器DOM渲染会暂停
(4)，两段JS也不能同时执行
(5)，为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质
3，JS单线程解决方案：异步
console.log(100)
setTimeout(function() {
console.log(200) //反正1000ms 之后执行
},1000) //先不管它，先让其他JS代码执行
console.log(300);
var ajax = $.ajax({
url: './data.json',
success: function(result) { //ajax加载完才执行
console.log(result); //先不管它，先让其他JS代码执行
}
})
console.log(ajax) //{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
console.log(200); //
1，异步的问题：
问题一，没按照书写方式顺序执行，可读性差
问题二，callback中不容易模块化
四，什么是event-loop（异步方案的实现方式）
event-loop：事件轮询，JS实现异步的具体解决方案。
-同步代码，直接执行
-异步函数先放在 异步队列 中
-待同步函数执行完毕，轮询执行 异步队列 中的函数
（定时任务，网络请求，事件绑定）
例1:
例2:
例3:
五，jquery的Deferred
1， jQuery1.5的变化：使用jQuery Deferred，初步引入Promise概念。
（1）仍不会也无法改变js异步和单线程的本质
（2）只能从写法上杜绝callback这种形式
（3）它是一种语法糖形式，但是解耦了代码
（4）很好地体现：开放封闭原则（对扩展开放，对修改封闭）（多人开发协作不相互干扰，减少回归测试的成本）
// jQuery1.5之前
var ajax = $.ajax({
url: './data.json',
success: function(result) {
console.log('success1');
console.log('success2');
console.log('success3');
},
error:function(){
console.log('error');
}
})
console.log(ajax) //返回一个XHR对象
// jquery1.5之后
var ajax = $.ajax('./data.json');
ajax.done(function() {
console.log('success1');
})
.fail(function() {
console.log('error1');
})
.done(function() {
console.log('success2')
})
console.log(ajax); //返回一个deferred对象,可以进行链式操作 // 还可以使用很像promise写法
var ajax = $.ajax('./data.json');
ajax.then(function(){
console.log('success1');
},function(){
console.log('error1');
}).then(function(){
console.log('success2');
},function(){
console.log('error2');
})
2，jQuery Deferred应用
看一个简单的例子：
// 给出一段非常简单的异步操作代码，使用setTimeout函数
var wait = function() {
var task = function() {
console.log('执行完成');
//
//
//
}
setTimeout(task, 1000)
}
wait()
// 新增需求：要在执行完成之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤
使用Deferred：（开放封闭原则）
function waitHandler() {
// 定义
var dtd = $.Deferred(); //创建一个deferred对象
var wait = function(dtd) { //要求传入一个deferred对象
var task = function() {
console.log('执行完成');
// 成功
dtd.resolve(); //表示异步任务已经完成
// 失败
// dtd.reject(); //表示异步任务失败或出错
}
setTimeout(task, 1000)
// wait返回
return dtd; //要求返回deferred对象
}
// 最终返回 注意这里一定要有返回值
return wait(dtd);
}
var w = waitHandler();
w.then(function() {
console.log('ok1');
}, function() {
console.log('err1');
}).then(function() {
console.log('ok2');
}, function() {
console.log('err2');
})
// 还有 w.done w.fail
执行reject
function waitHandler() {
// 定义
var dtd = $.Deferred(); //创建一个deferred对象
var wait = function(dtd) { //要求传入一个deferred对象
var task = function() {
console.log('执行完成');
// 成功
// dtd.resolve(); //表示异步任务已经完成
// 失败
dtd.reject(); //表示异步任务失败或出错
}
setTimeout(task, 1000)
// wait返回
return dtd; //要求返回deferred对象
}
// 最终返回 注意这里一定要有返回值
return wait(dtd);
}
var w = waitHandler();
w.then(function() {
console.log('ok1');
}, function() {
console.log('err1');
})
w.then(function() { //reject需要分开，不然执行顺序就错啦
console.log('ok2');
}, function() {
console.log('err2');
})
这里注意一个原则：开放封闭原则
总结，dtd的API可分成两类，用意不同
第一类（主动执行）：dtd.resolve dtd.reject
第二类（监听）：dtd.then dtd.done dtd.fail
这两类应该分开，否则后果很严重
可在上面代码最后执行dtd.reject()试下结果
使用dtd.promise()
function waitHandler(){
var dtd = $.Deferred();//Deferred
var wait = function(dtd) {
var task = function(){
console.log('执行完成');
dtd.resolve();
}
setTimeout(task,2000);
return dtd.promise();//注意，这里返回的是promise，而不是直接返回deferred对象
}
return wait(dtd);
}
var w = waitHandler();//经过上面的改动，w接收的就是一个promise对象
$.when(w)
.then(function(){
console.log('ok1');
})
.then(function(){
console.log('ok1');
})
w.reject()//执行这句会报错 w.reject is not a function promise不能使用，只有监听的方法了,使用者只能监听，开发人员封装的时候才能用
说明promise和deferred区别: promise只能被动监听，不能主动执行
六，Promise的基本使用和原理
1，基本语法回顾（备注：现在高级浏览器基本都支持promise，如果有些不支持，可以在cdn上找，引入 bluebird ）
<script src="https://cdn.bootcss.com/bluebird/3.5.1/bluebird.min.js"></script>
function loadImg(src) {
const promise = new Promise(function(resolve, reject) { //new Promise实例
var img = document.createElement('img');
img.src = src;
img.onload = function() {
resolve(img);
}
img.onerror = function() {
reject('图片加载失败');
}
});
return promise; //返回 Promise实例
}
var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
var result = loadImg(src); //Promise实例
result.then(function(img) { //then监听结果,成功时执行resolve(), 失败时执行reject()
console.log(1, img.width); //1 164
return img;
}, function(img) {
console.log('failed');
return img;
}).then(function(img) {
console.log(2, img.height) //2 36
})
2，异常捕获
// 规定：then只接受一个参数(成功的处理函数），最后统一用catch捕获异常
// var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png";//写一个不存在的地址
var result = loadImg(src);
result.then(function(img) {
console.log(img.width);
return img;
}).then(function(img) {
console.log(img.height);
}).catch(function(ex) {
// 最后统一用catch捕获异常
console.log(ex); //图片加载失败 (logo_1.png:1 GET https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png 404 (Not Found))
})
自定义错误：
function loadImg(src) {
const promise = new Promise(function(resolve, reject) { //new Promise实例
var img = document.createElement('img');
// 模拟抛出错误 模拟语法错误，逻辑之外的bug
throw new Error('自定义错误');
img.src = src;
img.onload = function() {
resolve(img);
}
img.onerror = function() {
reject('图片加载失败');
}
});
return promise; //返回 Promise实例
}
// 规定：then只接受一个参数(成功的处理函数），最后统一用catch捕获异常
var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo.png";
// var src = "https://shared-https.ydstatic.com/dict/v2016/result/logo_1.png"; //写一个不存在的地址
var result = loadImg(src);
result.then(function(img) {
console.log(img.width);
return img;
}).then(function(img) {
console.log(img.height);
}).catch(function(ex) {
// 最后统一用catch捕获异常
console.log(ex);
})
3，多个串联
// 多个串联 图片只是用来模拟，实际可能更多的不是用图片，比如处理用户信息啥的，加载用户信息的时候，先拿到用户信息，再去处理其他信息等
var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
var result1 = loadImg(src1);
var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
var result2 = loadImg(src2); // 链式操作
result1.then(function(img1) {
console.log('第一个图片加载完成', img1.width);
return result2; //重要！！！
}).then(function(img2) {
console.log('第二个图片加载完成', img2.width);
}).catch(function(ex) {
// 最后统一用catch捕获异常
console.log(ex);
})
4，Promise.all （全部promise实例完成后） 和 Promise.race （只要有一个promise实例完成）
// Promise.all 接收一个包含多个promise实例的数组，待全部完成之后，统一执行success
var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
var result1 = loadImg(src1); //pending
var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
var result2 = loadImg(src2);
Promise.all([result1, result2]).then(datas => {
// 接收到的datas是一个数组，依次包含了多个promise返回的内容
console.log('all', datas[0]); //all <img src="https://shared-https.ydstatic.com/dict/v2016/result/logo.png">
console.log('all', datas[1]); //all <img src="https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg">
})
Promise.race （只要有一个promise实例完成）
// Promise.race 接收一个包含多个promise实例的数组
// 只要有一个完成，就执行success
Promise.race([result1, result2]).then(data => {
// data即最先执行完成的promise的返回值
console.log('race', data); //race <img src="https://shared-https.ydstatic.com/dict/v2016/result/logo.png">
})
promise标准
1，关于“标准”的闲谈
任何技术推广使用都需要一套标准来支撑
如html css js等，无规矩不成方圆
任何不符合标准的东西，终将会被用户抛弃
不要挑战标准，不要自造标准
2，状态变化
三种状态：pending fulfilled rejected
pending: 初始状态
fulfilled： 成功
rejected：失败
pending到fulfilled，或者pending到rejected，状态不可逆
3，then
Promise实例必须实现then方法
then（）必须可以接收两个函数作为参数
then（）返回的必须是一个Promise实例
如果then中没有返回promise实例，则默认返回的是上一个promise实例，如果返回了一个promise实例，那就默认为返回的promise实例
七，async／await（和promise区别、联系等）（babel已经支持，koa也已经支持）
1，then只是将callback拆分了
// then只是将callback拆分了
var w = waitHandler();
w.then(function() {
console.log('ok1');
}, function() {
console.log('err1');
}).then(function() {
console.log('ok2');
}, function() {
console.log('err2');
})
2，async/await是最直接的同步写法
// async/await是最直接的同步写法
const load = async function() {
const result1 = await loadImg(src1);
console.log(result1);
const result2 = await loadImg(src2);
console.log(result2);
}
load()
完整的：
import 'babel-polyfill'; //引入babel-polyfill
// async/await是最直接的同步写法
function loadImg(src) {
const promise = new Promise(function(resolve, reject) {
var img = document.createElement('img');
img.src = src;
img.onload = function() {
resolve(img);
}
img.onerror = function() {
reject('图片加载失败');
}
});
return promise;
}
var src1 = 'https://shared-https.ydstatic.com/dict/v2016/result/logo.png';
var src2 = 'https://img.mukewang.com/user/57b98e990001351004400440-100-100.jpg';
// async/await是最直接的同步写法
const load = async function() { //函数必须用async标识
const result1 = await loadImg(src1); //await后面跟的是一个Promise实例
console.log(result1);
const result2 = await loadImg(src2); //await后面跟的是一个Promise实例
console.log(result2);
}
load()
用法：
要在函数体内使用await，函数必须用async标识
await后面跟的是一个Promise实例
需要安装babel-polyfill
npm i --save-dev babel-polyfill
3，总结
使用了Promise，并没有和Promise冲突
完全是同步的写法，再也没有回调函数
但是：改变不了js单线程，异步的本质
八，当前 JS 解决异步的方案总结
1，jquery Deferred
2，Promise
3，Async／await
