async/await的基本使用以及fetchAPI的部分细节
先看代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击获取图片</button><img src="" alt=""><script>console.log('同步任务1...')async function fn() {console.log('异步函数中的同步任务2...');let response = await fetch('https://dog.ceo/api/breeds/image/random')console.log(JSON.parse(await response.text()))console.log('异步函数中的同步任务3...');}fn()console.log('同步任务4...');</script>
</body>
</html>async可以加在函数前，这是这个函数就变成了一个异步函数的环境，但是，很重要的一点，异步函数环境中也是可以有同步代码的，await异步操作之前的同步代码执行是不会受到影响的，但是await异步操作之后的同步代码会延迟执行
下面是代码的执行结果，很容易看出看出来异步函数里边的任务3是最后执行的，其他的同步代码没受到影响。下面是代码执行结果
关于fetch请求的细节，fetch请求返回的是一个Promise对象，但是，注意哈，上边的代码使用了await处理了返回的Promise对象，也就是说这里最后实际上的返回值是Promise执行完成后的服务器响应对象，也就是response对象。
拿到这个服务器响应对象之后，调用text()方法，会再次返回一个Promise对象。注意这里很重要，实际上服务器返回的响应对象确实是包含了响应头，状态码等原信息，但是真正的响应内容其实并没有在这个响应对象中，即响应内容此时并不在内存中，此时想要获取真正的响应内容，仍然是一个异步的请求操作，所以调用text方法之后，仍然返回的是一个异步的Promise对象，加上await处理异步后才是真正的字符串响应内容，此时在通过JSON.parse()，将json字符串解析为js能操作的对象
其实response响应对象上也提供有更简单的方法，json()方法，可以不用parse解析，直接得到js对象，await response.json()
第一次学js中的异步和网络请求相关的操作，叙述有点啰嗦，哈哈哈，但这会感觉对这个有点理解了