es6 또는 es7에 비동기가 있습니까?

async는 es7입니다. async 및 wait는 ES7에 새로 추가된 기능이며 비동기 작업을 위한 솔루션입니다. async/await는 공동 모듈 및 생성기 기능을 위한 구문 설탕이라고 할 수 있으며, 더 명확한 의미로 js 비동기 코드를 해결합니다. 이름에서 알 수 있듯이 async는 "비동기"를 의미합니다. async는 async와 wait 사이에 엄격한 규칙이 있음을 선언하는 데 사용되며, wait는 비동기 함수로만 작성될 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES7(ES2017)에서 제안된 프런트엔드 비동기 기능: async, wait.

async/await란 무엇인가요?

async 및 wait는 비동기 작업에 대한 솔루션의 경우 공동 모듈 및 생성기 기능에 대한 구문 설탕이라고 할 수 있습니다. 보다 명확한 의미론으로 js 비동기 코드를 해결합니다.

async는 이름에서 알 수 있듯이 "비동기"를 의미합니다. async는 함수가 비동기임을 선언하는 데 사용됩니다. 그리고 wait는 문자 그대로 "대기"를 의미하며 비동기 완료를 기다리는 데 사용됩니다.

Async와 Wait에는 엄격한 규칙이 있습니다. 둘 다 서로 없이는 살 수 없습니다. 그러나 Wait는 비동기 함수로만 작성할 수 있습니다.

co 모듈에 익숙한 학생들은 co 모듈이 Master TJ가 생성기 함수를 사용하여 비동기 프로세스를 해결하기 위해 작성한 모듈이라는 것을 알아야 합니다. 생성기 함수의 실행자라고 볼 수 있습니다. Async/await는 co 모듈의 업그레이드입니다. 여기에는 생성기 함수 실행기가 내장되어 있으며 더 이상 co 모듈에 의존하지 않습니다. 동시에 async는 Promise를 반환합니다.

위의 관점에서 볼 때, co 모듈이든 async/await이든 Promise는 가장 기본적인 단위로 사용됩니다. Promise에 대해 잘 모르는 학생들은 먼저 Promise에 대해 자세히 알아볼 수 있습니다.

Compare Promise, co, async/await

아래에서는 간단한 예를 사용하여 세 가지 방법 간의 유사점, 차이점 및 장단점을 비교합니다.

mongodb의 nodejs 드라이버를 사용하여 mongodb 데이터베이스를 쿼리하는 이유는 mongodb의 js 드라이버가 기본적으로 Promise 반환을 구현했기 때문에 Promise를 별도로 래핑할 필요가 없기 때문입니다.

Promise 체인 사용

MongoClient.connect(url + db_name).then(db => {
    return db.collection('blogs');
}).then(coll => {
    return coll.find().toArray();
}).then(blogs => {
    console.log(blogs.length);
}).catch(err => {
    console.log(err);
})

Promise의 then() 메서드는 다른 Promise나 동기화된 값을 반환할 수 있으며, 동기화된 값이 반환되면 Promise로 패키징됩니다. 위의 예에서 db.collection()은 동기화된 값, 즉 컬렉션 객체를 반환하지만 이는 Promise로 래핑되어 다음 then() 메서드에 투명하게 전달됩니다. 위의 예에서는 Promise 체인을 사용합니다. 먼저 데이터베이스 MongoClient.connect()에 연결하여 Promise를 반환한 다음 then() 메서드에서 데이터베이스 개체 db를 얻은 다음 coll 개체를 가져와 반환합니다. 다음 then() 메서드에서 coll 객체를 얻은 후 쿼리를 수행하고 쿼리 결과를 반환한 다음 계층별로 then() 메서드를 호출하여 Promise 체인을 형성합니다. 이 Promise 체인에서는 링크에서 예외가 발생하면 최종 catch()에 의해 포착됩니다. Promise Chain을 사용하여 작성된 이 코드는 콜백 함수를 계층별로 호출하는 것보다 더 우아하고 프로세스가 더 명확하다고 말할 수 있습니다. 먼저 데이터베이스 개체를 가져온 다음 컬렉션 개체를 가져온 다음 마지막으로 데이터를 쿼리합니다. 그러나 여기에는 그리 "우아한" 문제가 없습니다. 즉, 각 then() 메서드에서 얻은 객체가 이전 then() 메서드에서 반환된 데이터라는 것입니다. 여러 레이어에 걸쳐 액세스할 수 없습니다. 이것이 의미하는 바는 세 번째(blogs => {})에서는 쿼리 결과 블로그만 얻을 수 있지만 위의 db 객체와 coll 객체는 사용할 수 없다는 것입니다. 이때, 블로그 목록을 출력한 후 db.close() 데이터베이스를 닫고 싶다면 어떻게 해야 할까요? 이때 해결책은 두 가지가 있습니다.

