- 什么是异步?
简单的说就是先干一件事, 中间去干其他的事,最终在回来干这件事。
- 每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的。
function read(content){
setTimeout(function(){
console.log(content)
} ,1000)
}
function read1(content){
setTimeout(function(){
console.log(content)
},500)
}
read('我是read');
read1('我是read1');
console.log('我先输出') //第一个输出的
read和read1执行,read和read1的函数体中有setTimeout,它是异步的(异步不支持return)
- 同步:就是一个任务完成之后,后边跟着一个任务接着执行;程序的执行顺序和排列顺序是一直的(会阻塞代码运行)
- 异步的发展流程
1).callback:回调函数
let fs = require('fs');
fs.readFile('path', 'utf8', function (err, data) {
if (err) {
console.log(err)
}
if (data) {
fs.readFile(data, 'utf8', function (err, data) {
console.log(data);
});
}
})
会等第一个回调函数成功才会执行第二个回调函数。有多层嵌套的问题。代码不好维护修改
2).promise: 解决了回调地狱的问题,不会导致难以维护
let fs = require('fs');
function read(path){
return new Promise(function(resolve,reject){
fs.readFile(path,'utf8',function(err,data){
if(err){
reject(err)
}else{
resolve(data)
}
})
})
}
let p = read('需要读的文件路径');
p.then((data)=>{
console.log(data);
})
3).Generator 函数
- 函数要用* 来标识
- 返回结果是一个迭代器, 迭代器有一个next方法,调用next后都会返回一个done和一个叫value的属性
原理:将一个函数划分成若干个小函数,没次调用时移动指针,内部是一个条件判断,走对应的逻辑
function read(arrs){
let index = 0; //默认先迭代第一项
let len = arrs.length;
return {
next(){
return {value:arrs[index],done:index++===len?true:false}
}
}
}
let it = read(['react','vue','angular']);
// it.next(); // {done:false,value:'react'}
// it.next(); // {done:false,value:'vue'}
// it.next(); // {done:false,value:'angular'}
// it.next(); // {done:true,value:undefined}
缺点:要手动next执行,才会进行下一次
解决方案:co库,可以自动的将generator进行迭代
let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile); //promise实例化
function* r() {
let content1 = yield read('./2.promise/1.txt', 'utf8');
let content2 = yield read(content1, 'utf8');
return content2;
}
co(r()).then(function (data) {
console.log(data)
})
4)async-await函数
- ES2017 标准引入了 async 函数,使得异步操作变得更加方便。写起来就就像同步函数,而且有简便的方式处理异步
- async 函数它其实就是 Generator 函数的语法糖。
let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
// 用async 来修饰函数,aysnc需要配await,await只能是promise
// async和await(语法糖) === co + generator
async function r(){
try{
let content1 = await read('./2.promise/100.txt','utf8');
let content2 = await read(content1,'utf8');
return content2;
}catch(e){ // 如果出错会catch
console.log('err',e)
}
}
// async函数返回的是promise,
r().then(function(data){
console.log(data);
},function(err){
})
async +await解决的问题:
- 回调地狱
- 并发执行异步,在同一时刻同步返回结果 Promise.all
- 解决了返回值的问题
- 可以实现代码的try/catch(同步才可以使用try/catch);