js獲取異步方法里面的數據

這里介紹  五種方法(說白了本質 就三種)

1.callback回調函數 

　　　　function getData(callback){
            setTimeout(()=>{
                let name = '哈哈哈,我是callback回調函數  獲取異步方法里面的數據';
                callback(name)
            },1000)
        }

        getData(data=>{
            console.log(data)
        })

2. promise來處理異步   // resolve成功的回調函數     // reject失敗的回調函數

   　　 var p = new Promise((resolve,reject)=>{
            //ajax
            setTimeout(()=>{
                let n = Math.random()
                if(n<0.5){
                    resolve(n)
                }else{
                    reject(`${n}大於了0.5所以失敗`)
                }
            　　//三元表達式寫法  Math.random()<0.5?resolve(n):reject(`${n}大於了0.5所以失敗`)
            },2000)
        })
        p.then((data)=>{
            console.log(`${data},,,,我是promise來處理異步`)
        })        

3.promise結合第一種方法

 

       // 第三種
        function getData(resolve,reject){
            setTimeout(()=>{
                let name = '我是第三種獲取異步方法里面的數據';
                resolve(name)
            },1000)
        }
        var p1 = new Promise(getData)
        
        p1.then(data=>{
            console.log(`${data}我是第三種`)
        })        

 

 4. async  await  方法

async: 把函數變成異步函數,;     await = async wait,  等待異步函數執行完成  (await一定要寫在 async異步方法中)

    // 第四種 async  await
        async function getdata2(){
            
            return 'await,async,我是第四個方法'
        }
        async function test (){
            let d = await getdata2()
            console.log(d)
        }
        test()        

 5.async  await  方法 和promise結合

// 第五種 async  await 結合Promise
        
        function getdata3(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    let name = '我是第五種方法';
                    resolve(name)
                },1000)
            })
        }
        async function test3(){
            let aa = await getdata3()  
            console.log(aa)
        }
        test3()