前言
同步与异步最直观的理解:等到操作执行完成才返回执行结果的是同步操作;反之,则是异步操作
传统的异步编程方法:
- 回调函数
- 事件监听
- 发布/订阅
- Promise 对象
ES6异步编程方法:
- Generator函数
- Thunk函数
- co函数库
- async函数
一、Promise对象
1、什么是Promise对象
Promise对象是处理异步请求的对象。
- 可理解为对一个异步操作的承诺(promise),成功了(resolve)怎么怎么样,失败了(reject)怎么怎么样
Promise对象是一个代理对象。
- 通过Promise对象,对一个异步操作的成功和失败分别绑定对应的处理方法,使得可以像调用同步操作一样调用异步操作,并返回一个能代表未来出现的结果的Promise对象。
2、语法
new Promise(
/* executor */
function(resolve, reject) {...}
);
- executor是一个带有resolve和reject两个参数的函数。
- executor函数在构造函数Promise执行时同步执行,并传递给resolve和reject函数(可理解为,executor 函数在Promise构造函数返回新建对象前被调用,并在内部执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled,或者在发生错误时将它的状态改为rejected)。
3、用法
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
});
promise.then(function(value){
//success
}).catch(function(err){
//error
});
4、链式写法
promise的then方法返回一个Promise对象,因此可以不断的调用then方法,从而实现promise的链式写法。
var promise = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("成功1");
}, 2000);
});
var promise2 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("成功2");
}, 2000);
});
promise.then(function(mess){
console.log(mess);
}).then(function(){
return promise2;
}).then(function(mess2){
console.log(mess2)
}).catch(function(err){
console.log(err);
});
var promise = new Promise(function(resolve, reject){
setTimeout(function(){
resolve("成功1");
}, 2000);
});
promise.then(function(mess){
return mess;
}).then(function(mess){
console.log(mess+"1443")
}).catch(function(err){
console.log(err);
});
二 、Generator函数
1、什么是Generator函数
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
Generator函数(生成器函数)。Generator函数是“可以返回多次的函数”,用yield返回多次
Generator函数不会返回执行结果,而是返回一个遍历器对象g,调用 g 的 next 方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的 yield 语句。
每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。
2、方法
- Generator.prototype.next()
返回一个由 yield表达式生成的值。 - Generator.prototype.return()
返回给定的值并结束生成器。 - Generator.prototype.throw()
向生成器抛出一个错误。
3、数据交换
function* gen(x){
var y = yield x + 2;
return y;
}
var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }
4、错误处理
function* gen(x){
try {
var y = yield x + 2;
} catch (e){
console.log(e);
}
return y;
}
var g = gen(1);
g.next();
g.throw('出错了');
// 出错了