• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    JS中的async/await的用法和理解

    時間:2021-09-25 11:43:31 類型:JS/JQUERY
    字號:    

      1、首先需要理解async 和 await的基本含義

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

    // 0. async基礎用法測試
    
    async function fun0() {
        console.log(1)
        return 1
    }
    
    fun0().then( x => { console.log(x) })  //  輸出結果 1, 1,
    
    
    async function funa() {
        console.log('a')
        return 'a'
    }
    
    funa().then( x => { console.log(x) })  //  輸出結果a, a,
    
    
    async function funo() {
        console.log({})
        return {}
    }
    
    funo().then( x => { console.log(x) })   // 輸出結果 {}  {}
    
    async function funp() {
        console.log('Promise')
        return new Promise(function(resolve, reject){
            resolve('Promise')
        })
    }
    
    funp().then( x => { console.log(x) })   // 輸出promise  promise

      await 也是一個修飾符,

      await 關鍵字 只能放在 async 函數內部, await關鍵字的作用 就是獲取 Promise中返回的內容, 獲取的是Promise函數中resolve或者reject的值

      // 如果await 后面并不是一個Promise的返回值,則會按照同步程序返回值處理

    //  await 關鍵字 只能放在 async 函數內部, await關鍵字的作用 就是獲取 Promise中返回的內容, 獲取的是Promise函數
    中resolve或者reject的值
    // 如果await 后面并不是一個Promise的返回值,則會按照同步程序返回值處理,為undefined
    const bbb = function(){ return 'string'}
    
    async function funAsy() {
       const a = await 1
       const b = await new Promise((resolve, reject)=>{
            setTimeout(function(){
               resolve('time')
            }, 3000)
       })
       const c = await bbb()
       console.log(a, b, c)
    }
    
    funAsy()  //  運行結果是 3秒鐘之后 ,輸出 1, time , string,
    // 2.如果不使用promise的方法的話
    
    function log2(time) {
       setTimeout(function(){
           console.log(time)
           return 1
        }, time)
    }
    
    async function fun1() {
        const a = await log2(5000)
        const b = await log2(10000)
        const c = log2(2000)
        console.log(a)
        console.log(1)
    }
    
    fun1()
    
    // 以上運行結果為: 立刻輸出undefined   立刻輸出1  2秒后輸出2000  5秒后輸出5000  10秒后輸出10000

      2、那么由此看來async / await的綜合用法如下

    // 1.定義一個或多個普通函數,函數必須返回Promise對象,如果返回其他類型的數據,將按照普通同步程序處理
    
    function log(time) {
        return new Promise((resolve, reject)=> {
            setTimeout(function(){
               console.log(time)
               resolve()
            }, time)
        })
    }
    
    async function fun() {
        await log(5000)
        await log(10000)
        log(1000)
        console.log(1)
    }
    
    fun()
    // 3. async / await的重要應用 
    
    const asy = function(x, time) {
        return new Promise((resolve, reject) =>{
            setTimeout(()=>{
                resolve(x)
            }, time)
        })
    }
    
    const add = async function() {
        const a = await asy(3, 5000)
        console.log(a)
        const b = await asy(4, 10000)
        console.log(b)
        const c =  await asy(5, 15000)
        console.log(a,b,c)
        const d = a + b +c  
        console.log(d)
    }
    
    add();
    
    // 5秒后輸出3  又10秒后輸出4 又15秒后輸出5  然后立刻輸出3,4,5,然后輸出12


    黄片基地 <