（一）async，await的作用
async ， await 一起使用，实际是为了解决异步操作的新方法
但是区别于 promise ，promise 是对异步操作进行封装，解决回调地狱的一种解决方案，本质上是为了让程序员书写异步代码更加方便，阅读起来更加简洁，明朗，可以说promise就是异步操作的一个容器
而async ， await，则是promise的一个容器，他对已经包裹好的异步操作的promise进行二次包装，使异步代码看起来像同步一样执行，比promise更加形象的把代码呈现出来
传统promise形式
// 简单封装一下fetch函数
const fet = (url) => fetch(url, {
method: "GET" })
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
function getItems(url) {
fet(url)
.then((v) => {
return v.json();
})
.then((v) => {
console.log(v)
})
}
getItems(url)
async，await形式
async，await形式的代码看起来会更像同步执行，阅读体验也很不错
// 简单封装一下fetch函数
const fet = (url) => fetch(url, {
method: "GET" })
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function getItems(url) {
const response = await fet(url)
const items = await response.json()
console.log(items)
}
getItems(url)
（二）async，await的基本用法
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。
// 简单封装一下fetch函数
const fet = (url) => fetch(url, {
method: "GET" })
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function getItems(url) {
const response = await fet(url)
return await response.json()
}
getItems(url).then((value) => {
console.log(value)
})
正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。
async function f() {
// 等同于
// return 'hello world';
return await 'hello world';
}
f().then(v => console.log(v))
// "hello world"
这里面实际上有一个隐式的调用，会隐式调用Promise.resolve()
async function f() {
// 等同于
// return 'hello world';
// return await 'hello world';
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
async函数运行后一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句（简单说就是，async的函数虽然是异步的，但是函数里面的执行顺序却是同步的）
比如下面这个例子，定义一个异步函数（定时器），5秒后才会执行下一句 await 语句
// 简单封装一下fetch函数
const fet = (url) => fetch(url, {
method: "GET" })
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function timeout(ms) {
await new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function getItems(url, ms) {
await timeout(ms)
const response = await fet(url)
const items = await response.json()
console.log(items)
}
getItems(url, 5000)
（三）async 函数有多种使用形式。
async 不仅可以用在函数声明上，还可以用在函数表达式，箭头函数，对象的方法，Class 的方法上
// 函数声明
async function foo() {
}
// 函数表达式
const foo = async function () {
};
// 箭头函数
const foo = async () => {
};
// 对象的方法
let obj = {
async foo() {
}
};
obj.foo().then(()=>{
})
根据这些特性，我们还可以把上面添加.then回调的函数，变得更加扁平化一些
// 简单封装一下fetch函数
const fet = (url) => fetch(url, {
method: "GET" })
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function getItems(url) {
const response = await fet(url)
return await response.json()
}
(async () => {
const items = await getItems(url)
console.log(items)
})();
（四）async，await 处理多个请求
前文已经说了，async的函数虽然是异步执行，但是函数体里面的内容却是同步的，只有前面的await结束，才会执行下一个await的异步请求
所以当多个请求一起处理时，从上往下写的形式，只有前面一个执行完成才能执行下一个，页面加载速度就会很慢
mua德，烦死了，fetch是真的难用，我吐了，接下来的例子还是老老实实用axios吧，谁再推荐你用fetch，直接上去给我打爆他的头
记得引入一下 axios 的 cdn 或者自己 npm install axios一下
cdn地址：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
处理并行的异步请求
下面两种方法是相同的，喜欢哪个用哪个
// 简单封装一下axios函数
const Get = (url) => axios({
method: 'get', url });
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function getItems(url) {
const [response1, response2] = await Promise.all([Get(url), Get(url)])
console.log(response1)
console.log(response2)
}
getItems(url)
// 简单封装一下axios函数
const Get = (url) => axios({
method: 'get', url });
const url = "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
async function getItems(url) {
const response1Promise = Get(url)
const response2Promise = Get(url)
let foo = await response1Promise;
let bar = await response2Promise;
console.log(foo)
console.log(bar)
}
getItems(url)