L'async est-il un attribut es6 ?

Appartient à, async est une nouvelle fonctionnalité d'es6, qui est utilisée pour indiquer qu'il peut y avoir des processus asynchrones dans le programme. La fonction déclarée avec le mot-clé async renvoie un objet Promise. Si une valeur directe est renvoyée dans la fonction, async encapsulera la valeur directe dans un objet Promise via Promise.resolve(); renvoie " Promise.resolve (indéfini)".

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

ES6 nouvelles fonctionnalités mots-clés async et wait

1. Compréhension préliminaire

Comprenons d'abord ces deux mots-clés littéralement, async est l'abréviation de asynchrone (asynchrone), et wait peut être considéré comme async Abréviation de wait. Ainsi, async peut être compris comme étant utilisé pour déclarer une fonction asynchrone, tandis que wait est utilisé pour attendre la fin d'une tâche asynchrone.

Les mots-clés async et wait nous permettent d'écrire un comportement asynchrone basé sur des promesses de manière plus concise sans enchaîner délibérément les promesses.

Ensuite, jetons un coup d'œil préliminaire aux fonctions d'async et attendons à travers quelques exemples.

Point de connaissance 1 : Les fonctions déclarées avec le mot-clé async renvoient un objet Promise. Si vous renvoyez une valeur directe dans une fonction, async encapsulera la valeur directe dans un objet Promise via Promise.resolve(). Lorsque la fonction async ne renvoie pas de valeur, elle renvoie Promise.resolve(undefined)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)
     }
 }

Point de connaissance 2 : Le mot-clé

wait ne peut être utilisé que dans les fonctions déclaré par async Inside, utilisé pour modifier un objet Promise afin que les tâches asynchrones traitées par l'objet Promise soient exécutées de manière synchrone et séquentielle sur la coroutine actuelle.

 //原本的解决方案
 //第二个请求依赖于第一个请求的返回值，第三个请求依赖于第二个请求的返回值
 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. Le mot-clé async

(1) est utilisé pour indiquer qu'il peut y avoir un processus asynchrone dans le programme

(2) Le type de valeur de retour de la fonction asynchrone est un objet Promise : est essentiellement différent des fonctions ordinaires. C'est aussi le point clé auquel il faut prêter attention lors de son utilisation

• return newPromise(), cette utilisation est conforme à l'intention initiale de la fonction async ; >
• données de retour, notez en particulier qu'écrire comme ceci est équivalent à Promise.resolve( data), les données renvoyées sont encapsulées dans un objet Promise, mais lorsque la fonction asynchrone est appelée, les données de valeur de retour ne peuvent pas être obtenues via un simple =, car la valeur de retour est un objet Promise, vous devez donc utiliser .then(data = > { }) pour obtenir ces données
• S'il n'y a pas de valeur de retour, cela équivaut à ; return Promise.resolve(undefined);

🎜 (3) Pas d'attente, Non bloquant : s'il y a un processus asynchrone dans une fonction déclarée avec le mot clé async, il peut attendre, mais la fonction elle-même reviendra immédiatement et ne bloquera pas le thread principal actuel. Si le processus asynchrone modifié avec le mot clé wait est utilisé dans la fonction, il fonctionnera sur la coroutine correspondante et bloquera et attendra la fin de la tâche asynchrone avant de revenir. 🎜rrreee🎜🎜3. mot-clé wait🎜🎜🎜 (1) wait ne peut être utilisé qu'à l'intérieur de fonctions asynchrones : il ne peut pas être placé à l'intérieur de fonctions ordinaires, sinon une erreur sera signalée. 🎜🎜 (2) Le mot-clé wait est suivi d'un objet Promise. Si elle est suivie d'une fonction, cette fonction doit renvoyer un objet Promise. S'il est suivi d'un objet non-Promise, il sera automatiquement empaqueté dans un objet Promise via la fonction Promise.resolve() et placé dans l'état accompli. 🎜rrreee🎜 (3) L'essence de wait est d'attendre le statut rempli de l'objet Promise qu'il modifie et de renvoyer les données de solve(data). 🎜🎜Cela signifie que si wait est suivi d'un objet Promise, await bloquera le code suivant, en attendant l'objet Promise solve, puis obtenez la valeur de resolve comme résultat de l'expression await. 🎜rrreee🎜 (4) wait ne se soucie pas du statut rejeté de l'objet Promise qu'il modifie, c'est-à-dire que les données de rejet (données) ne seront pas traitées par wait, il est donc recommandé d'appeler catch via l'objet Promise pour le capturer. 🎜rrreee🎜🎜4. Explication détaillée d'async et wait🎜🎜🎜 (1) Séquence d'exécution🎜rrreee🎜①Imprimez d'abord avant l'appel getResult, synchronisez le code et exécutez-le séquentiellement 🎜🎜 ; ②Appelez ensuite la méthode getResult ( ), imprimez la sortie avant d'appeler double, code synchrone, exécuté séquentiellement 🎜🎜③ Appelez ensuite la méthode asynchrone double()🎜🎜🎜Si le mot-clé wait n'est pas utilisé ici, la sortie dans l'ordre est : avant l'appel de getResult, avant l'appel de double, après l'appel de double, après l'appel de getResult et 20 est sorti après 1 s🎜🎜Parce que l'opération asynchrone n'affectera pas l'exécution d'autres codes, d'autres codes le feront sera exécuté dans l'ordre, et enfin la fonction double sera exécutée🎜 🎜🎜🎜Étant donné que le mot-clé wait est utilisé ici, le code getResult() sera bloqué lorsqu'il sera exécuté ici. Attendez que la fonction double soit résolue, puis continuez l'exécution🎜.

④尽管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视频教程、编程视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!