一、ES6 Promise对象
const result = new Promise((resolve, reject) => { if (success) { resolve('成功'); } else { reject('失败'); } }); result.then((res) => { console.log(res); //输出成功 }); result.catch((res) => { console.log(res); //输出失败 });
常用API:
1.resolve 返回异步操作成功的结果
2.reject 返回异步操作失败的结果
3.then 执行Promise状态是成功的操作
4.catch 执行Promise状态是失败的操作
5.finally 不管Promise状态是成功或失败都执行的操作
Promise.all方法简介:
Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示
const p = Promise.all([p1, p2, p3])
//顺序执行p1,p2,p3,即使p2的执行时间较短仍要等待p1执行完成
//p1,p2,p3为promise对象
p.then((result) => { console.log(result) //result 是个数组,按promise的顺序依次返回结果 }).catch((error) => { console.log(error) })
p的状态由p1、p2、p3决定,分成两种情况。
(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
二、ES6 Generator 函数
Generator函数是ES6引入的新型函数,用于异步编程,跟Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。
Generator函数跟普通函数的写法有非常大的区别:
一是,function关键字与函数名之间有一个星号;
二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。
function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; } g(); // 返回一个对象
g().next(); // 返回Object {value: "a", done: false}
g().next(); // 返回Object {value: "b", done: false}
g().next(); // 返回Object {value: "c", done: false}
g().next(); // 返回Object {value: "ending", done: false}
g().next(); // 返回Object {value: "undefined", done: false}
generator函数在vue中的应用:
<button @click="()=>this.testM.next()">generator</button>
mounted(){
this.testM=this.go() //每次调用this.go().next()都会把原先的销毁,所以需要先保存起来
this.testM=this.go() //每次调用this.go().next()都会把原先的销毁,所以需要先保存起来
}
*go() {
while (true) { //实现一直循环,否则当点击二次后就无法继续执行了
console.log('Tick!');
yield;
console.log('Tock!');
yield;
}
},