async…await使用
1.功能作用:
- async 告诉程序这是一个异步,async中的代码,会等待await 表达式后面的结果,跳过async 函数,继续执行后面代码
- async 函数会返回一个Promise 对象,那么当 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值
- 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);


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

被折叠的 条评论
为什么被折叠?