첫 번째는 then() 중첩을 사용하는 것입니다. 콜백 함수의 중첩을 사용하는 것처럼 Promise 체인을 끊고 중첩시킵니다.

MongoClient.connect(url + db_name).then(db => {
    let coll = db.collection('blogs');
    coll.find().toArray().then(blogs => {
        console.log(blogs.length);
        db.close();
    }).catch(err => {
        console.log(err);
    });
}).catch(err => {
    console.log(err);
})

여기서는 두 개의 Promise를 중첩하여 마지막 쿼리 작업에서 외부 db 개체를 호출할 수 있습니다. 그러나 이 방법은 권장되지 않습니다. 이유는 간단합니다. 한 종류의 콜백 함수 지옥에서 다른 종류의 Promise 콜백 지옥으로 이동했기 때문입니다.
또한 Promise는 체인을 형성하지 않기 때문에 각 Promise의 예외를 잡아야 합니다.

각 then() 메소드에 db를 전달하는 또 다른 방법이 있습니다.

MongoClient.connect(url + db_name).then(db => {
    return {db:db,coll:db.collection('blogs')};
}).then(result => {
    return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result => {
    return result.blogs.then(blogs => {   //注意这里，result.coll.find().toArray()返回的是一个Promise，因此这里需要再解析一层
        return {db:result.db,blogs:blogs}
    })
}).then(result => {
    console.log(result.blogs.length);
    result.db.close();
}).catch(err => {
    console.log(err);
});

각 then() 메소드의 반환에서 우리는 매번 db와 다른 결과를 객체 반환으로 결합합니다. 각 결과가 동기화된 값이면 괜찮지만 Promise 값인 경우 각 Promise에는 추가 구문 분석 계층이 필요합니다.
예를 들어 위의 예에서 두 번째 then() 메서드에서 반환된 {db:result.db,blogs:result.coll.find().toArray()}对象中，blogs는 Promise입니다. 다음 then() 메서드에서는 블로그 목록 배열 값을 직접 참조할 수 없으므로 then()을 호출해야 합니다. 먼저 하나의 레이어를 구문 분석한 다음 두 개의 동기화 값인 db와 blogs를 반환합니다. 여기에는 Promise의 중첩이 포함되지만 Promise는 then()의 한 수준만 중첩됩니다.

这种方式，也是很蛋疼的一个方式，因为如果遇到then()方法中返回的不是同步的值，而是Promise的话，我们需要多做很多工作。而且，每次都透传一个“多余”的db对象，在逻辑上也有点冗余。

但除此之外，对于Promise链的使用，如果遇到上面的问题，好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案，如果要使用Promise链的话。

鉴于Promise上面蛋疼的问题，TJ大神将ES6中的生成器函数，用co模块包装了一下，以更优雅的方式来解决上面的问题。

co搭配生成器函数

如果使用co模块搭配生成器函数，那么上面的例子可以改写如下：

const co = require('co');
co(function* (){
    let db = yield MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = yield coll.find().toArray();
    console.log(blogs.length);
    db.close();
}).catch(err => {
    console.log(err);
});

co是一个函数，将接受一个生成器函数作为参数，去执行这个生成器函数。生成器函数中使用yield关键字来“同步”获取每个异步操作的值。
上面代码在代码形式上，比上面使用Promise链要优雅，我们消灭了回调函数，代码看起来都是同步的。除了使用co和yield有点怪之外。

使用co模块，我们要将所有的操作包装成一个生成器函数，然后使用co()去调用这个生成器函数。看上去也还可以接受，但是ES的进化是不满足于此的，于是async/await被提到了ES7的提案。

async/await

我们先看一下使用async/await改写上面的代码：

(async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    console.log(blogs.length);
    db.close();
})().catch(err => {
    console.log(err);
});

