javascript处理异步的三种方法

一、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()都会把原先的销毁，所以需要先保存起来

}

*go() {

while (true) { //实现一直循环，否则当点击二次后就无法继续执行了

console.log('Tick!');

yield;

console.log('Tock!');

yield;

}

javascript处理异步的三种方法

猜你喜欢