Ist async ein es6-Attribut?

Async ist eine neue Funktion von es6, die verwendet wird, um anzuzeigen, dass das Programm möglicherweise asynchrone Prozesse enthält. Die mit dem Schlüsselwort async deklarierte Funktion gibt ein Promise-Objekt zurück, wenn die async-Funktion keinen Wert zurückgibt gibt „ Promise.resolve(undefiniert)“ zurück.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

ES6 neue Funktionen „async“ und „await“-Schlüsselwörter

1. Vorläufiges Verständnis

Lassen Sie uns zunächst verstehen, dass diese beiden Schlüsselwörter wörtlich „asynchron“ (asynchron) sind und „await“ als asynchrone Abkürzung für „warten“ betrachtet werden kann. Unter „async“ kann man also verstehen, dass eine Funktion als asynchron deklariert wird, während „await“ verwendet wird, um auf den Abschluss einer asynchronen Aufgabe zu warten.

Die Schlüsselwörter „async“ und „await“ ermöglichen es uns, versprechungsbasiertes asynchrones Verhalten prägnanter zu schreiben, ohne Versprechungen absichtlich zu verketten.

Als nächstes werfen wir einen ersten Blick auf die Funktionen von Async und schauen uns einige Beispiele an.

Wissenspunkt 1: Mit dem Schlüsselwort async deklarierte Funktionen geben ein Promise-Objekt zurück. Wenn Sie einen direkten Wert in einer Funktion zurückgeben, kapselt async den direkten Wert über Promise.resolve() in ein Promise-Objekt. Wenn die Funktion async keinen Wert zurückgibt, gibt sie Promise.resolve(undefiniert)return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。当 async 函数没有返回值时，返回 Promise.resolve(undefined)

 //定义一个普通函数，返回一个字符串
 function test() {
     return "hello async";
 }
 const result1 = test();
 console.log(result1); //输出一个字符串 hello async
 
 //定义一个使用了async修饰的函数，同样返回一个字符串
 async function testAsync() {
     return "hello async";
 }
 const result2 = testAsync();
 console.log(result2); //输出一个Promise对象 Promise {<fulfilled>: 'hello async'}

 //async较好的用法
 async function testAsync(){
     //返回一个Promise对象
     return new Promise((resolve, reject)=>{
         //处理异步任务
         setTimeout(function () {
             resolve("testAsync")
         }, 1000);
     })
 }
 //async通常用于声明一个处理异步任务且返回了Promise对象的函数

知识点2： await关键字只能使用在被async声明的函数内，用于修饰一个Promise对象，使得该Promise对象处理的异步任务在当前协程上按顺序同步执行。

 //定义一个使用async修饰的函数，处理异步任务
 async function testAsync(){
     return new Promise((resolve, reject)=>{
         setTimeout(function () {
             resolve("testAsync")
         }, 1000);
     })
 }

 //定义一个函数，直接调用testAsync函数
 function testAwait(){
     console.log('testAsync调用前')
     testAsync().then(res=>{
         console.log(res) //输出"testAsync"
     })
     console.log('testAsync调用后')
 }
 
 /***** 输出如下 *****/
 testAsync调用前
 testAsync调用后
 testAsync
 //尽管代码按顺序写，但不按顺序执行，因为testAsync()是异步函数

 //定义一个函数（不使用async声明该函数）用await修饰调用testAsync函数
 function testAwait(){
     console.log('testAsync调用前')
     await testAsync().then(res=>{ //使用await关键字修饰
         console.log(res)
     })
     console.log('testAsync调用后')
 }
 
 //调用testAwait()函数
 testAwait()
 //报错：Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules，因为await只能使用在被async修饰的函数内。

 //定义一个函数（使用async声明该函数）用await修饰调用testAsync函数
 async function testAwait(){
     console.log('testAsync调用前')
     await testAsync().then(res=>{
         console.log(res)
     })
     console.log('testAsync调用后')
 }
 
 /***** 输出如下 *****/
 testAsync调用前
 testAsync
 testAsync调用后
 
 //使用了await关键字修饰，使得代码按照顺序执行，即同步执行

2、async关键字

（1）用于表明程序里面可能有异步过程

（2）async函数返回值的类型为Promise对象： 这是和普通函数本质上不同的地方，也是使用时重点注意的地方；

