前端-异步操作-合集

1.js延迟加载的方式有哪些

    defer 属性
    async 属性
    动态创建DOM方式
    使用jQuery的getScript方法
    使用setTimeout延迟方法

让JS最后加载

2.关于异步处理:Generator async promise 的区别

Generator async promise这三个api都是es6新增api,也都可以理解为异步的解决方案,
但是他们的适用场景不一样

 先说Generator:

简单点可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,
还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的
每一个状态。

形式上,Generator 函数是一个普通函数,但是有两个特征。
一是,function关键字与函数名之间有一个星号;
二是,函数体内部使用yield表达式,定义不同的内部状态

而Generator在适用场景上我们可以把它理解为任务的挂起,
在js中我们使用没有任务挂起这个概念的,直到Generator的出现,
在Generator的使用上我们通过yield定义不同的状态,执行的时候需要使用next进行
不同状态的调用,但是他是从上到下的,也就是只要需要yield就会停止执行后面的语句,
调用next后继续执行后面的语句,在实际项目开发中,我经常会遇到这样的需求,
填写用户信息的时候一般都是分成几步,这时候我们就可以利用Generator的任务挂起特性进行
不同步骤的数据存储。

 

然后就是promise

promise解决了传统异步操作回调函数更加合理强大,有了promise就可以将异步操作
以同步操作的流程表达出来,避免了层层嵌套的回调函数。
此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

例如我常见的一个需求

有两个接口A,B, 他们之间有依赖关系,B接口必须等到A接口的值返回成功后,
拿到A接口里面的一个属性才能请求,如果利用之前的回调函数形势的话就得是层层嵌套,
代码维护比较麻烦,如果利用promise的话我们可以用链式调用的形势直观的表示出这种关系

 


而Async是Generator函数的语法糖,Async的出现主要是为了解决另外一个问题,
刚刚说了Generator是解决任务的挂起,promise是解决异步回调问题,
而async就是吧异步的操作,变成队列模式,

因为async中使用await做状态的定义,调用的时候不需要next(),自动执行,
并且会讲每个await中promise中resolve结果赋值给await的变量上以供后面的步骤使用,
每一个await都会等到promise返回结果后才会继续自动往下执行,
这样就实现了我在日常生活中排队执行的概念,将所有的异步任务以同步的方式定义,
不需要担心那个快那个慢,因为她是一个一个自动向下的

发布了68 篇原创文章 · 获赞 0 · 访问量 1279

猜你喜欢

转载自blog.csdn.net/zmmsdk/article/details/104213958