◼ async关键字用于声明一个异步函数：
async是asynchronous单词的缩写，异步、非同步；
sync是synchronous单词的缩写，同步、同时；
◼ async异步函数可以有很多中写法
async function foo(){}
const foo1 = async function(){}
const foo2 = async ()=>{}
class Person{
async foo(){}
}
异步函数的执行流程
◼ 异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。
◼ 异步函数有返回值时，和普通函数会有区别：
情况一：异步函数也可以有返回值，但是异步函数的返回值相当于被包裹到Promise.resolve中；
情况二：如果我们的异步函数的返回值是Promise，状态由会由Promise决定；
情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；
◼ 如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；
异步函数的返回值
//1.返回值区别
// 普通函数
function foo1(){
}
foo1()//默认返回undefined
//2.异步函数
async function foo2() {
//1.返回一个普通的值
// return 321 // Promise.resolve(321)
// 2.返回一个Promise
// return new Promise((reslove,reject)=>{
// setTimeout(()=>{
// reslove("aaa")
// },3000)
// })
//3.返回一个thenable对象
return{
then:function(resolve,reject){
setTimeout(()=>{
resolve("bbb")
},3000)
}
}
}
foo2()//异步函数默认返回Promise
foo2().then(res=>{
console.log(res)//02-异步函数-异步函数返回值.html:22 321
})
异步函数的reject或者出现异常
// 什么情况下结果时rejected
async function foo() {
console.log("111111111111")
console.log("222222222222")
// 如果异步函数有抛出异常(产生错误),这个异常不会被立即被浏览器处理
// 进行如下处理:Promise.reject(error)
// "abc".filter()
throw new Error("hdc:出错了")
console.log("333333333333")
return 123
}
//promise:1.pending(待定) 2.fullfiled(成功) 3.rejected(失败)
foo().then(res=>{
console.log(res)//123
}).catch(err=>{
console.log(err)
})
await关键字
◼ async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。
◼ await关键字有什么特点呢？
通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；
◼ 如果await后面是一个普通的值，那么会直接返回这个值；
◼ 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
◼ 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值；
function bar(){
console.log("bar() 函数执行")
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(123)
},100000)
})
}
//await 关键字:必须在异步函数中使用
async function foo(){
console.log("------------")
// await 是等待Promise有结果之后才会执行后续代码
const res = await bar()
console.log("await后续代码",res)
console.log("++++++++++++")
}
foo()
await 和async结合使用
//1.定义一些其他的异步函数
function hdc(url){
return new Promise((resolve,rejdect)=>{
setTimeout(()=>{
resolve(url)
},2000)
})
}
async function test(){
console.log("test 函数")
return "test"
}
async function bar() {
console.log("bar 函数")
return new Promise((resolve)=>{
setTimeout(()=>{
resolve("bar")
},2000)
})
}
async function demo() {
console.log("demo函数")
return{
then:function(resolve){
resolve("demo")
}
}
}
//2.调用的入口async函数
async function foo() {
const res1 = await hdc("hdc")
console.log("res1",res1)
// 异步函数本来就返回Promise
const res2 = await test()
console.log("res2",res2)
const res3 = await bar()
console.log("res3",res3)
const res4 = await demo()
console.log("res4",res4)
}
foo()
