ES6中async函數(shù)與await表達(dá)式怎么使用

本文小編為大家詳細(xì)介紹“ES6中async函數(shù)與await表達(dá)式怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“ES6中async函數(shù)與await表達(dá)式怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

一、async 函數(shù)

概念：  

async 是一個(gè)修飾符，async 定義的函數(shù)會(huì)默認(rèn)的返回一個(gè)Promise對(duì)象resolve（成功值）的值，因此對(duì)async函數(shù)可以直接進(jìn)行then操作,返回的值即為then方法的傳入函數(shù)。

舉例：

async function demo(){
// 1:當(dāng)返回值不是promise對(duì)象 當(dāng)調(diào)用函數(shù)的時(shí)候就是已成功的值
// return "succ";
// 2:當(dāng)返回的是promise對(duì)象 那么函數(shù)(promise對(duì)象)的結(jié)果與返回的promise狀態(tài)一致
return  new Promise((resolve,reject)=>{   //Promise 內(nèi)容請(qǐng)參考上期作品，關(guān)注專欄。
            let flag = true;
                if(flag){
                resolve("succ");
            }else{
                reject("error");
                }
                })
            }
const MyPromise = demo();
MyPromise.then((resolve)=>{
    console.log(resolve);
},(reject)=>{
    console.log(reject);
})

二、await表達(dá)式

它也是一個(gè)修飾符，await 關(guān)鍵字 只能放在 async 函數(shù)內(nèi)部， await關(guān)鍵字的作用 就是獲取 Promise中返回的內(nèi)容， 獲取的是Promise函數(shù)中resolve。

1.await必須放在async函數(shù)中

2.await右側(cè)的表達(dá)式一般為promise對(duì)象

3.await可以返回的是右側(cè)promise成功的值

4.await右側(cè)的promise如果失敗了，就會(huì)拋出異常，需要通過(guò)try…catch捕獲處理

舉例：

// 1:await需要寫(xiě)在async函數(shù)的內(nèi)部    
// 2:await 修飾的Promise 返回的值就是resolve的值
// 3:后面的代碼需要等待 await后的結(jié)果
async function demo(){
const a = await "a";
const b = await new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log("定時(shí)器執(zhí)行了....");
    resolve("b");
        },3000);
    });
const c =  await "c";
console.log(a,b,c);
            }
            demo();

舉例：失敗的代碼 await 錯(cuò)誤的代碼 需要用try catch捕獲

async  function demo(){
    try{
    const a = await new Promise((relsolve,reject)=>{
        reject("數(shù)據(jù)不存在");    
})
    }catch(error){
        console.log(error);
                }
            }
demo();

三、async await ajax 基礎(chǔ)使用

function mark (url){
return new Promise((resolve,reject)=>{
      const ajax = new XMLHttpRequest();
      ajax.open("GET",url)
      ajax.send();
      ajax.onreadystatechange=function(){
if(ajax.readyState==4){
      if(ajax.status==200){
       resolve(JSON.parse(ajax.response));
                        }
                    }
                }
            })
        }
async function demo(){
const res = await mark("http://127.0.0.1:5500/test.json")

補(bǔ)充：async await ajax使用

首先要?jiǎng)?chuàng)建對(duì)象，用get的方法請(qǐng)求后面?zhèn)魅氲牡刂?，再發(fā)送請(qǐng)求，通過(guò)判斷出輸出有無(wú)數(shù)據(jù)。

function sendajax(url){
    return new Promise((resolve,reject)=>{                
          const http =  new XMLHttpRequest();//創(chuàng)建對(duì)象
          http.open("GET",url);//用get方法請(qǐng)求地址
          http.send();//發(fā)送請(qǐng)求                
          http.onreadystatechange = function(){                      
              if(http.readyState==4){                              
                  if(http.status==200){
                      resolve(JSON.parse(http.response));
                  }                              
              }                          
          }                                            
    })                
}            
async function demo(){                
    const res = await sendajax("http://127.0.0.1:8848/web2209/ES6/test.json");
    if(res.code==200){
        console.log("有數(shù)據(jù)");
    }else{
        console.log("無(wú)數(shù)據(jù)");
    }        
}
demo();

讀到這里，這篇“ES6中async函數(shù)與await表達(dá)式怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。