终于意识到要写博客的第一天
我终于意识到写博客的重要性，哎，现在开始也不太晚吧，总比不开始强
今天主要弄明白以下几个问题吧
- 1、关于promise、aysnc/await、Generator/yield的使用以及原理
- 2、关于vue的生命周期、插槽、computed/watch原理、数据绑定原理、vue打包过程等几个常见的vue问题
- 3、web前端安全，XSS、CRSF攻击及其防御手段
1 promise的实现、使用以及注意事项
1.1 promise简介
promise本质上是一个构造函数，用new关键词来创建，静态方法有all/race/reject/resolve，原型方法有then/catch.
var p =new Promise((resolve, reject)=>{
//异步操作
setTimeout(
function(){console.log(‘done’);resolve(‘done’)},2000);
});
Promise构造函数接收一个参数，是函数，该函数有两个参数，resolve和reject，分别表示异步操作执行成功后的回调和失败后的回调。
关于promise注意的几个问题：
- promise一般用来实现一件事件做完之后，再做另一件事情（也可以用回调函数，promise 的提出正是为了解决回调地狱问题）
- 异步操作有三种状态：pending等待、fulfilled已完成、rejected已拒绝，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected，构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何 作用。promise 状态一旦改变则不能再变。
- then方法是实现promise 的核心，promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值
- new一个promise之后就会立即执行，所以我们用的时候一般会将promise包在一个函数中，需要的时候再去运行函数，并且在成功的回调中return这个函数，也就是return了一个promise对象
- 注意promise构造函数中代码的执行顺序，promise的构造函数是同步执行，promise.then中的函数是异步执行
- 第一个then不管是成功的回调还是失败的回调，只要返回一个普通值（不抛出错误或者返回promise），都会执行下一个then的成功的回调-
1.2 promise 实现
首先明确ES6为Promise提供了以下API
（1）构造函数
function Promise(handler){}
（2）原型方法
Promise.prototype.then=function(){}
Promise.prototype.catch=function(){}
Promise.prototype.finally=function(){}
（3）静态方法
Promise.resolve=function(){}
Promise.reject=function(){}
Promise.all=function(){}
Promise.race=function(){}
1.2.1 构造函数的简单实现
function Promise(executor) {
var self = this;
self.status = 'pending'; //promise当前的状态
self.data = undefined; //promise的值
self.onResolvedCallback = [];
//promise状态变为resolve时的回调函数集，可能有多个
self.onRejectedCallback = [];
//promise状态变为reject时的回调函数集，可能有多个
function resolve(value) {
setTimeout(function () {
if(self.status === 'pending') {
self.status = 'resolved';
self.data = value;
for(var i = 0; i < self.onResolvedCallback.length; i++) {
self.onResolvedCallback[i](value);
}
}
})
}
function reject(reason) {
setTimeout(function () {
if(self.status === 'pending') {
self.status = 'rejected';
self.data = reason;
for(var i = 0; i < self.onRejectedCallback.length; i++) {
self.onRejectedCallback[i](reason);
}
}
})
}
try {
executor(resolve, reject);
} catch (e){
reject(e);
}
};
1.2.2 then方法
Promise/A+规范中规定then方法需要返回一个新的promise对象
(1) then方法返回一个新的promise对象。
(2) executor自执行函数中的resolve参数调用时执行then方法的第一个回调函数onResolved。
(3) executor自执行函数中的reject参数调用时执行then方法的第二个回调函数onRejected。
Promise.prototype.then=function(onResolved, onRejected){
var self=this;
var promise2;
onResolved=typeof onResolved === 'function' ? onResolved : function(value){ return value;}
onRejected=typeof onRejected === 'function' ? onRejected : function(reason){return reason;}
//promise对象当前状态为resolved
if(self.status === 'resolved') {
return promise2 = new Promise(function (resolve, reject) {
try {
//调用onResolve回调函数
var x = onResolved(self.data);
//如果onResolve回调函数返回值为一个promise对象
if(x instanceof Promise) {
//将它的结果作为promise2的结果
x.then(resolve, reject);
} else {
resolve(x);//执行promise2的onResolve回调
}
} catch (e) {
reject(e); //执行promise2的onReject回调
}
})
}
//promise对象当前状态为rejected
if(self.status === 'rejected') {
return promise2 = new Promise(function (resolve, reject) {
try {
var x = onRejected(self.data);
if (x instanceof Promise) {
x.then(resolve, reject)
} else {
resolve(x)
}
} catch (e) {
reject(e)
}
})
}
//promise对象当前状态为pending
//此时并不能确定调用onResolved还是onRejected，需要等当前Promise状态确定。
//所以需要将callBack放入promise1的回调数组中
if(self.status === 'pending') {
return promise2 = new Promise(function (resolve, reject) {
self.onResolvedCallback.push(function (value) {
try {
var x = onResolved(self.data);
if (x instanceof Promise) {
x.then(resolve, reject);
} else {
resolve(x);
}
} catch (e) {
reject(e);
}
})
self.onRejectedCallback.push(function(reason) {
try {
var x = onRejected(self.data);
if (x instanceof Promise) {
x.then(resolve, reject)
} else {
resolve(x);
}
} catch (e) {
reject(e)
}
})
})
}
}
1.3 promise实现ajax
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});
1.4 promise的then方法使用
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function (comments) {
console.log("resolved: ", comments);
}, function (err){
console.log("rejected: ", err);
});
1.5 promise的catch用法
Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误！', error);
});
});
上面代码中，getJSON方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
1.6 promise的finally用法
promise的finally指定不管promise对象最后的状态如何，都会执行的操作。该方法是ES2018引入的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。
1.7 promise的all/race用法
1.7.1 Promise.all()
Promise.all()方法用于将多个promise实例包装成一个新的promise实例
const p=Promise.all([p1,p2,p3]);
接受一个数组作为参数，p1,p2,p3都是Promise的实例，如果不是，就用Promise.reslove静态方法将其转换。p的状态由三个promise实例决定。
- 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
- 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON('/post/' + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
1.7.2 Promise.race()
Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.race([p1, p2, p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p
.then(console.log)
.catch(console.error);
上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数
1.8 Promise的resolve和reject
1.8.1 Promise.resolve()
有时需要将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
Promise.resolve等价于下面的写法。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo')
1.8.2 Promise.reject()
Promise.reject(reason)返回一个新的promise实例，该实例的状态为rejected。
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
console.log(s)
});
// 出错了
2 Generator函数及其异步应用
2.1 Generator/yield的基本概念
语法上，可以把理解成，Generator 函数是一个状态机，封装了多个内部状态。
形式上，Generator 函数是一个普通函数。
整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。
Generator函数特征：
（1）function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
（2）调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
（3）必须调用遍历器对象的next方法，使得指针移向下一个状态。每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止.
总之，Generator函数是分段执行的，yield是暂停执行的标记，next方法恢复执行
yield关键字
由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志
（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined
next方法
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }
上面代码中，第二次运行next方法的时候不带参数，导致 y 的值等于2 * undefined（即NaN），除以 3 以后还是NaN，因此返回对象的value属性也等于NaN。第三次运行Next方法的时候不带参数，所以z等于undefined，返回对象的value属性等于5 + NaN + undefined，即NaN。
如果向next方法提供参数，返回结果就完全不一样了。上面代码第一次调用b的next方法时，返回x+1的值6；第二次调用next方法，将上一次yield表达式的值设为12，因此y等于24，返回y / 3的值8；第三次调用next方法，将上一次yield表达式的值设为13，因此z等于13，这时x等于5，y等于24，所以return语句的值等于42
例如：
function
* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
next()方法返回的对象上的value属性就是紧跟yeild表达式的值
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
2.2 for…of循环
使用for…of循环可以自动遍历Generator函数运行时生成的Iterator对象，且此时不需要调用next方法
function* foo() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
return 6;
}
for (let v of foo()) {
console.log(v);
}
// 1 2 3 4 5
上面代码使用for…of循环，依次显示 5 个yield表达式的值。这里需要注意，一旦next方法的返回对象的done属性为true，for…of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for…of循环之中
2.3应用示例
1、输出斐波那契数列
function* fibonacci(){
let [pre,cur]=[0,1];
for(;;){
[pre,cur]=[cur,pre+cur]
yield cur;
}
}
for(let n of fibonacci()){
if(n>1000)
break;
console.log(n);
}
2、 Genarator 逐行读取文本文件
function* readFileByLine(){
let file = new FileReader("a.txt");
try{
while(!file.eof){
yield parseInt(file.readLine(), 10); // 使用yield表达式可以手动逐行读取文件
}
}finally{
file.close();
}
}
var r = readFileByLine();
r.next();
3、Generator与状态机
如果我们想实现一个功能，函数每次执行一次就改变一次状态，要怎么实现？如果你使用es5实现你可能会这样做
var flag = true;
var clock = function() {
if (flag)
console.log('Tick!');
else
console.log('Tock!');
flag = !flag;
}
使用Generator实现
function* clock(){
while(true){
console.log('Tick!');
yield;
console.log('Tock');
yield
}
}
const gen = clock();
gen.next(); // Tick!
gen.next(); // Tock!
gen.next(); // Tick!
gen.next(); // Tock!
2.4 Generator函数应用
ES6 诞生以前，异步编程的方法，大概有下面四种。
- 回调函数
- 事件监听
- 发布/订阅
- Promise 对象
Generator函数可以利用yield关键字暂停函数执行，利用这一特性，我们可以将耗时的异步操作放在yield关键字之后，这样等到调用next()方法的时候再继续往后执行，这样实际上就省略了回调函数
function apiInterface(url){
ajaxCall(url,function(res){
it.next(res);
});
}
function* getInfo(){
var result=yield apiInterface("http://yuo");
var resp=JSON.parse(result);
console.log(resp.value);
}
var it=getInfo();
it.next();
这里定义了一个Generator函数getInfo，yield关键字后面跟着一个调用ajax方法获取信息的方法，调用it.next()开始执行apiInerface方法，apiInerface方法里面又执行了一次next()，并同时将ajax请求的返回值response作为参数传入next()，注意，这个res参数一定要传，否则result值为undefined，这里要记住一句话：next方法参数的作用，是覆盖掉上一个yield语句的值。
如果现在有三个比较耗时的操作step1，step2，step3，现在想先执行step1，然后将执行step1之后得到的值value1作为参数传入step2，再将执行step2之后得到的结果value2作为参数执行step3，如果使用回调的方式可以这样编写代码
step1(function(value1){
step2(function(value1,function(value2){
step3(value2,function(value3){
//do sth;
}
}
}
如果将上面的需求用Promise方法改写可以这么写：
step1().then(function(value1) {
return step2(value1);
}).then(function(value2){
return step3(value2);
}) .then(function(value3) {
// do something with value3
});
用Promise的写法可以很好的避免出现回调函数的情况，注意，这里我们假设step1，step2，step3是三个Promise对象。
最后我们看下使用Generator函数如何改造上述需求：
function* someTask(value1){
try{
var value2=yield step1(value1);
var value3=yield step2(value2);
var value4=yield step3(value3);
// do sth
}catch(e){}
}
然后定义一个调度函数一次执行三个任务：
scheduler(someTask(initialValue));
function scheduler(task) {
var taskObj = task.next(task.value);
// 如果Generator函数未结束，就继续调用
if (!taskObj.done) {
task.value = taskObj.value
scheduler(task);
}
}
通过Generator函数将回调方式改成了线性方式，但是上述方式只适合同步操作，因为这里的代码在得到上一步的结果之后就会立即执行，没有判断异步操作合适结束。
这时，Thunk 函数就能派上用处。以读取文件为例。下面的 Generator 函数封装了两个异步操作。
var fs = require('fs');
var thunkify = require('thunkify');
var readFileThunk = thunkify(fs.readFile);
var gen = function* (){
var r1 = yield readFileThunk('/etc/fstab');
console.log(r1.toString());
var r2 = yield readFileThunk('/etc/shells');
console.log(r2.toString());
};
上面代码中，yield命令用于将程序的执行权移出 Generator 函数，那么就需要一种方法，将执行权再交还给 Generator 函数。
这种方法就是 Thunk 函数，因为它可以在回调函数里，将执行权交还给 Generator 函数。为了便于理解，我们先看如何手动执行上面这个 Generator 函数。
var g = gen();
var r1 = g.next();
r1.value(function (err, data) {
if (err) throw err;
var r2 = g.next(data);
r2.value(function (err, data) {
if (err) throw err;
g.next(data);
});
});
自动执行器：
var g = function* (){
var f1 = yield readFileThunk('fileA');
var f2 = yield readFileThunk('fileB');
// ...
var fn = yield readFileThunk('fileN');
};
run(g);
上面代码的run函数，就是一个 Generator 函数的自动执行器。内部的next函数就是 Thunk 的回调函数。next函数先将指针移到 Generator 函数的下一步（gen.next方法），然后判断 Generator 函数是否结束（result.done属性），如果没结束，就将next函数再传入 Thunk 函数（result.value属性），否则就直接退出
上面代码中，函数g封装了n个异步的读取文件操作，只要执行run函数，这些操作就会自动完成。这样一来，异步操作不仅可以写得像同步操作，而且一行代码就可以执行。
流程控制
协程可以理解成多线程间的协作，比如说A，B两个线程根据实际逻辑控制共同完成某个任务，A运行一段时间后，暂缓执行，交由B运行，B运行一段时间后，再交回A运行，直到运行任务完成。对于JavaScript单线程来说，我们可以理解为函数间的协作，由多个函数间相互配合完成某个任务。
下面我们利用饭店肚包鸡的制作过程来说明，熊大去饭店吃饭，点了只肚包鸡，然后就美滋滋的玩着游戏等着吃鸡。这时后厨就开始忙活了，后厨只有一名大厨，还有若干伙计，由于大厨很忙，无法兼顾整个制作过程，需要伙计协助，于是根据肚包鸡的制作过程做了如下的分工。
肚包鸡的过程：准备工作(宰鸡，洗鸡，刀工等)->炒鸡->炖鸡->上料->上桌
大厨很忙，负责核心的工序：炒鸡，上料
伙计负责没有技术含量，只有工作量的打杂工序：准备工作，炖鸡，上桌
//大厨的活
function* chef(){
console.log("fired chicken");//炒鸡
yield "worker";//交由伙计处理
console.log("sdd ingredients");//上料
yield "worker";//交由伙计处理
}
//伙计的活
function* worker(){
console.log("prepare chicken");//准备工作
yield "chef";//交由大厨处理
console.log("stewed chicken");
yield "chef";//交由大厨处理
console.log("serve chicken");//上菜
}
var ch = chef();
var wo = worker();
//流程控制
function run(gen){
var v = gen.next();
if(v.value =="chef"){
run(ch);
}else if(v.value =="worker"){
run(wo);
}
}
run(wo);//开始执行
我们来分析下代码，我们按照大厨和伙计的角色，分别创建了两个Generator函数，chef和worker。函数中列出了各自角色要干的活，当要转交给其他人任务时，利用yield，暂停执行，并将执行权交出；run方法实现流程控制，根据yield返回的值，决定移交给哪个角色函数。相互配合，直到完成整个过程，熊大终于可以吃上肚包鸡了。
prepare chicken
fired chicken
stewed chicken
sdd ingredients
serve chicken
异步扁平化
那什么是异步的流控呢，简单说就是按顺序控制异步操作，以上面的肚包鸡为例，每个工序都是可认为异步的过程，工序之间又是同步的控制(上一个工序完成后，才能继续下一个工序)，这就是异步流控。
setTimeout(function(){
console.log('prepare chicken');
setTimeout(function(){
console.log('fired chicken');
...
},500)
} ,500)
用setTimeout方法来模拟异步过程，这种层层嵌套就是回调地狱，就是回调地狱
我们用Generator来实现：
//准备
function prepare(sucess){
setTimeout(function(){
console.log("prepare chicken");
sucess();
},500)
}
//炒鸡
function fired(sucess){
setTimeout(function(){
console.log("fired chicken");
sucess();
},500)
}
//炖鸡
function stewed(sucess){
setTimeout(function(){
console.log("stewed chicken");
sucess();
},500)
}
//上料
function sdd(sucess){
setTimeout(function(){
console.log("sdd chicken");
sucess();
},500)
}
//上菜
function serve(sucess){
setTimeout(function(){
console.log("serve chicken");
sucess();
},500)
}
//流程控制
function run(fn){
const gen = fn();
function next() {
const result = gen.next();
if (result.done) return;//结束
// result.value就是yield返回的值，是各个工序的函数
result.value(next);//next作为入参，即本工序成功后，执行下一工序
}
next();
};
//工序
function* task(){
yield prepare;
yield fired;
yield stewed;
yield sdd;
yield serve;
}
run(task);//开始执行
3 aysnc
3.1简介
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async 函数是什么？一句话，它就是 Generator 函数的语法糖。
async function helloAs(){
return 'helloAsync';
}
console.log(helloAs()); //Promise {<resolved>: "helloAsync"}
helloAs().then(v=>console.log(v)); //helloAsync
async函数对 Generator 函数的改进，体现在以下四点。
（1）内置执行器。
Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。
（2）更好的语义。
async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。
co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
（4）返回值是 Promise。
async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖
3.2 await 关键字
在Generator章节中我们熟悉了yield关键字，yield关键字只能使用在Generator函数中，同样，await关键字也不能单独使用，是需要使用在async方法中。 await字面意思是"等待"，那它是在等什么呢？它是在等待后面表达式的执行结果。
function testAwait(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
我们来分析下这段代码
1、testAwait()方法中new一个Promise对象返回，promise对象中用setTimeout模拟一个异步过程，即1s后打印"testAwait"。
2、helloAsync()方法中，await testAwait(),表示将阻塞这里，等待testAwait这个异步方法执行并返回结果后，才继续下面的代码。
执行下，1s后打印了下面的日志
testAwait
helloAsync
await的作用，就是阻塞主函数的执行，直到后面的Promise函数返回结果,awit后面也可以是字符串、布尔值、数值以及普通函数
function testAwait(){
setTimeout(function(){
console.log("testAwait");
}, 1000);
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
执行结果
helloAsync
testAwait
方法没有报错，说明await后面是支持非Promise函数的，但是执行的结果是不一样的，所以await针对所跟的表达式不同，有两种处理方式：
1、对于Promise对象，await会阻塞主函数的执行，等待 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果，然后继续执行主函数接下来的代码。
2、对于非Promise对象，await等待函数或者直接量的返回，而不是等待其执行结果
3.3 应用场景
由于await可以阻塞主函数，直到后面的promise对象执行完成，这个特性就可以解决按顺序控制异步操作。
在Generator章节的肚包鸡的制作过程的实例，我们用async/await来重写这个例子，并比较下两者实现的区别。
//准备
function prepare(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("prepare chicken");
resolve();
},500)
});
}
//炒鸡
function fired(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("fired chicken");
resolve();
},500)
});
}
//炖鸡
function stewed(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("stewed chicken");
resolve();
},500)
});
}
//上料
function sdd(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("sdd chicken");
resolve();
},500)
});
}
//上菜
function serve(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("serve chicken");
resolve();
},500)
});
}
async function task(){
console.log("start task");
await prepare();
await fired();
await stewed();
await sdd();
await serve();
console.log("end task");
}
task();
4 promise、Generator、async分别实现读取文件
需求：分别读取文件1、2、3
回调函数会产生回调地狱，可以用promise、Generator、async将异步回调扁平化
- promise实现
const fs=require('fs');
//封装读取函数
function readFile(path){
return new Promise((resolve,reject)=>{
fs.readFile(path,'UTF-8',(err,dataStr)=>{
if(err) return reject(err);
resolve(dataStr);
})
})
}
readFile('files/1.txt').then((data)=>{
// 成功的回调
console.log(data);
return readFile('files/2.txt');
},(err)=>{
console.log(err);
}).then((data)=>{
console.log(data);
return readFile('files/3.txt');
},(err)=>{
console.log(err);
}).then((data)=>{
console.log(data);
},(err)=>{
console.log(err);
}).catch(function(err){
// catch的作用，如果前面有任何的promise执行失败，则立即终止promise的执行，捕获异常
console.log(err.message+'失败了')
})
缺点是.then的链式写法使语义不清
- Generator/yield
const fs=require('fs');
//封装读取模块
function readFile(path){
return new Promise((resolve,reject)=>{
fs.readFile(path,'UTF-8',(err,data)=>{
if(err) reject(err);
resolve(data);
})
})
}
//gen函数
function* gen(){
try{
var f1=yield readFile('./files/1.txt');
console.log(f1.toString());
var f2=yield readFile('./files/2.txt');
console.log(f2.toString());
var f3=yield readFile('./files/3.txt');
console.log(f3.toString());
}catch(e){
//handle err
console.log("出错啦");
}
}
//手动书写自动执行器
function run(gen){
var g=gen();
function next(data){
var result=g.next(data);
if(result.done) return result.value;
result.value.then(function(data){
next(data);
})
}
next();
}
run(gen);
Generator函数的缺点就是要手动书写run函数执行器，不然需要引入co模块使其自动执行
- async/await
const fs=require('fs');
//封装读取模块
function readFile(path){
return new Promise((resolve,reject)=>{
fs.readFile(path,'UTF-8',(err,data)=>{
if(err) reject(err);
resolve(data);
})
})
}
async function asRead(){
try{
var f1=await readFile('./files/1.txt');
console.log(f1.toString());
var f2=await readFile('./files/2.txt');
console.log(f2.toString());
var f3=await readFile('./files/3.txt');
console.log(f3.toString());
}catch(e){
console.log('error');
}
}
asRead();
async优化了Generator函数的表达。
参考文献
1、https://www.jianshu.com/p/3023a9372e5f/
2、https://www.jianshu.com/p/43de678e918a
3、https://www.jianshu.com/p/b4f0425b22a1
4、http://es6.ruanyifeng.com/#docs/promise
5、https://blog.csdn.net/ganyingxie123456/article/details/78152770
6、https://blog.csdn.net/astonishqft/article/details/82782422
7、https://blog.csdn.net/tcy83/article/details/80427195
8、https://blog.csdn.net/tcy83/article/details/80544048
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