我们对比代码可以看出，async/await和co两种方式代码极为相似。co换成了async，yield换成了await。同时生成器函数变成了普通函数。这种方式在语义上更加清晰明了，async表明这个函数是异步的，同时await表示要“等待”异步操作返回值。

async函数返回一个Promise，上面的代码其实是这样：

let getBlogs = async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    db.close();
    return blogs;
};
getBlogs().then(result => {
    console.log(result.length);
}).catch(err => {
    console.log(err);
})

我们定义getBlogs为一个async函数，最后返回得到的博客列表最终会被包装成一个Promise返回，如上，我们直接调用getBlogs().then()方法可获取async函数返回值。

好了，上面我们简单对比了一下三种解决异步方案，下面我们来深入了解一下async/await。

深入async/await

async返回值

async用于定义一个异步函数，该函数返回一个Promise。
如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value)。
await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

//返回一个Promise
let timer = async function timer(){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('500');
        },500);
    });
}
timer().then(result => {
  console.log(result);  //500
}).catch(err => {
    console.log(err.message);
});

//返回一个同步的值
let sayHi = async function sayHi(){
  let hi = await 'hello world';   
  return hi;  //等同于return Promise.resolve(hi);
}
sayHi().then(result => {
  console.log(result);
});

上面这个例子返回是一个同步的值，字符串’hello world’，sayHi()是一个async函数，返回值被包装成一个Promise，可以调用then()方法获取返回值。对于一个同步的值，可以使用await，也可以不使用await。效果效果是一样的。具体用不用，看情况。

比如上面使用mongodb查询博客那个例子，let coll = db.collection('blogs');，这里我们就没有用await，因为这是一个同步的值。当然，也可以使用await，这样会显得代码统一。虽然效果是一样的。

async函数的异常

let sayHi = async function sayHi(){
    throw new Error('出错了');
}
sayHi().then(result => {
  console.log(result);
}).catch(err => {
    console.log(err.message);   //出错了
});

我们直接在async函数中抛出一个异常，由于返回的是一个Promise，因此，这个异常可以调用返回Promise的catch()方法捕捉到。

和Promise链的对比：
我们的async函数中可以包含多个异步操作，其异常和Promise链有相同之处，如果有一个Promise被reject()那么后面的将不会再进行。

let count = ()=>{
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            reject('故意抛出错误');
        },500);
    });
}
let list = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}
let getList = async ()=>{
    let c = await count();
    let l = await list();
    return {count:c,list:l};
}
console.time('begin');
getList().then(result => {
    console.log(result);
}).catch(err => {
    console.timeEnd('begin');
    console.log(err);
});
//begin: 507.490ms
//故意抛出错误

如上面的代码，定义两个异步操作，count和list，使用setTimeout延时500毫秒，count故意直接抛出异常，从输出结果来看，count()抛出异常后，直接由catch()捕捉到了，list()并没有继续执行。

并行

使用async后，我们上面的例子都是串行的。比如上个list()和count()的例子，我们可以将这个例子用作分页查询数据的场景。先查询出数据库中总共有多少条记录，然后再根据分页条件查询分页数据，最后返回分页数据以及分页信息。

我们上面的例子count()和list()有个“先后顺序”，即我们先查的总数，然后又查的列表。其实，这两个操作并无先后关联性，我们可以异步的同时进行查询，然后等到所有结果都返回时再拼装数据即可。

let count = ()=>{
    return new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve(100);
        },500);
    });
}
let list = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([1,2,3]);
        },500);
    });
}
let getList = async ()=>{
    let result = await Promise.all([count(),list()]);
    return result;
}
console.time('begin');
getList().then(result => {
    console.timeEnd('begin');  //begin: 505.557ms
    console.log(result);       //[ 100, [ 1, 2, 3 ] ]
}).catch(err => {
    console.timeEnd('begin');
    console.log(err);
});

我们将count()和list()使用Promise.all()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。

최종 결과는 두 가지 작업의 결과로 구성된 배열입니다. 배열의 값을 순서대로 꺼내기만 하면 됩니다.

【추천 학습: javascript 비디오 튜토리얼】

위 내용은 es6 또는 es7에 비동기가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!