async的用法
async就是异步的意思,它作为一个关键字放到函数前面,用于表示函数是一个异步函数
异步函数也就意味着该函数的执行不会阻塞后面代码的执行,而async 函数返回的是一个promise 对象。
async function func() {
return "async"
};
func();
console.log('执行'); //控制台输出 执行
可以看出async异步并不阻塞后面代买的执行
async function func() {
return "async"
};
console.log(func())
console.log('执行'); //控制台输出 执行
可以看出async 函数返回的是一个promise 对象,那么我们可以用then继续下一步
async function func() {
return "async"
};
func().then( res => {
console.log(res)
})
console.log('执行'); //控制台输出 执行
可以更近一步的看出async函数并没有阻塞后面代码的执行
await的用法
await是等待的意思,他后面可以跟任何表达式,不过我们更多的是放一个返回promise 对象的表达式。
注意await 关键字只能放到async 函数里面
我们写一个函数返回一个promise对象,1秒后返回“ promise对象 ”字符串,在写一个async函数放置await,最后调用控制台将输出如下
function returnPromise() {
return new Promise((resolve,reject) => {
setTimeout(()=>{
resolve('promise对象')
},1000)
})
}
async function awaitFunc() {
let data = await returnPromise();
console.log(data)
}
awaitFunc();
这样也就再也不需要回调了,可以很好的解决回调地域的问题
回头来看代码的执行过程,调用 awaitFunc 函数,它里面遇到了await,代码就暂停到这里,不再向下执行了,等后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回,返回值拿到之后,它继续向下执行。具体到代码, 遇到await 之后,代码就暂停执行了, 等待returnPromise执行完毕,1秒后,promise resolve了, 并返回了值, 这时await 才拿到返回值, 然后赋值给data, 暂停结束,代码才开始继续执行下一行console.log语句,最后输出'promise对象'字符串。
这就是async与await,项目实践中我们也经常用到,比如:
//下钻渲染
async down(path, name){
let code=this.backname(name);
let data = await axios.get(`api-website/sys/st-sch-school/schoolByGIS?province=${code}`);
data=data.data.result;
let json = await axios.get(path);
this.$echarts.registerMap(name, json.data);
this.myChart.setOption(
DownheatOption(data, name),
false,
);
},
async mounted() { let map = await axios.get(`http://localhost:8080/static/json/china.json`); this.chinajson = map.data; let one= await axios.get('api-website/sys/st-sch-school/schoolByGIS?batch=3'); this.heatarr.all=one.data.result;//全部高校数据 },
async goodsDetails() { let self = this; let result = await api.request('goodsDetails', { code: self.code }) if (result.status == 0) { let data = result.data; self.name = data.name; self.images = JSON.parse(data.images); } else { self.$message.error('获取商品详情失败!') } },
同
goodsDetails() { let self = this; api.request('goodsDetails', { code: self.code }, res => { if (res.status == 0) { let data = res.data; console.log('data', data) self.name = data.name; self.images = JSON.parse(data.images); } else { self.$message.error('获取商品详情失败!') } }) },
通过以上示例相信可以更好的了解async、await实践运用