async/await和fetch()的使用

async和await关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。而FetchAPI可以通过网络访问资源，您可以发出HTTP请求（使用GET和POST其他方法）、下载和上传文件。

Fetch API

Fetch API是一个全局的fetch()方法用于发起获取资源的请求。它返回一个promise，这个promise会在请求响应后被resolve，并传回Response对象。fetch()使用起来很简单，它的语法：

Promise<Response> fetch(input[, init]);

input: URL字符串，或者一个Request对象 options: 具有method, headers, body,credentials等属性的配置对象。

async/await

async/await非常适合与fetch()因为它使用语法糖简化了promises 的工作。

如下代码插入网页中会返回一直可爱的狗狗。

<img id="dog" />
<script>
    async function getDog(){
        const response = await fetch('https://dog.ceo/api/breeds/image/random')
        const dog = await response.json()
        document.getElementById('dog').src = dog.message
    }
    getDog()
</script>

Response对象提供了很多有用的方法：

• response.json()返回解析为 JSON 对象的承诺
• response.text()返回解析为原始文本的承诺
• response.formData()返回已解决的 promise 到FormData
• response.blob()返回解析为Blob（原始数据的类文件对象）的承诺
• response.arrayBuffer()()返回解析为ArryBuffer的承诺（原始通用二进制数据）

处理错误

response.ok;     // => false
response.status; // => 404

可以通过response的这二个属性来判断请求是否成功，response.ok最为方便。

async function getDog(){
        const response = await fetch('https://dog.ceo/api/breeds/image/random')
        if(!response.ok){
            throw new Error('请求失败！');
        }
        const dog = await response.json()
        document.getElementById('dog').src = dog.message
    }
getDog().catch(error => {
    error.message; // => '请求失败！'
});

参考：

fetch()

How to Use Fetch with async/await