谈起异步编程,我们先来了解下同步执行…如下
同步执行:同步执行不是代码同步执行,而是代码依次执行,后一个任务必须等前一个任务执行完后再执行。执行方式就是代码写的顺序。
同步请求,提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。
console.log("打印console")
function f1(){
console.log("f1函数")
}
function f2(){
console.log("f2函数")
f1()
}
f2()
f1()
//输出结果:打印console,f2函数,f1函数,f1函数
异步执行:不会等待当前任务执行结束后才会执行下一个任务,当前任务开启后就会往下执行。谁先执行完算谁的
异步请求请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
console.log("start demo3") //执行1
setTimeout(() => {
console.log("5秒后执行") //执行5
}, 5000);
setTimeout(() => {
console.log("3秒后执行") //执行3
setTimeout(() => {
console.log("1秒后执行") //执行4
}, 1000);
}, 3000);
console.log("end demo3") //执行2
//输出结果:start demo3,end demo3,3秒后执行,1秒后执行,5秒后执行
有兴趣的可以看看这个执行流程图:
一:回调函数
一个函数作为参数传递给另外一个函数(另一个函数我们称为:otherFunction),回调函数就在otherFunction中调用
最简单的demo:
定时器里的匿名函数function就是一个回调函数。(js中的函数是一等公民,所以可以像其他变量一样作为参数进行传递)
setTimeout(function(){
console.log('time out')
},1000)
这样看来,用回调函数处理异步也挺好的,但是需求复杂时,(例子:某个业务依赖于上层业务的数据,上层业务又依赖于更上一层的数据)整个代码会充满了嵌套,读起来麻烦,也不易于扩展。俗称为“回调地狱”
$.ajax({
type: 'get',
url: '/api/getKey',
success: function (data) {
key = data;
$.ajax({
type: 'get',
url: '/api/getToken',
data: {
key: key
},
success: function (data) {
token = data.token;