1. 同步和异步
1.1 同步
概念：按照代码的顺序执行任务
console.log(1);
console.log(2);
先输出1,在输出2
同步的缺陷：
当遇到一个比较耗时间的任务，只能等该任务完成，后面的任务才能执行，后面的任务需要等待很长时间
1.2 异步
概念：
JS中的异步，需要异步语句：setInterval、setTimeout、Ajax、Node.js……等等
如果有异步语句了，那么一定是异步的。如果没有异步语句，那就不是异步的。
console.log(1);
setInterval(function(){
console.log('❤')
},1000)
console.log(2);
image.png
console.log(1);
setInterval(function(){
console.log('❤')
},0)
console.log(2);
image.png
从上往下:碰到定时函数和事件函数到一边去排队
2 回调函数
2.1 概念
是什么
是函数的应用方式，出现在两个函数之间
异步的语句做完之后要做的事情
什么形式
- 把函数a当做参数传递到函数b中
- 在函数b中以形参的方式进行调用
function a(cb){
cb()
}
function b(){
console.log('函数b')
}
a(b)
image.png
为什么需要
因为执行异步行为完毕之后需要做一些事情，由于无法预知异步行为什么时候完成
3. 回调地狱
出现回调地狱的原因
- 一个回调函数嵌套一个回调函数，就会出现一个嵌套结构。
- 嵌套的多了就会出现回调地狱
导致的结果
没有可维护性和可读性的代码
ajax({
url: '我是第一个请求',
success (res) {
// 现在发送第二个请求
ajax({
url: '我是第二个请求'，
data: { a: res.a, b: res.b },
success (res2) {
// 进行第三个请求
ajax({
url: '我是第三个请求',
data: { a: res2.a, b: res2.b },
success (res3) {
console.log(res3)
}
})
}
})
}
})
回调地狱，其实就是回调函数嵌套过多导致的
- 当代码成为这个结构以后，已经没有维护的可能了
4. 解决回调函数的方法
-
promise
-
async/await
(1)promise
是什么
- 解决回调地狱的方案之一
- 把回调地狱写的优雅的方案之一
目的
- 解决回调地狱的问题
- 使代码拥有可读性和可维护性
做什么
- 做 异步的事情
- 成功的时候给成功的回调
- 失败的时候给失败的回调
三种状态两个结果
继续==> pending==> 正在进行时
成功==> fulfilled==> 过去完成时
失败==> rejected==> 过去完成时
pending 继续，正在做异步的事情
fulfilled 成功，结果 (resolved)
rejected 失败，结果
类比在ajax请求里面
=> pending 就是正在请求(网络传输过程中)
=> fulfilled 就是请求成功了(网络环境允许请求, 可以连接到服务器拿到结果)
=> rejected 就是请求失败了(突然没有网了, 掉线了, 不会再有结果回来了)
怎么用
Promise的基本语法
let p = new Promise(function(resolve,reject){
//在这里做一个异步的事情
// resolve() ==> 成功的回调,调用then里面的函数
// reject() ==>失败的回调,调用catch里面的函数
})
p.then(function(){})
p.catch(function(){})
- 遇到了一个 Promise帮我发送一个 ajax 请求
-> 发现这个是一个异步的 ajax
-> 就把这个 异步的 ajax 往后放
2. 遇到了一个 p1.then(function a() {})
-> 就把这个回调函数帮我们准备好了传递到 promise 里面
3. 遇到了一个 p1.catch(function b() {})
-> 就把这个回调函数帮我们准备好了传递到 promise 里面
到这个时候
-> 所有的同步代码都执行完毕了
-> a 和 b 函数只是传递到了 promise 里面, 但是没有调用
-> 接下来就该异步的 ajax 执行了
4. 等到 ajax 结束的时候
-> 根据 ajax 的状态或者说成功还是失败
-> 来调用之前就准备好的成功的回调或者失败的回调
promise链式调用
- then 是成功的回调
- 只要then里面再次return一个promise对象
- 在这个 then 后面继续 then
var p1 = new Promise(function (resolve, reject) {
// 异步的事情先用定时器模拟
setTimeout(function () {
resolve() // 成功的回调
}, 1000)
})
// 1s 以后执行这个 then 函数
p1.then(function () {
console.log('我是 p1 的 then 函数里面的代码')
// 准备第二个 promise 对象
var p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve() // 调用的第二个 then
}, 1000)
})
// p2 是一个 promise 对象
// 返回一个 promise 对象
return p2
}).then(function () {
// 我会在 p2 的 resolve() 的时候执行
console.log('我是 p1 then 后面的第二个 then')
})
// 在 p1 的 then 里面 return 了一个新的 promise 对象
(2) async / await
是什么
回调地狱的终极解决方案
- es7 的语法
- 用async/await语法把异步代码写的看起来像一个同步的代码
本质还是异步代码
怎么用
- async关键字写在函数的前面，就把该函数变成了一个异步函数
- await 是一个写在 异步函数 里面的关键字
- await 关键字后面必须是一个promise对象
有了以上三个条件，就可以把本该在promise的then回调里面的接受的结果，放在await关键字前面定义个变量来接受
promise 对象
有了 await 以后
把本该在 then 里面接受的结果
在 await 前面定义一个变量来接受
function pGetSend(url){
var p1 = new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.onload = function(){
resolve(xhr.responseText)
}
xhr.send()
})
return p1;
}
// 使用 async
async function fn(){
console.log('开始1')
var res = await pGetSend('./server/a.php')
var result = JSON.parse(res)
console.log(result);
console.log('结束1')
}
// 不使用 async
function fn1(){
console.log('开始2');
var res = pGetSend('./server/a.php').then(function(res){
console.log('第二次：'+res)
})
console.log('结束2');
}
fn()
fn2()
运行结果:
image.png
