async 与 await 语法糖

1.0 async 与 await 语法糖

什么是语法糖？

​ 语法：比如说我们的JavaScript语法function定义一个函数、class声明一个变量

​ 语法糖：就是可以让语法糖变得更加的舒服，更加的简洁。就像我们吃糖块一样，甜甜的感觉~

​ 例如：

// 一个平淡无奇的Promise
new Promise(resolve => {
	console.log("猪猪侠");
	resolve("houdunren.com");
}).then(res => console.log(res)) // houdunren.com

// 多层回调的Promise
new Promise(resolve => {
    resolve();
}).then(res => {
    return "猪猪侠"
}).then(res => {
    console.log(res) // 猪猪侠
})

// 使用了 async 和 await
async function fun() {
    let name = await "猪猪侠"
    console.log(name)  // 猪猪侠
}

// await 相当于一个then的简写 （我们还原一下await）
async function fun() {
    let name = await new Promise(resolve => {
        resolve("猪猪侠")
    })
    console.log(name)  // 猪猪侠
}

// 多个await的情况：多个await存在时，从上到下依次执行，第一个await执行完之后第二个await才能执行
async function fun() {
    let name = await new Promise(resolve => {
        setTimeout(() => {
  		    resolve("猪猪侠")
        },2000)
    })
    let site = await new Promise(resolve => {
        setTimeout(() => {
            resolve("小可爱")
        },2000)
    })
    console.log(site)  // 小可爱
}

fun()

//注：await 必须放到 async 里面使用，不然会报错哦~

1.1 async 与 await 执行异步请示

​ 我们在使用ajax请求数据的时候，如果使用了async 和 await 会让代码看起来简洁、明了、方便维护

​ 例如：

async function get (name) {
	let host = "http://localhost:8888/php";
	let user = await ajax(`${host}/user?name=${name}`)
    let teach = await ajax(`${host}/teach?name=${name}`)
    console.log(teach) //这个时候我们就拿到了我们想请求的数据可以进行页面的渲染
}

get("小仙女")

1.2 async 延迟函数

​ 我们使用一个延迟函数来更好的看到await间断性输出的效果

async function sleep(delay = 2000) {
	return new Promise(resolve => {
		setTime(() => {
			resolve()
		},delay)
	})
}
async function show() {
    for (const i of ['猪猪侠','小仙女']) {
        await sleep();
        console.log(i)
    }
}

show() //两秒后输出“猪猪侠“  再过两秒后输出”小仙女“

1.3 class 与 await 多种声明

1.普通函数声明

async function get(name) {
    return await ajax(`http://localhost:8888/php/user.php?name=${name}`)
}
get("猪猪侠").then(user => {
    console.log(user)
})

2.变量声明一个函数

let get = async function(name) {
    return await ajax(`http://localhost:8888/php/user.php?name=${name}`)
}
get("猪猪侠").then(user => {
    console.log(user)
})

3.声明对象

let hd = {
	async function get(name) {
    	return await ajax(`http://localhost:8888/php/user.php?name=${name}`)
	}
}
hd.get("猪猪侠").then(user => {
    console.log(user)
})

4.封装一个类

class User {
	async get(name){
		return await ajax(`http://localhost:8888/php/user.php?name=${name}`)
	}
}

new User().get("猪猪侠").then(user => {
    console.log(user)
})

1.4 async 基本错误处理

我们知道，Promise可以捕获很多错误，那么我们可以先手动抛出一个错误，来学习async是怎么处理错误的~

// Promise对错误捕获
new Promise((resolve,reject)=>{
    //这里手动抛出一个错误
	throw new Error("fail")
}).catch(error => { //这里捕获错误
	console.log(error)
})

// async 对错误的捕获
async function hd() {
    //这里手动抛出一个错误
	throw new Error("fail")
}
hd().catch(error => {
    console.log(error)
})

1.5 await 并行执行技巧

有时候，我们想让两个await同时执行，在第一个await执行的同时也让第二个await执行，怎么做呢？

async function hd() {
	let res = await Promise.al([p1(),p2()])
	console.log(res)
}