• return newPromise( )，这个用法符合async函数本意；
• return data，特别注意到是这样子写相当于Promise.resolve(data)，返回的data被封装成一个Promise对象，但是在调用async函数的地方通过简单的=是拿不到这个返回值data的，因为返回值是一个Promise对象，所以需要用.then(data => { })方式才可以拿到这个data；
• 如果没有返回值，相当于返回了Promise.resolve(undefined)；

（3）无等待，非阻塞：使用async关键字声明的函数里面如果有异步过程可能会等待，但是函数本身会马上返回，不会阻塞当前主线程。如果在函数里面使用了await关键字修饰的异步过程，其工作在相应的协程上，会阻塞等待异步任务的完成再返回。

 //定义一个函数，处理异步任务（使用定时器模拟），返回一个Promise对象
 async function testAsync(){
     return new Promise((resolve, reject) => {
       setTimeout(function () {
         resolve("成功调用testAsync")
       }, 1000);
     });
 }
 
 //定义一个函数，使用await关键字修饰调用testAsync()函数
 async function testAwait(){
     //使用了await关键字修饰调用testAsyn()函数
     await this.testAsync().then(res=>{
       console.log(res) //输出的是testAsync()函数resolve的值
     });
     console.log("helloAsync");
 }
 
 //主线程
 console.log('testAwait调用前')
 testAwait();
 console.log('testAwait调用后')
 
 /***** 输出结果如下 *****/
 testAwait调用前
 testAwait调用后 //因为testAwait()函数使用了async关键字修饰，所以不会阻塞主线程的执行，所以这两句话会先直接输出，然后再执行testAwait()函数
 成功调用testAsync //因为testAwait()函数在内部调用testAsync()函数时使用了await关键字修饰，所以在对应的协程上会阻塞，等待testAsync()函数执行完，再输出下面那句'helloAsync'
 helloAsync

3、await关键字

（1）await只能在async函数内部使用：不能放在普通函数里面，否则会报错。

（2）await关键字后面跟的是一个Promise对象。如果跟的是一个函数，则这个函数应当返回一个Promise对象。如果跟的是非Promise对象，则会通过Promise.resolve( )函数自动将这个东西包装成一个Promise对象并置于fulfilled状态。

 //例如：
 const a = await 'Hello Await'
 // 相当于
 const a = await Promise.resolve('Hello Await');
 
 console.log(a) //输出 'Hello Await'

（3）await的本质是等待它所修饰的Promise对象的fulfilled状态，并把resolve(data)的数据data返回。

意思是，如果await后面跟的是一个 Promise 对象，await 就会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

 async function testAsync(){
     return new Promise((resolve, reject) => {
       setTimeout(function () {
         resolve("成功调用testAsync")
       }, 1000);
     });
 }
 
 const a = await testAsync() //这里的a就会拿到testAsync函数resolve的数据
 console.log(a) //在一秒后输出'成功调用testAsync'

（4）await并不关心它所修饰的Promise对象的rejected状态，即reject(data)的数据data并不会被await处理，所以建议通过Promise对象调用catch去捕获。

 async testAwait(){
     //变量a用于接收testAsync()函数resolve的数据
     let a = await testAsync().catch(err=>{
         //处理异常和reject的数据
     })    
 }

4、深入讲解async和await

（1）执行顺序

 //定义一个函数，该函数接收一个参数，1s后再返回参数的两倍
 async function double(num) {
     return new Promise((resolve, reject) => {
         setTimeout(() => { //使用定时器模拟异步任务
             resolve(2 * num) //将运算结果交给resolve
         }, 1000);
     })
 }
 
 async function getResult () {
     console.log('double调用前')  //顺序：2
     let result = await double(10); //将10作为参数传递给double函数
     //result变量用于接收double()函数resolve的值
     console.log(result); //顺序：4
     console.log('double调用后') //顺序：4
 }
 
 console.log('getResult调用前') //顺序：1
 getResult();
 console.log('getResult调用后') //顺序：3
 
 /***** 依次输出如下 *****/
 getResult调用前
 double调用前
 getResult调用后
 20 //1s后输出
 double调用后

①首先打印输出getResult调用前，同步代码，顺序执行；

