async...await

本文介绍了async...await的使用,包括其功能作用和具体用法。async标识符定义异步函数,使得函数内部等待await表达式的结果,同时返回一个Promise对象。await操作符用于等待Promise对象的解决,并返回其结果。在示例中,演示了如何使用async...await获取音乐排行榜的歌曲详细信息,整个过程耗时约6秒。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

async…await使用

1.功能作用:
  1. async 告诉程序这是一个异步,async中的代码,会等待await 表达式后面的结果,跳过async 函数,继续执行后面代码
  2. async 函数会返回一个Promise 对象,那么当 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值
  3. await 操作符用于等待一个Promise 对象,并且返回 Promise 对象的处理结果(成功把resolve 函数参数作为await 表达式的值),如果等待的不是 Promise 对象,则用 Promise.resolve(xx) 转化
2.用法:
function getResultAll() {
            //异步执行函数,计时器几乎同时开始计时,输出了代表函数执行完成
            getResult3();//计时器3秒, 输出排序:6
            console.log(1111);//输出排序:1
            getResult2();//计时器2秒, 输出排序:5
            console.log(2222);//输出排序:2
            getResult1();//计时器1秒, 输出排序:4
            console.log(3333);//输出排序:3
        }
        getResultAll()
//整个函数执行完成的时间大概3秒多

在这里插入图片描述
async…await使用: 整个函数执行完成的时间大概6秒多

///async...await使用
async function getResultAll() {
            //函数里面有await按同步执行
            await getResult3();//计时器3秒, 输出排序:1
            console.log(1111);//输出排序:2
            await getResult2();//计时器2秒, 输出排序:3
            console.log(2222);//输出排序:4
            await getResult1();//计时器1秒, 输出排序:5
            console.log(3333);//输出排序:6
        }
        getResultAll()
//整个函数执行完成的时间大概6秒多

在这里插入图片描述

获取音乐排行榜的歌曲详细信息

 <ul id="bangList">
        <h1>音乐排行榜</h1>

    </ul>
    <script>
        let httpUrl = 'https://api.apiopen.top/musicRankings';
        let detail = 'https://api.apiopen.top/musicDetails?id=';
        var detailList = [];
        var bangList = document.getElementById('bangList');
        var songId;

        function getAjax(Url) {//promise封装ajax
            return new Promise(
                function ajax(resolve, reject){
                    let xhr = new XMLHttpRequest();
                    xhr.open('GET', Url);
                    xhr.onreadystatechange = function () {
                        if(xhr.status == 200 && xhr.readyState ==4) {
                            let result = JSON.parse(xhr.response);
                            resolve(result)
                        } else if(xhr.readyState ==4 && xhr.status != 200){
                            reject(xhr)
                        }
                    }
                    xhr.send();
                }
                );

        }
        
        async function music() {
            var resultBang = await getAjax(httpUrl);//获取排行榜的音乐
            console.log(resultBang);
            for(var i = 0; i < resultBang.result.length ;i++) {
                var bang = resultBang.result[i];
                var li = document.createElement('li');
                li.innerHTML = bang.name;
                for(var k = 0; k < 3; k++){//获取音乐的详细信息
               		//把歌曲列表写到li中
                 	var liChild = document.createElement('li');
                    liChild.innerHTML = (k+1) + '.' + bang.content[k].title + '--' + bang.content[k].author
                    li.appendChild(liChild)
                    bangList.appendChild(li);
                    songId = bang.content[k].song_id;
                    // var musicDetail =  await getAjax(detail + songId); //如果直接await就会很慢获取
                    // pomise
                     //getAjax(detail + songId).then( function(musicDetail) {
                     //    console.log(musicDetail + songId);//为什么都是输出最后的id呢, 因为是异步执行
                    // });
                    //async..wait获取音乐详细信息
                    async function getDetail() {
                       var detailMusic =  await getAjax(detail + songId);
                       detailList.push(detailMusic);
                    }
                    getDetail()
                   
                }
                
            }
        }
        music()
        console.log(detailList);

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值