结论:加。
const btn = document.querySelector('.btn');
const text = document.querySelector('.text');
// 请求数据的接口1
function getData1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('getData1')
console.log('--------------------end--------------------------')
}, 400)
})
}
// 请求数据的接口2
function getData2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('getData2')
console.log('--------------------end--------------------------')
}, 401)
})
}
btn.addEventListener('click', async () => {
// 如果用户还没请求完成 则span会显示加载中
text.innerHTML = '加载中.....'
try {
const res1 = await getData1();
const res2 = await getData2();
Promise.race([res1, res2])
// 如果向后端请求的数据 等全部执行完毕 取最快的那一个
// 如果最快的那个报错了 那就GG了
.then(res => {
text.innerHTML = res
})
} catch (err) {
// 如果reject被执行 会到 catch里面来 .. 可以执行相应的代码
text.innerHTML = `接口请求失败,数据无法渲染`;
}
})
我们从上图可以看到,如果不加return,resolve、reject后面的代码还会执行,一般而言我们不需要后面的代码在执行了,直接加上return即可。
const btn = document.querySelector('.btn');
const text = document.querySelector('.text');
// 请求数据的接口1
function getData1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
return resolve('getData1')
console.log('--------------------end--------------------------')
}, 400)
})
}
// 请求数据的接口2
function getData2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
return resolve('getData2')
console.log('--------------------end--------------------------')
}, 401)
})
}
btn.addEventListener('click', async () => {
// 如果用户还没请求完成 则span会显示加载中
text.innerHTML = '加载中.....'
try {
const res1 = await getData1();
const res2 = await getData2();
Promise.race([res1, res2])
// 如果向后端请求的数据 等全部执行完毕 取最快的那一个
// 如果最快的那个报错了 那就GG了
.then(res => {
text.innerHTML = res
})
} catch (err) {
// 如果reject被执行 会到 catch里面来 .. 可以执行相应的代码
text.innerHTML = `接口请求失败,数据无法渲染`;
}
})
加上return之后,reject、resolve后面的代码不会执行了。