②然后调用方法getResult( )，打印输出double调用前

 //方法一：通过promise对象的catch进行捕获
 function a(){
     return new Promise((resolve,reject) => {
         setTimeout(() => {
             reject("something")
         }, 1000)
     })
 }
 
 async function b(){
     let r = await a().catch((err)=>{
         console.log(err)
     })
 }

 //方法二：通过try/catch语句处理
 function a(){
     return new Promise((resolve,reject) => {
         setTimeout(() => {
             reject("something")
         }, 1000)
     })
 }
 
 async function b(){
     let r = null
     try{
        r = await a()
     }catch(err){
         console.log(err)
     }
 }

Wissenspunkt 2: Das Schlüsselwort „await“ kann nur in Funktionen verwendet werden von async Inside deklariert und zum Ändern eines Promise-Objekts verwendet, sodass die vom Promise-Objekt verarbeiteten asynchronen Aufgaben synchron und sequentiell in der aktuellen Coroutine ausgeführt werden.

 //原本的解决方案
 //第二个请求依赖于第一个请求的返回值，第三个请求依赖于第二个请求的返回值
 request1().then(function(data){ 
     return request2(data)
 }).then(function(data){ 
     return request3(data)
 })
 //这里只发送了三次请求，代码看起来还不错，虽然它已经比普通的回调函数形式好了很多。
 //那如果需要发送五次或十次请求呢？代码也许会没那么美观，接下来我们使用学习到的await去解决这个问题。

 //使用await的解决方案
 var res1 = await request1() //将request1的返回值赋值给res1
 var res2 = await request2(res1) //将res1作为参数传给request2，并将request2的返回值赋值给res2
 var res3 = await request3(res2) //同理
 
 //这样子写的代码更加的美观，并且更符合我们平时编写代码的习惯

rrreeerrreee

2. Das Schlüsselwort async

(1) wird verwendet, um anzuzeigen, dass es möglicherweise einen asynchronen Prozess im Programm gibt

(2) Der Typ des Rückgabewerts der asynchronen Funktion ist ein Promise-Objekt: Dies ist im Wesentlichen Anders als bei gewöhnlichen Funktionen ist dies auch der entscheidende Punkt, auf den bei der Verwendung geachtet werden muss.

• return newPromise() entspricht der ursprünglichen Absicht der asynchronen Funktion li>Daten zurückgeben, beachten Sie insbesondere, dass das Schreiben auf diese Weise Promise.resolve( Daten) entspricht. Die zurückgegebenen Daten werden in ein Promise-Objekt gekapselt, aber wenn die asynchrone Funktion aufgerufen wird, können die Rückgabewertdaten nicht durch ein einfaches = abgerufen werden Da der Rückgabewert ein Promise-Objekt ist, müssen Sie .then(data = > { }) verwenden, um diese Daten abzurufen.
• Wenn kein Rückgabewert vorhanden ist, entspricht dies der Rückgabe von Promise .resolve(undefiniert);

