demo_09 async&await
Posted luwei0915
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了demo_09 async&await相关的知识，希望对你有一定的参考价值。
// async位于函数字面量或函数表达式的前面(普通函数，立即执行函数，箭头函数均可)，被修饰函数的返回一个Promise对象
// 简化Promise的使用过程，让你的异步代码看起来像是同步的
/*
await一定要位于async函数内部
await一般位于Promise对象之前，所以一般位于async函数执行的前面，但若是返回值为Promise对象的普通函数也可
await会拿到该对象的结果，也就是then中resolve或reject的参数。如果不是Promise对象，则直接返回对应的值
若await后方不是Promise对象，则会将其用Promise.resolve包装后执行
await的执行会被强制等待至拿到结果，后续函数体内的代码执行被阻塞，函数本身不会阻塞整体代码
*/
// 案例1：基本使用 *************************************
/*
// function chloe() {
// return new Promise((resolve, reject) => {
// console.log("chloe");
// resolve(20);
// });
// }
// 以上等价于：
async function chloe() {
console.log("chloe");
return 20;
}
async function taran() {
// chloe函数执行返回出一个Promise对象， await拿到该对象resolve的参数20， 赋值给age
const age = await chloe();
console.log("taran" + age);
}
taran();
输出：
chloe
taran20
*/
// 案例2: 掷色子,使用async和await获取成功的结果 *************************************
/*
// 下面这段代码async中使await 摇色子()先执行，等到三秒后执行完再把得到的结果赋值给左边的n，
// 也就是说test函数需要三秒钟才执行完成，所以test函数是异步的，因此前面必须写async
function 摇色子() {
return new Promise((resolve, reject) => {
let sino = parseInt(Math.random() * 6 + 1)
setTimeout(() => {
resolve(sino)
}, 3000)
})
}
async function test() {
let n = await 摇色子()
console.log(n)
}
test()
输出:2
*/
// 案例3: 获取失败的结果
/*
function 摇色子(猜测) {
return new Promise((resolve, reject) => {
let sino = parseInt(Math.random() * 6 + 1)
if (sino > 3) {
if (猜测 === ‘大‘) {
resolve(sino)
} else {
reject(sino)
}
} else {
if (猜测 === ‘大‘) {
reject(sino)
} else {
resolve(sino)
}
}
setTimeout(() => {
resolve(sino)
}, 300)
})
}
async function test() {
try {
//把await及获取它的值的操作放在try里
let n = await 摇色子(‘大‘)
console.log(‘赢了‘ + n)
} catch (error) {
//失败的操作放在catch里
console.log(‘输了‘ + error)
}
}
test()
// 输出: 输了2
*/
// 案例4:
/*
function fn() {
return new Promise(resolve => {
console.log(1)
})
}
async function f1() {
await fn() // 必须拿到resolve的值
console.log(2)
}
f1()
console.log(3)
// 这个代码因为fn是属于同步的，所以先打印出1，然后是3，但是因为没有resolve结果，所以await拿不到值，因此不会打印2
//1
//3
*/
// 案例5:
function fn() {
return new Promise(resolve => {
console.log(1)
resolve(‘哈哈‘)
})
}
async function f1() {
let msg = await fn() // await表示异步,所以会优先执行console.log(3)
console.log(2)
console.log(msg)
}
f1()
console.log(3)
// 这个代码与前面相比多了个resolve说明promise成功了，所以await能拿到结果，因此就是1 3 2
// 1
// 3
// 2
// 哈哈
以上是关于demo_09 async&await的主要内容，如果未能解决你的问题，请参考以下文章
在 Vuejs 中使用 async-await 等待函数内部的赋值