Comments (1)
答案:
什么是异步:
当前一个任务被执行时,不会等待任务执行完成后就去执行下一个任务,等前一个任务执行完成后,将去执行其返回的回调函数,这是异步操作
为什么要用异步:
js是单线程的,因此必须等前一个任务完成后,后一个任务才会被执行。因此当执行一段耗时的程序时,会影响整个程序的执行,异步的方法就是为了解决这个问题。
解决方案:
1.回调函数callback:
被作为实参传入另一函数,并在该外部函数内被调用,用以来完成某些任务的函数。如setTimeOut,ajax请求,readFile等。
例:
function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('请输入你的名字。');
callback(name);
}
processUserInput(greeting);
优点:
解决了异步的问题。
缺点:
回调地狱:多个回调函数嵌套的情况,使代码看起来很混乱,不易于维护。
2.事件发布订阅
当一个任务执行完成后,会发布一个事件,当这个事件有一个或多个‘订阅者’的时候,会接收到这个事件的发布,执行相应的任务,这种模式叫发布订阅模式。如node的events,dom的事件绑定
例:
document.body.addEventListener('click',function(){
alert('订阅了');
},false);
document.body.click();
优点:时间对象上的解耦。
缺点:消耗内存,过度使用会使代码难以维护和理解
3.Promise
Promise是es6提出的异步编程的一种解决方案。
Promise 对象有三种状态:
- pending: 初始状态,既不是成功,也不是失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
promise的状态只能从pending变成fulfilled,和pending变成rejected,状态一旦改变,就不会再改变,且只有异步操作的结果才能改变promise的状态。
例:
let promise = new Promise(function (resolve, reject) {
fs.readFile('./1.txt', 'utf8', function (err, data) {
resolve(data)
})
})
promise
.then(function (data) {
console.log(data)
})
优点:解决了回调地狱的问题,将异步操作以同步操作的流程表达出来。
缺点:无法取消promise。如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。当执行多个Promise时,一堆then看起来也很不友好。
4.Generator
Generator是es6提出的另一种异步编程解决方案,需要在函数名之前加一个*号,函数内部使用yield语句。Generaotr函数会返回一个遍历器,可以进行遍历操作执行每个中断点yield。
例:
function * count() {
yield 1
yield 2
return 3
}
var c = count()
console.log(c.next()) // { value: 1, done: false }
console.log(c.next()) // { value: 2, done: false }
console.log(c.next()) // { value: 3, done: true }
console.log(c.next()) // { value: undefined, done: true }
优点:没有了Promise的一堆then(),异步操作更像同步操作,代码更加清晰。
缺点:不能自动执行异步操作,需要写多个next()方法,需要配合使用Thunk函数和Co模块才能做到自动执行。
5.async/await
async是es2017引入的异步操作解决方案,可以理解为Generator的语法糖,async等同于Generator和co模块的封装,async 函数返回一个 Promise。
例:
async function read() {
let readA = await readFile('data/a.txt')
let readB = await readFile('data/b.txt')
let readC = await readFile('data/c.txt')
console.log(readA)
console.log(readB)
console.log(readC)
}
read()
优点:内置执行器,比Generator操作更简单。async/await比*/yield语义更清晰。返回值是Promise对象,可以用then指定下一步操作。代码更整洁。可以捕获同步和异步的错误。
from fe9-interview.
Related Issues (20)
- 微店: 将二维数组转成一维数组的方法有哪些(一面) HOT 1
- 有赞: 为什么在类实例中可以访问this.setState (二面) HOT 1
- 有赞: 介绍暂时性死区(一面) HOT 2
- 兑吧: prototype 和 proto 区别(一面) HOT 1
- 今日头条: 介绍下Promise,内部实现(一面) HOT 1
- 有赞: 在不改变原数组的前提下,添加或删除某个元素(一面) HOT 2
- 阿里巴巴: 使用伪码实现 npm install 部分内容(二面)
- 有赞: sum(2, 3)实现sum(2)(3)的效果(一面) HOT 1
- To Tom0121 前端开发中设计到什么模式 HOT 1
- 携程:数组去重和数组扁平化(一面) HOT 1
- 阿里巴巴:实现一些主流框架的循环渲染(笔试) HOT 1
- To littleKnave: 实现一个Promise.prototype.first(今日头条) HOT 1
- 阿里巴巴:浏览器的强缓存和协商缓存(一面) HOT 3
- 51 信用卡: apply,call,bind 的区别(一面) HOT 2
- 为什么使用 ctrl+f5 或启用开发者面板中 Disable cache 选项后还会存在读取缓存的现象 HOT 1
- 阿里:Koa-body原理(一面)
- 爱云校:算法两道(一、1-100所有的素数 二、快速排序)(笔试) HOT 2
- 腾讯:js中精度问题及解决方案(一面) HOT 1
- 如何将 node 标准的回调 API 在 fibjs 内转为"同步"调用形式(一面) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe9-interview.