(3) Kein Warten, nicht blockierend: Wenn in einer mit dem Schlüsselwort async deklarierten Funktion ein asynchroner Prozess vorhanden ist, kann dieser warten, aber die Funktion selbst kehrt zurück sofort und blockiert nicht den aktuellen Hauptthread. Wenn der mit dem Schlüsselwort „await“ geänderte asynchrone Prozess in der Funktion verwendet wird, arbeitet er mit der entsprechenden Coroutine und blockiert und wartet auf den Abschluss der asynchronen Aufgabe, bevor er zurückkehrt. 🎜rrreee🎜🎜3. Schlüsselwort „await“ (1) „await“ kann nur innerhalb asynchroner Funktionen verwendet werden: Es kann nicht innerhalb gewöhnlicher Funktionen platziert werden, andernfalls wird ein Fehler gemeldet. 🎜🎜 (2) Auf das Schlüsselwort „await“ folgt ein Promise-Objekt. Wenn eine Funktion folgt, sollte diese Funktion ein Promise-Objekt zurückgeben. Wenn ihm ein Nicht-Promise-Objekt folgt, wird es über die Funktion Promise.resolve() automatisch in ein Promise-Objekt gepackt und in den erfüllten Zustand versetzt. 🎜rrreee🎜 (3) Die Essenz von „await“ besteht darin, auf den erfüllten Status des Promise-Objekts zu warten, das es ändert, und die Daten von „resolve(data)“ zurückzugeben. 🎜🎜Das bedeutet, dass, wenn auf „await“ ein Promise-Objekt folgt, await den folgenden Code blockiert und auf das Promise-Objekt wartet lösen und erhalten dann den Wert von resolve als Ergebnis des await-Ausdrucks. 🎜rrreee🎜 (4) Await kümmert sich nicht um den Ablehnungsstatus des von ihm geänderten Promise-Objekts, das heißt, die Datendaten von Reject (Daten) werden von Wait nicht verarbeitet. Daher wird empfohlen, Catch über das Promise-Objekt aufzurufen um es einzufangen. 🎜rrreee🎜🎜4. Ausführliche Erklärung von Async und Wait🎜🎜🎜 (1) Ausführungssequenz🎜rrreee🎜①Drucken Sie zuerst vor dem Aufruf von getResult aus, synchronisieren Sie den Code und führen Sie ihn nacheinander aus; ②Dann rufen Sie die Methode getResult () auf, drucken Sie die Ausgabe bevor Sie double aufrufen, synchroner Code, der nacheinander ausgeführt wird 🎜🎜③ Rufen Sie dann die asynchrone Methode double( )🎜🎜🎜 auf. Die Ausgabe in der Reihenfolge lautet: Bevor getResult aufgerufen wird, bevor double aufgerufen wird, nachdem double aufgerufen wird, nachdem getResult aufgerufen wird und 20 nach 1 Sekunde ausgegeben wird der Reihe nach ausgeführt werden, und schließlich wird die Doppelfunktion ausgeführt

④尽管getResult函数内部被await阻塞了，由于getResult函数本身也是个async函数，所以它不会影响getResult函数外面的代码执行。因为调用async函数不会造成阻塞，它内部的所有阻塞都被封装在一个Promise对象中异步执行。

⑤所以在调用getResult函数后，会继续向下执行，即打印输出getResult调用后

⑥当1s之后，异步函数double执行完成，将结果交给resolve。

⑦通过await关键字接收到double函数resolve的值，赋值给result变量。打印输出20

⑧因为使用了await阻塞将异步变为同步，所以在打印输出20后再打印输出double调用后

（2）处理reject回调

 //方法一：通过promise对象的catch进行捕获
 function a(){
     return new Promise((resolve,reject) => {
         setTimeout(() => {
             reject("something")
         }, 1000)
     })
 }
 
 async function b(){
     let r = await a().catch((err)=>{
         console.log(err)
     })
 }

 //方法二：通过try/catch语句处理
 function a(){
     return new Promise((resolve,reject) => {
         setTimeout(() => {
             reject("something")
         }, 1000)
     })
 }
 
 async function b(){
     let r = null
     try{
        r = await a()
     }catch(err){
         console.log(err)
     }
 }

（3）使用await优化Promise对象的回调地狱问题

在Promise章节中我们通过了Promise对象的then( )方法链式调用解决了回调地狱问题，但看起来仍然不够美观，我们可以通过await优化一下，让它看起来更符合我们平时代码的编写习惯。

 //原本的解决方案
 //第二个请求依赖于第一个请求的返回值，第三个请求依赖于第二个请求的返回值
 request1().then(function(data){ 
     return request2(data)
 }).then(function(data){ 
     return request3(data)
 })
 //这里只发送了三次请求，代码看起来还不错，虽然它已经比普通的回调函数形式好了很多。
 //那如果需要发送五次或十次请求呢？代码也许会没那么美观，接下来我们使用学习到的await去解决这个问题。

原本的要求是每个请求都依赖于上一个请求的返回值，那么是不是得等一个请求完，才能发送下一个请求？这时我们可以思考一下，await的作用是什么？是不是对一个Promise对象去进行阻塞，使其状态变为fulfilled后获取resolve的值。这不就正是我们所需要的。

 //使用await的解决方案
 var res1 = await request1() //将request1的返回值赋值给res1
 var res2 = await request2(res1) //将res1作为参数传给request2，并将request2的返回值赋值给res2
 var res3 = await request3(res2) //同理
 
 //这样子写的代码更加的美观，并且更符合我们平时编写代码的习惯

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonIst async ein es6-Attribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!