亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

ES6中async函數(shù)與await表達式的基本用法舉例

 更新時間:2022年07月27日 11:09:37   作者:小余努力搬磚  
async和await是我們進行Promise時的一個語法糖,async/await為了讓我們書寫代碼時更加流暢,增強了代碼的可讀性,下面這篇文章主要給大家介紹了關于ES6中async函數(shù)與await表達式的基本用法,需要的朋友可以參考下

一、async 函數(shù)

概念:  

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

舉例:

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

二、await表達式

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

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

2.await右側的表達式一般為promise對象

3.await可以返回的是右側promise成功的值

4.await右側的promise如果失敗了,就會拋出異常,需要通過try…catch捕獲處理

舉例:

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

舉例:失敗的代碼 await 錯誤的代碼 需要用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 基礎使用

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")

補充:async await ajax使用

首先要創(chuàng)建對象,用get的方法請求后面?zhèn)魅氲牡刂?,再發(fā)送請求,通過判斷出輸出有無數(shù)據(jù)。

function sendajax(url){
    return new Promise((resolve,reject)=>{                
          const http =  new XMLHttpRequest();//創(chuàng)建對象
          http.open("GET",url);//用get方法請求地址
          http.send();//發(fā)送請求                
          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("無數(shù)據(jù)");
    }        
}
demo();

總結

到此這篇關于ES6中async函數(shù)與await表達式的基本用法的文章就介紹到這了,更多相關ES6 async函數(shù)與await表達式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 針對BootStrap中tabs控件的美化和完善(推薦)

    針對BootStrap中tabs控件的美化和完善(推薦)

    這篇文章主要介紹了針對BootStrap中tabs控件的美化和完善的相關資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧
    2016-07-07
  • Bootstrap零基礎入門教程(三)

    Bootstrap零基礎入門教程(三)

    Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。本文重點給大家介紹Bootstrap零基礎入門教程(三) ,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧
    2016-07-07
  • 詳解ES6數(shù)組方法find()、findIndex()的總結

    詳解ES6數(shù)組方法find()、findIndex()的總結

    這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • 如何在TypeScript中處理日期字符串

    如何在TypeScript中處理日期字符串

    這篇文章主要介紹了如何在TypeScript中處理日期字符串,主要通過輸入日期字符串來改善開發(fā)者的體驗并減少潛在的錯誤,下文實現(xiàn)操作的分享需要的小伙伴可以參考一下
    2022-04-04
  • 小程序中手機號識別的示例

    小程序中手機號識別的示例

    這篇文章主要介紹了小程序中手機號識別的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • layui 對table中的數(shù)據(jù)進行轉義的實例

    layui 對table中的數(shù)據(jù)進行轉義的實例

    今天小編就為大家分享一篇layui 對table中的數(shù)據(jù)進行轉義的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript設計模式之職責鏈模式詳解

    JavaScript設計模式之職責鏈模式詳解

    職責鏈模式的定義是:使多個對象都有機會處理請求,從而避免請求的發(fā)送者和接收者之間的耦合關系,將這些對象連成一條鏈,并沿著這條鏈傳遞該請求,直到有一個對象處理它為止
    2022-08-08
  • utf-8編碼引起js輸出中文亂碼的解決辦法

    utf-8編碼引起js輸出中文亂碼的解決辦法

    utf-8編碼引起document.writeln輸出中文亂碼的解決辦法
    2010-06-06
  • JavaScript實現(xiàn)復選框全選功能

    JavaScript實現(xiàn)復選框全選功能

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)復選框全選功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • bootstrap datepicker限定可選時間范圍實現(xiàn)方法

    bootstrap datepicker限定可選時間范圍實現(xiàn)方法

    這篇文章主要介紹了bootstrap datepicker限定可選時間范圍的實現(xiàn)方法,本文涉及到相關知識點,通過實例給大家介紹的非常詳細,需要的朋友可以參考下
    2016-09-09

最新評論